@charset "utf-8";

.SubHeaderWrap {background:url(/image/books/header.jpg) 50% 50% no-repeat;}

/* 교재상단 카테고리 메뉴 ----------------------------------------------------------------------------------------------------*/
.BookCategoryWrap {background-color:#33336e;border-radius:20px;padding:10px;}
.BookCategoryWrap .TabStyleC {margin-bottom:10px;}
.BookCategoryWrap .BookKindGroup ul {display:flex;flex-wrap:wrap;gap:10px;}
.BookCategoryWrap .BookKindGroup ul li a {
    padding:0 17px;line-height:33px;color:#b0b0d0;background-color:#5d5d8b;white-space: nowrap;display:block;
    border-radius:50px;transition: all 0.3s ease-in-out 0s;
}
.BookCategoryWrap .BookKindGroup ul .on a, .BookCategoryWrap .BookKindGroup ul li a:hover {background-color:#8dc63f;color:#fff;}


/* 교재상세 ------------------------------------------------------------------------------------------------------------- */
.PageTitle {display:flex;align-items:center;justify-content:center;position:relative;margin-bottom:30px;}
.PageTitle::after {content:"";display:block;width:100%;height:1px;background-color:#9999a7;left:0;top:50%;z-index:0;position:absolute;}
.PageTitle h2 {font-size:35px;font-weight:600;color:#000;background-color:#fff;padding-right:15px;letter-spacing:-1px;}
.PageTitle .KidIcon, .PageTitle h2 {position:relative;z-index:1;}
.PageTitle .KidIcon {padding: 0 15px;margin-right:0;background-color:#fff;}
.PageTitle .KidIcon::before, .PageTitle h2::after {
    content:"";display:block;position:absolute;top:50%;width:6px;height:6px;border-radius:100%;background-color:#9999a7;margin-top:-2px;
}
.PageTitle .KidIcon::before {left:-6px;}
.PageTitle h2::after {right:-6px;}

.TopBookInfoWrap {margin-bottom:70px;}
.TopBookInfoWrap .BookInfoBox {display:flex;column-gap:30px;margin-bottom:30px;}
.TopBookInfoWrap .BookInfoBox .BookCover {
    width:310px;flex-shrink:0;overflow:hidden;border-radius:7px;padding-right:7px;background-color:#ececec;
    -webkit-box-shadow:3px 4px 14px rgba(0,0,0,0.3);-moz-box-shadow:3px 4px 14px rgba(0,0,0,0.3);box-shadow:3px 4px 14px rgba(0,0,0,0.3);
}
.TopBookInfoWrap .BookInfoBox .BookCover span {display:block;font-size:0;line-height:normal;border-radius:7px;overflow:hidden;}
.BookInfoDetailGroup {margin-bottom:70px;}
.TopBookInfoWrap .BookInfoBox .DetailGroup {flex:1;display:flex;flex-direction:column;justify-content:space-between;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox {flex:1;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul {display:flex;flex-wrap:wrap;margin-bottom:15px;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul strong, .TopBookInfoWrap .BookInfoBox .DetailGroup .CEFR strong {color:#fff;font-weight:400;text-align:center;background-color:#9999a7;line-height:26px;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul li {width:calc(100% / 2);padding:6px 0;border-bottom:1px dashed #b5b5b5;display:flex;font-size:15px;align-items:center;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul li:first-child, .TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul li:last-child {width:100%;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul strong {width:88px;flex-shrink:0;text-align:center;background-color:#9999a7;color:#fff;font-weight:400;border-radius:50px;margin-right:15px;}
.TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul span {flex:1;line-height:130%;}
.TopBookInfoWrap .BookInfoBox .CEFR strong {border-top-left-radius:10px;border-top-right-radius:10px;width:99px;display:block;}
.TopBookInfoWrap .BookInfoBox .CEFR div {overflow:hidden;border:1px solid #d8d8de;border-radius:10px;border-top-left-radius:0;}
.TopBookInfoWrap .BookInfoBox .CEFR table {width:100%;}
.TopBookInfoWrap .BookInfoBox .CEFR table th {background-color:#f4f4fb;border-bottom:1px solid #d8d8de;}
.TopBookInfoWrap .BookInfoBox .CEFR table th, .TopBookInfoWrap .BookInfoBox .CEFR table td {border-left:1px solid #d8d8de;text-align:center;line-height:36px;height:36px;}
.TopBookInfoWrap .BookInfoBox .CEFR table th:first-child, .TopBookInfoWrap .BookInfoBox .CEFR table td:first-child {border-left:0;}
.TopBookInfoWrap .BookInfoBox .CEFR table .check {background-color:#e8f4d9;}

.TopBookInfoWrap .BookInfoBox .BtnGroup {display:flex;column-gap:10px;flex-shrink:0;}
.TopBookInfoWrap .BookInfoBox .BtnGroup a {line-height:58px;font-size:18px;}
.TopBookInfoWrap .BookInfoBox .BtnGroup a::before {content:"";display:inline-block;vertical-align:middle;font-family: 'Material Symbols Outlined';font-size:24px;font-weight:200;margin-right:5px;line-height:100%;margin-top:-4px;}
.TopBookInfoWrap .BookInfoBox .BtnGroup .Listening::before {content:"\f047";}
.TopBookInfoWrap .BookInfoBox .BtnGroup .View::before {content:"\e147";}
.TopBookInfoWrap .BookInfoBox .BtnGroup .Down::before {content:"\f090";}
.TopBookInfoWrap .BookInfoBox .BtnGroup a.none {border-color:#e2e2ed;color: #c7c7c7;cursor:default;}

/* 관련도서 */
.RelationBookWrap {display:flex;column-gap:30px;}
.RelationBookWrap .BookGrid {width:calc(100% / 2);border-top:2px solid #cdcddb;border-bottom:2px solid #cdcddb;padding:30px 0;}
.RelationBookWrap .BookGrid h3 {
    display:block;width:100%;text-align:center;font-size:22px;color:#000;font-family: sbfont;font-weight: 600;margin-bottom:15px;
}
.RelationBookWrap .BookGrid > div {width:420px;margin:auto;padding:0 30px;}
.RelationBookWrap .BookGrid .slick-dots {display:none !important;}
.RelationBookWrap .BookGrid .slick-dotted.slick-slider {margin-bottom:0;}
.RelationBookWrap .BookGrid .slick-slide {margin:0 15px;}
.RelationBookWrap .BookGrid .slick-slide strong {
    display:block;width:100%;text-align:center;font-size:14px;font-weight:400;margin-top:15px;word-wrap: break-word;word-break:keep-all;
    overflow-wrap:break-word;
}
.RelationBookWrap .BookGrid .slick-prev, .RelationBookWrap .BookGrid .slick-next {top:41%;}
.RelationBookWrap .BookGrid .slick-prev, .RelationBookWrap .BookGrid .slick-next, .RelationBookWrap .BookGrid .slick-prev::before, .RelationBookWrap .BookGrid .slick-next::before {width:20px;height:38px;}
.RelationBookWrap .BookGrid .slick-prev::before, .RelationBookWrap .BookGrid .slick-next::before {display:block;}
.RelationBookWrap .BookGrid .slick-prev::before {content:"";background:url(/image/common/btn_arrow_l.png) 0 0 no-repeat;}
.RelationBookWrap .BookGrid .slick-next::before {content:"";background:url(/image/common/btn_arrow_r.png) 0 0 no-repeat;}

.DetailCnt div {width:100%;border-top:2px solid #33336e;}
.DetailCnt div img {width:100%;}
.DetailCnt h3 {
    display:inline-block;max-width:182px;width:100%;background-color:#33336e;line-height:51px;color:#fff;text-align:center;
    border-top-left-radius:15px;border-top-right-radius:15px;font-size:22px;font-family: sbfont;font-weight: 600;
}
.DetailCnt + .text_center .btnTypeB {max-width:250px;width:100%;}
.DetailCnt + .text_center .btnTypeB::before {
    content:"\ef42";display:inline-block;vertical-align:middle;font-family: 'Material Symbols Outlined';font-size: 18px;margin:-3px 3px 0 0;
}


/* 모바일 ------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 960px){
    /* 교재상세 */
    .TopBookInfoWrap .BookInfoBox {align-items: flex-start;}
    .TopBookInfoWrap .BookInfoBox .BookCover {width: 290px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup {margin-top:20px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a {flex:1 1 30%;padding:0;}
    .TopBookInfoWrap .BookInfoBox .DetailGroup .TxtBox ul li {width:100%;}
}

@media screen and (max-width: 920px){
    /* 교재상세 */
    .RelationBookWrap {flex-direction:column;}
    .RelationBookWrap .BookGrid:first-child {border-bottom:0;}
    .RelationBookWrap .BookGrid, .RelationBookWrap .BookGrid > div {width:100%;}
    
}

@media screen and (max-width: 900px){
    /* 교재리스트 상단탭 */
    .TabStyleC ul {flex-wrap:wrap;}
    .TabStyleC ul li {width: calc(100% / 6);border-bottom:1px solid #c1c1d3;}
    .TabStyleC ul li:last-child {border-bottom:0;border-right:1px solid #c1c1d3;}

    /* 교재상세 */
    .TopBookInfoWrap .BookInfoBox .BtnGroup {flex-direction:column;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a {line-height: 48px;margin-bottom:10px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a:last-child {margin-bottom:0;}
}

@media screen and (max-width: 840px){
}

@media screen and (max-width: 768px){
    /* 교재리스트 상단탭 */
    .TabStyleC ul li {width: calc(100% / 5);}
    .TabStyleC ul li:nth-child(6) {border-bottom:0;}

    /* 교재상세 */
    .TopBookInfoWrap .BookInfoBox .BtnGroup a {font-size:16px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a::before {font-size: 22px;}
    .TopBookInfoWrap .BookInfoBox .CEFR table th, .TopBookInfoWrap .BookInfoBox .CEFR table td {font-size:15px;}
}

@media screen and (max-width: 720px){
    /* 교재상세 */
    .TopBookInfoWrap .BookInfoBox .BookCover {width: 260px;}
    .PageTitle {text-align:center;flex-direction:column;}
    .PageTitle h2 {font-size: 31px;}
    .PageTitle::after, .PageTitle .KidIcon::before, .PageTitle h2::after {display:none;}
}

@media screen and (max-width: 640px){
    /* 교재리스트 상단탭 */
    .TabStyleC ul li {width: calc(100% / 4);}
    .TabStyleC ul li a {font-size:17px;letter-spacing:-0.5px;}
    .TabStyleC ul li:nth-child(5), .TabStyleC ul li:nth-child(6) {border-bottom:0;}
    .BookCategoryWrap .BookKindGroup ul {gap:10px 5px;justify-content: center;}
    .BookCategoryWrap .BookKindGroup ul li a {padding:0 15px;letter-spacing:-0.5px;}

    /* 교재상세 */
    .TopBookInfoWrap .BookInfoBox {flex-direction:column;}
    .TopBookInfoWrap .BookInfoBox .BookCover {margin:0 auto 30px;}
    .RelationBookWrap .BookGrid .slick-prev, .RelationBookWrap .BookGrid .slick-next, .RelationBookWrap .BookGrid .slick-prev::before, .RelationBookWrap .BookGrid .slick-next::before {width:13px;height:25px;background-size:contain;}

}

@media screen and (max-width: 480px){
    /* 교재리스트 상단탭 */
    .TabStyleC ul li {width: calc(100% / 3);}
    .TabStyleC ul li a {font-size:16px;line-height: 42px;}
    .TabStyleC ul li:nth-child(4) {border-left:0;}
    .TabStyleC ul li:nth-child(5), .TabStyleC ul li:nth-child(6) {border-bottom:1px solid #c1c1d3;}
    .BookCategoryWrap .BookKindGroup ul li a {font-size: 14px;padding: 0 10px;}

    /* 교재상세 */
    .TopBookInfoWrap {margin-bottom: 60px;}
    .RelationBookWrap .BookGrid h3 {font-size: 20px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a {line-height: 42px;font-size: 15px;}
    .TopBookInfoWrap .BookInfoBox .CEFR table th, .TopBookInfoWrap .BookInfoBox .CEFR table td {font-size:14px;}
    .TopBookInfoWrap .BookInfoBox .BtnGroup a::before {font-size: 18px;}
    .DetailCnt + .text_center .btnTypeB {max-width:none;}
}    

@media screen and (max-width: 360px){
    /* 교재리스트 상단탭 */
    .TabStyleC ul li a {font-size:14px;}
}

@media screen and (max-width: 320px){
    /* 교재상세 */
    .RelationBookWrap .BookGrid {padding: 25px 0;}
}