:root{--title:28px;--enTitle:18px;--tit:40px;--callBack:16px}
*{padding:0;margin:0}
#listLibrary{min-height:100vh;display:flex;justify-content:space-between;text-align:center}
#listLibrary .menu{width:20%;background:url(/_upload/tpl/0b/59/2905/template2905/./images/librarymenu.png) no-repeat center;background-size:cover;position:relative}
#listLibrary .menu:after{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(40,93,76,.9);z-index:1}
#listLibrary .menu .title{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);font-size:var(--tit);color:#fff;z-index:2;writing-mode:tb-rl;letter-spacing:.3em;white-space:nowrap}
#listLibrary .menu .callback{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);padding-left:1.1em;font-size:16px;color:#fff;z-index:2;background:url(/_upload/tpl/0b/59/2905/template2905/./images/callback.png) no-repeat left center;transition:.3s ease-in}
#listLibrary .menu .callback a{text-decoration:none;color:#fff}
#listLibrary .menu .callback:hover{padding-left:1.5em}
#listLibrary .content{flex:1;display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
#listLibrary .content .item{min-height:50%;width:40%;position:relative;background-size:cover;background-repeat:no-repeat;background-position:center;overflow:hidden;transition:.3s linear}
#listLibrary .content .item:nth-child(1)::before,#listLibrary .content .item:nth-last-child(1):before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(40,93,76,.5);z-index:1;transition:.6s linear}
#listLibrary .content .item:hover:before{opacity:0;transition:.6s ease-in}
#listLibrary .content .item:nth-child(1),#listLibrary .content .item:nth-child(4){width:60%}
#listLibrary .box{aspect-ratio:307/240;position:absolute;height:50%;color:#fff;background:rgba(251,198,0,.3);z-index:2;display:flex;flex-direction:column;padding:5%;box-sizing:border-box;text-align:left;transition:.4s ease-in}
#listLibrary .title{font-size:var(--title)}
#listLibrary .enTitle{font-size:var(--enTitle)}
#listLibrary .item:nth-child(1) .box,#listLibrary .item:nth-child(4) .box{background:#285d4c url(/_upload/tpl/0b/59/2905/template2905/./images/libraryBG.png) center;background-size:50vw}
#listLibrary .item:nth-child(1) .box{right:0;bottom:0}
#listLibrary .item:nth-child(2) .box{left:0;top:0;text-align:right;justify-content:flex-end}
#listLibrary .item:nth-child(3) .box{right:0;top:0;justify-content:flex-end}
#listLibrary .item:nth-child(4) .box{left:0;bottom:0;text-align:right}
#listLibrary .item:nth-child(1):hover .box,#listLibrary .item:nth-child(4):hover .box{aspect-ratio:1.5/1;opacity:.9}
#listLibrary .item:nth-child(2):hover .box,#listLibrary .item:nth-child(3):hover .box{aspect-ratio:1.5/1;background:rgba(251,198,0,.6)}
#listLibrary .menu .title:before{content:'';display:block;position:absolute;left:30%;top:40%;transform:translateX(-50%) translateY(-50%);width:500px;height:500px;background:url(../images/libraryTitle.png) no-repeat center;pointer-events:auto}
@media screen and (max-width:1366px){:root{--title:24px;--enTitle:14px;--tit:34px}
#listLibrary .menu .title:before{width:280%;height:200%;left:35%;background-size:contain}
}
@media screen and (max-width:999px){#listLibrary .menu{width:30%;position:fixed;top:0;left:0;z-index:9;height:100%}
#listLibrary .content{flex-direction:column;margin-left:30%}
#listLibrary .content .item{width:100%!important;height:auto;aspect-ratio:3/2;min-height: auto;}
}
@media screen and (max-width:480px){
:root {
    --title: 18px;
    --enTitle: 12px;
    --tit: 24px;
}
#listLibrary .menu .callback,#listLibrary .menu .title{position:relative;transform:initial;z-index:2;inset:0;width:auto;margin:auto;display:inline;writing-mode:horizontal-tb}
#listLibrary .menu {
    position: relative;
    width: 100%;
    display:flex;
    padding:20px 0;
}
#listLibrary .content {
    margin: 0;
}
#listLibrary{flex-direction:column}
#listLibrary .menu:after{z-index:0}
#listLibrary .menu .title:before{display:none}
#listLibrary .menu .callback a{font-size:12px;}
}