@charset "utf-8";

.RecommendWrap {background-color:#f4f4fb;}


.ClassTab .TabGroup {width:100%;}
.ClassTab ul {margin:0 35px;}
.ClassTab .scrollX {margin:0 20px;}
.ClassTab li {width:calc(100% / 6);}
.ClassTab li a::before {
    content:"";display:block;position:absolute;width:40px;height:40px;top:-22px;left:50%;margin-left:-20px;z-index:1;
    background-size:contain !important;opacity:0;transition: all 0.3s ease-in-out 0s;
}
.ClassTab li.on a::before, .ClassTab li a:hover::before {opacity:1;}
.ClassTab li:nth-child(1) a:hover::before, .ClassTab li:nth-child(1) a::before {background:url(/image/books/child01.png) 0 0 no-repeat;}
.ClassTab li:nth-child(2) a:hover::before, .ClassTab li:nth-child(2) a::before {background:url(/image/books/child02.png) 0 0 no-repeat;}
.ClassTab li:nth-child(3) a:hover::before, .ClassTab li:nth-child(3) a::before {background:url(/image/books/child02.png) 0 0 no-repeat;}
.ClassTab li:nth-child(4) a:hover::before, .ClassTab li:nth-child(4) a::before {background:url(/image/books/child02.png) 0 0 no-repeat;}
.ClassTab li:nth-child(5) a:hover::before, .ClassTab li:nth-child(5) a::before {background:url(/image/books/child03.png) 0 0 no-repeat;}
.ClassTab li:nth-child(6) a:hover::before, .ClassTab li:nth-child(6) a::before {background:url(/image/books/child04.png) 0 0 no-repeat;}

/* 책 리스트 */
.BooKGridWrap .grid {width:100%;max-width:none;}
.BooKGridWrap .grid li {width:calc(100% / 5);padding:15px 10px;}
.BooKGridWrap .grid li a {overflow:hidden;display:block;border-radius:10px;font-size:0;line-height:normal;position:relative;}
.BooKGridWrap .grid li a::before, .BooKGridWrap .grid li a::after {content:"";display:block;position:absolute;transition: all 0.3s ease-in-out 0s;}
.BooKGridWrap .grid li a::after {background-color:rgba(51,51,110,0);width:100%;height:100%;top:0;left:0;z-index:1;}
.BooKGridWrap .grid li a::before {
    content:"\e8ff";font-family: 'Material Symbols Outlined';font-size: 25px;width:37px;height:37px;line-height:37px;background-color:#fff;text-align:center;
    border-radius:100%;color:#000;z-index:10;left: 50%;top: 50%;-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
    text-align:center;font-weight:300;opacity:0;
}
.BooKGridWrap .grid li a + strong {
    display:block;text-align:center;width:100%;margin-top:15px;font-size:16px;word-wrap: break-word;word-break:keep-all;overflow-wrap:break-word;
    letter-spacing:-1px;font-weight:400;color:#63636d;
}
.BooKGridWrap .grid li div {
    opacity:1;position:absolute;bottom:0;left:0;width:100%;background-color:#f4f4fb;transition: all 0.3s ease-in-out 0s;
    border-radius: 200px 200px 0 0;text-align:center;padding-top:15px;z-index: 10;height:0;opacity:0;
    -webkit-box-shadow:0px 0px 9px rgba(0,0,0,0.5);-moz-box-shadow:0px 0px 9px rgba(0,0,0,0.5);box-shadow:0px 0px 9px rgba(0,0,0,0.5);
}
.BooKGridWrap .grid li div strong {
    display:inline-block;margin:auto;padding:0 10px;line-height:26px;border:1px solid #adadad;
    border-radius:50px;background-color:#fff;margin-bottom:8px;
}
.BooKGridWrap .grid li div strong, .BooKGridWrap .grid li div span {font-size:16px;color:#000;}
.BooKGridWrap .grid li div span {display:block;}
.BooKGridWrap .grid li a:hover::before {opacity:1;}
.BooKGridWrap .grid li a:hover::after {background-color:rgba(51,51,110,0.5);}
.BooKGridWrap .grid li a:hover div {height:100px;opacity:1;}


/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 990px){
    .BooKGridWrap .grid li {width: calc(100% / 4);}
}

@media screen and (max-width: 855px){
    .BooKGridWrap .grid li a:hover div {height: 80px;border-radius: 300px 300px 0 0;}
    .BooKGridWrap .grid li div strong, .BooKGridWrap .grid li div span {font-size: 15px;}
    .BooKGridWrap .grid li div strong {margin-bottom: 5px;}
}

@media screen and (max-width: 640px){
    .BooKGridWrap .grid li {width: calc(100% / 3);}
    .ClassTab ul {margin:0 25px;}
    .ClassTab li a::before {width: 34px;height: 34px;margin-left:-17px;}
    .ClassTab ul, .ClassTab li a {border-top-right-radius: 28px;border-top-left-radius: 28px;}
}

@media screen and (max-width: 580px){
    .ClassTab ul {flex-wrap:wrap;}
    .ClassTab li {width: calc(100% / 3);}
    .ClassTab li.on a, .ClassTab li a:hover {border-radius:50px;}
    .ClassTab li a::before {display:none;}
}

@media screen and (max-width: 480px){
    .ClassTab ul {margin:0;}
    .ClassTab ul, .ClassTab li a {border-radius:28px;}
    .BooKGridWrap .grid li {width: calc(100% / 2);}
    .BooKGridWrap .grid li a + strong {font-size:14px;margin-top: 10px;}
    .BooKGridWrap .grid {margin-top:20px;}
    .BooKGridWrap .grid li div strong, .BooKGridWrap .grid li div span {font-size: 14px;}
}

@media screen and (max-width: 380px){
    .BooKGridWrap .grid li a div {display:none;}
    .ClassTab ul, .ClassTab li a {border-radius: 24px;}
}

@media screen and (max-width: 320px){
    .BooKGridWrap .grid li div strong, .BooKGridWrap .grid li div span {font-size: 13px;}
}