.home-page{min-height:90vh}.home-page__list-study{padding:20px}.home-page__list-study h3{font-size:18px}.home-page .home-title-search,.home-page__list-study h3{line-height:24px;font-weight:500;color:#3f4254;margin-bottom:24px}.home-page .home-title-search{font-size:20px}.home-hocr{height:calc(100vh - 20px);position:relative}.home-hocr .detail__Practive__left,.home-hocr .detail__Practive__main{height:100%}.home-hocr .hocr-viewer-container{height:0}.home-hocr .hocr-viewer-container-turial{transform-origin:center top;padding-right:10px;top:0;position:relative}.home-hocr .button-display-none{display:none!important}.home-hocr .border-display-none,.home-hocr .detail__Practive__right{display:none}.home-hocr .ocr_page{width:1079px;height:1620px}.home-hocr .ocr_page_turial{width:1079px;left:50%;transform:translateX(-50%)}.home-page__list-study,.row{display:flex;justify-content:center}.row{flex-wrap:nowrap;transition:gap .3s ease}.card-container,.card-isSidebarOff{display:flex;align-items:center;height:275px;background:#f3f4f6;border-radius:12px;overflow:hidden;transition:width .4s ease;padding:4px}.card-container.active,.card-isSidebarOff.active{width:480px}.card-container.active .content,.card-isSidebarOff.active .content{display:flex;opacity:1;width:auto;flex-direction:column;justify-content:space-between;transition:opacity .3s ease .3s,width 0s ease .3s,padding 0s ease .3s}.card-container{width:230px}.card-isSidebarOff{width:210px}.card-container .thumb{flex:0 0 221px;height:100%}.card-isSidebarOff .thumb{flex:0 0 202px;height:100%}.card-container .thumb img,.card-isSidebarOff .thumb img{width:100%;height:100%;border-radius:8px}.card-container .content,.card-isSidebarOff .content{opacity:0;width:300px;padding:10px;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;height:100%;transition:opacity .2s ease,width 0s ease,padding 0s ease}.card-container:hover .content,.card-isSidebarOff:hover .content{opacity:1;width:auto;padding:10px;transition:opacity .3s ease .3s,width 0s ease .3s,padding 0s ease .3s}@media(max-width:1560px){.card-container .content,.card-isSidebarOff .content{width:350px}.card-isSidebarOff{width:205px}.card-isSidebarOff .thumb{flex:0 0 197px;height:100%}}@media(max-width:1440px){.home-page__list-study{padding:20px}.card-container.active,.card-isSidebarOff.active{width:420px}}@media(max-width:1280px){.card-container.active{width:400px}.card-isSidebarOff.active{width:370px}.card-isSidebarOff{width:193px}.card-isSidebarOff .thumb{flex:0 0 185px}}@media(max-width:1070px){.home-page__list-study{padding:20px 10px}.card-container:hover,.card-isSidebarOff:hover{width:400px}}@media(max-width:1024px){.row{gap:20px}.card-container,.card-container.active{width:420px}.card-container .thumb,.card-isSidebarOff .thumb{flex:0 0 200px}.card-container .content p,.title{font-size:13px}.card-container .content,.card-isSidebarOff .content{opacity:1;padding:10px}}@media(max-width:800px){.row{gap:20px}.card-container.active{width:320px}.card-container{height:160px;width:320px}.card-container .thumb{flex:0 0 120px}.card-container .content p,.title{font-size:13px}.card-container .content{opacity:1;padding:10px}}@media(max-width:600px){.row{padding:10px;flex-wrap:wrap}.home-page__list-study{padding:20px}.card-container:hover{box-shadow:1.95px 1.95px 2.6px rgba(0,0,0,.15)}.card-container{width:100%;margin:10px}.card-container .content,.card-container:hover,.card-container:hover .content{width:100%}}.hcc-book-name{font-weight:700;font-size:18px;line-height:24px;color:#181c32;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;word-break:normal;overflow-wrap:break-word}@media(max-width:1024px){.hcc-book-name{-webkit-line-clamp:1}.hcc-title{font-size:10px!important;font-weight:600!important}}@media(max-width:539px){.hcc-book-name{font-size:16px!important}.hcc-title{font-size:14px!important;font-weight:600!important}}.hcc-author{font-weight:400;font-size:12px;line-height:14px;color:#8b90a7}.hcc-bottom{display:flex;justify-content:end;align-items:center;gap:9px;cursor:pointer}.hcc-bottom p{margin-bottom:0}.hcc-bottom .hcc-title{color:#0072bb;font-size:14px;margin-bottom:0;font-weight:700}.hcc-bottom .hcc-btn{height:32px;border-radius:24px;padding:8px;flex-shrink:0}