.contents{background: #F9FBFD;}

/*책영역*/
.bookArea{position: relative; box-sizing: border-box;}
.bookArea .tabMenu{display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid #E2E2E2;}
.bookArea .tabMenu button{font-size: 24px; color: #666; font-weight: bold; text-align: center; padding: 0 0 20px 0; box-sizing: border-box; cursor: pointer;}
.bookArea .tabMenu button.active{color: #0056AA; position: relative;}
.bookArea .tabMenu button.active::after{content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 3px; background: #0056AA;}
.bookArea .tabPanels .conBox{display: grid; grid-template-columns: 370px auto; gap: 15px; margin-top: 40px;}
.bookArea .tabPanels .conBox .mainBook{background: #ddd; height: 540px; border: 1px solid #ddd; box-sizing: border-box;}
.bookArea .tabPanels .conBox .subBook> ol{display: grid; grid-template-columns: repeat(4,1fr); gap: 15px;}
.bookArea .tabPanels .conBox .subBook> ol> li{background: #555; height: 263px; border: 1px solid #ddd; box-sizing: border-box; position: relative; display: block;} 
.bookArea .tabPanels .conBox .mainBook img, .bookArea .tabPanels .conBox .subBook> ol> li img{width: 100%; height: 100%;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox{position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); color: #fff; padding: 20px; box-sizing: border-box; display: inline-grid; opacity: 0; transition: opacity 0.3s;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox:hover, .bookArea .tabPanels .conBox .subBook> ol> li:focus> div.titBox, .bookArea .tabPanels .conBox .subBook> ol> li:focus-within> div.titBox{opacity: 1;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox p{font-weight: bold; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; height: 54px; line-height: 1.6em;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con{display: grid; font-size: 13px;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dl{display: inline-flex; }
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dd{width: 60px; }
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dt{color: #BBBBBB; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 90px;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn{display: flex; justify-content: space-between; align-items: end;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn button, .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn a{display: block; width: 42px; height: 42px; border-radius: 10px; background: #fff;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn button img{width: 16px; height: 16px;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn a{background: #0056AA; color: #fff; font-size: 32px; display: flex; justify-content: center; align-items: center; font-weight: lighter;}
.bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan{display: none }
.bookArea .tabPanels .moreBtn{border: 1px solid #ddd; padding: 10px 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; border-radius: 50px; width: 230px; margin: 30px auto 0 auto; background: #fff;}
.bookArea .tabPanels .moreBtn img{margin-left: 5px;}


@media (max-width: 600px) {
  .tabMenu {
    flex-direction: column;
  }
}

/*****테블릿가로*****/
@media all and (max-width:1530px) {  
 
  /*책영역*/
  .bookArea .tabPanels .conBox{grid-template-columns: 340px auto;}
  .bookArea .tabPanels .conBox .mainBook{height: 455px;}
  .bookArea .tabPanels .conBox .subBook> ol> li{height: 220px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox p{font-size: 15px; height: 44px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dd,  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dt{width: 50px; font-size: 11px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan{display: none;}
 }
 
 
 /*****테블릿세로*****/
 @media all and (max-width:1220px) { 

  /*책영역*/
  .bookArea .tabPanels .conBox{display: block; margin-top: 30px;}
  .bookArea .tabPanels .conBox .mainBook{display: none !important;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dt{width: 60px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan{display: none; position: fixed; z-index: 9; background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; left: 0; top: 0;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan .imgBox{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan a.closeBtn{position: absolute; right: 50px; top: 50px; width: 50px; height: 50px; background: url(/bookFinder/images/alpasq/closeBtn.png)no-repeat center;}
 
 }
 
 
 /*****모바일*****/
 @media all and (max-width:767px) {
  .copyright{font-size: 11px;}

  /*책영역*/
  .bookArea .tabMenu button{font-size: 17px;}
  .bookArea .tabPanels .conBox{grid-template-columns: initial; margin-top: 20px;}
  .bookArea .tabPanels .conBox .mainBook{display: none !important;}
  .bookArea .tabPanels .conBox .subBook> ol{grid-template-columns: repeat(2,1fr);}
  .bookArea .tabPanels .conBox .subBook> ol> li{height: 200px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox{padding: 12px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox p{font-size: 15px; height: 48px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con{margin-top: -12px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dl{height: 20px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dd{width: 54px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .con dt{width: 60px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn button, .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn a{width: 30px; height: 30px; border-radius: 5px; font-size: 24px; align-items: initial;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.titBox .btn button img{width: 12px; height: 12px;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan{display: none; position: fixed; z-index: 9; background-color: rgba(0,0,0,0.8); width: 100%; height: 100%; left: 0; top: 0;}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan .imgBox{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
  .bookArea .tabPanels .conBox .subBook> ol> li> div.mobImgExpan a.closeBtn{position: absolute; right: 20px; top: 20px; width: 50px; height: 50px; background: url(/bookFinder/images/alpasq/closeBtn.png)no-repeat center;}
  .bookArea .tabPanels .moreBtn{font-size: 13px; width: 180px; padding: 7px 15px;}



 }