@font-face {
    font-family: 'Pretendard';
    src: url("/bookFinder/font/alpasq/Pretendard-Bold.woff") format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'Pretendard';
    src: url("/bookFinder/font/alpasq/Pretendard-Regular.woff") format('woff');
    font-weight: 500;
}
@font-face {
    font-family: 'Pretendard';
    src: url("/bookFinder/font/alpasq/Pretendard-Light.woff") format('woff');
    font-weight: 300;
}

html, body {font-family: 'Pretendard', sans-serif, '맑은고딕', '돋움' ,arial; font-size: 17px; color: #333; line-height: 1.618em !important; position: relative; width: 100%; height: 100%;}

/*공통*/
.maxBox, .maxxBox{width: 1200px; margin: 0 auto;}
.show{display: block !important;}
.hide{display: none !important;}
.bold{font-weight: 700 !important;}
.red{color: #d05158 !important;}
.blue{color: #046BA6 !important;}
.green{color: #3D9924 !important;}
.orange{color: #ED7322 !important;}
.navy{color: #32446D !important;}
.black{color: #000 !important;}
.gray{color: #999 !important;}
.fontS{font-size: 13px;}
.textCenter{text-align: center; margin-top: 20px;}
.textLeft{text-align: left; margin-top: 20px;}
.mgt10{margin-top: 10px;}
.mgt20{margin-top: 20px;}
.centerBox{width: 100%; text-align: center; margin-top: 40px;}
.copyright{font-size: 15px; color: #555555; text-align: center; padding: 30px 0;}
.text-element {word-break: break-all; overflow-wrap: break-word; white-space: normal;}
h3 .arrow-icon {transition: transform 0.3s ease;}
h3 .arrow-icon.rotate {transform: rotate(180deg);}
.empty {text-align: center;}
.empty img {display: block; width: 80px; margin: 20px auto;}
.empty p {font-size: 18px; font-weight: bold; color: #003161;}
.select-readonly {background-color: #f0f0f0 !important; color: #555; border: 1px solid #ccc; border-radius: 4px; pointer-events: none;}
.highlight {color: #046BA6; background-color: #E6F1FB;} 

/*스킵네비*/
#skipNav{position:absolute; float:left; top:0px; left:0px; width:200px; font-size:14px; font-weight:700; padding-left:10px; height:20px; z-index:9999;}
#skipNav a{position:absolute; display:block; height:0; overflow:hidden;}
#skipNav a:hover, #skipNav a:focus, #skipNav a:active{height:auto; background:#333; color:#f9f9f9; padding:10px; }

/*헤더*/
header{box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.05); position: relative; z-index: 1;}
header .maxBox{display: grid; grid-template-columns: 1fr 3fr 1fr;}
header .maxBox a.logo{font-size: 32px; font-weight: bold; display: flex; align-items: center;}
header .maxBox a.logo span.small {font-size: 26px;}
header .maxBox .navArea{display: grid; grid-template-columns: repeat(6, 1fr); justify-content: center;}
header .maxBox .navArea> li> a{font-size: 22px; display: flex; justify-content: center; padding: 25px 0; box-sizing: border-box; border-bottom: 3px solid transparent;}
header .maxBox .navArea> li.active> a, header .maxBox .navArea> li:hover> a{border-bottom-color: #0056AA; color: #0056AA; font-weight: bold;}
header .maxBox .utilArea{display: flex; gap: 8px; justify-content: right; align-items: center;}
header .maxBox .utilArea> li a{border: 1px solid #7CACDA; padding: 5px 10px; box-sizing: border-box; border-radius: 10px; font-size: 15px; color: #0056AA; display: block;}
header .maxBox .utilArea> li:nth-child(2) a{background: #E6F1FB; border:1px solid #E6F1FB;}
header .maxBox .utilArea> li.mAllManu a{background: #0056AA; color: #fff; font-weight: bold; display: none; border: 1px solid #0056AA;}

/*모바일 전체메뉴*/
.mAllManuBox{background: rgba(0,0,0,0.6); position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: none; z-index: 99; display: none;}
.mAllManuBox .area{background: #fff; width: 340px; height: 500px; margin: 150px auto; border-radius: 20px; padding: 40px; box-sizing: border-box; position: relative; z-index: 99;}
.mAllManuBox .area .tit{border-bottom: 1px dashed #ddd; padding: 0 0 10px 0; box-sizing: border-box;}
.mAllManuBox .area .tit p{font-size: 20px; color: #000; font-weight: bold;}
.mAllManuBox .area .closeBtn{position: absolute; right: 40px; top: 35px; border: 1px solid #ddd; padding: 5px; box-sizing: border-box; width: 30px; height: 30px; background: #f9f9f9;}
.mAllManuBox .area .closeBtn img{width: 100%;}
.mAllManuBox .area ul> li{background: url(/bookFinder/images/alpasq/square.png)no-repeat left 10px center; background-size: 13px;}
.mAllManuBox .area ul> li> a{padding: 12px 10px 12px 30px; box-sizing: border-box; border-bottom: 1px dashed #eee; display: block; font-size: 15px; background: url(/bookFinder/images/alpasq/direct.png)no-repeat right 10px center;}
.mAllManuBox .area ul> li:hover{background-color: #E6F1FB !important;}
.mAllManuBox .area .utilBtn{display: grid; grid-template-columns: 1fr 1fr; margin-top: 10px;}
.mAllManuBox .area .utilBtn a{font-size: 15px; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; padding: 5px; box-sizing: border-box; background: #f9f9f9;}
.mAllManuBox .area .utilBtn a:first-child{border-right: none;}

/*검색영역*/
.searchArea{padding: 50px 0; text-align: center; box-sizing: border-box; position: relative;}
.searchArea h2{font-size: 54px; text-align: center; line-height: normal; font-weight: bold;}
.searchArea .searchBox{display: inline-flex; position: relative;}
.searchArea .searchBox .box{border: 4px solid #0056AA; font-size: 20px; background: #fff;}
.searchArea .searchBox .box select, .searchArea .searchBox .box input{font-size: 20px; border: none; padding: 22px 15px; box-sizing: border-box; margin: 0 auto; width: 467px;}
.searchArea .searchBox .box select{width: 200px; padding: 20px 15px 20px 25px;}
.searchArea .searchBox .box button{margin: 0 20px;}
.searchArea .searchBox> a{color: #fff; width: 166px; display: flex; justify-content: center; align-items: center; font-size: 20px;}
.searchArea .searchBox> a.btn01{background: #0056AA;}
.searchArea .searchBox> a.btn02{background: #003161;}
.searchArea .autoComplete{position: absolute; right: 50%; top: 126px; width: 899px; background: #fff; box-sizing: border-box; z-index: 1; box-sizing: border-box; margin-right: -449px; border: 1px solid #ddd; display: none;}
.searchArea .autoComplete> div{overflow-y: auto; max-height: 260px; margin-bottom: 50px;}
.searchArea .autoComplete> div> ul{padding: 10px 20px; box-sizing: border-box;}
.searchArea .autoComplete> div> ul> li{background: #fff; border-bottom: 1px dashed #ddd; text-align: left; padding: 10px; box-sizing: border-box;}
.searchArea .autoComplete> div> ul> li> a{white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 820px; display: block;}
.searchArea .autoComplete> div> ul> li:hover{background: #f9f9f9;}
.searchArea .autoComplete> div> ul> li:last-child{border-bottom: 0;}
.searchArea .autoComplete button{background: #555; color: #fff; padding: 5px 10px; box-sizing: border-box; border-radius: 5px; position: absolute; right: 20px; bottom: 20px;}

/*다국어영역*/
.contents .worldwordBoxLayer {display: none; position: absolute !important; top: 76px; right: 50%; width: 900px; z-index: 9; background:#fff !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); height: initial !important; padding: 25px; border: 1px solid #ccc; margin-right: -450px; box-sizing: border-box;}
.worldwordBoxLayer .popup-content {top: 10%; width: 880px; margin-left:-450px}
.worldwordBoxLayer p {font-weight: bold; font-size:22px; margin-bottom: 14px; padding-bottom: 15px; border-bottom: 1px dashed #ddd;}
.worldwordBoxLayer .tab-content { display: none; }
.worldwordBoxLayer .tab-content.active { display: block; }
.worldwordBoxLayer .wwb_tabs{display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px;}
.worldwordBoxLayer .wwb_tabs button.active {border: 1px solid #0074e5; background: #E6F1FB;} 
.worldwordBoxLayer .wwb_tabs button{padding: 10px; cursor: pointer; border: 1px solid #ddd; border-radius: 10px; margin: 0 !important; font-size: 17px;}

.worldwordBoxLayer .languageContents {margin-top: 12px; background: #f9f9f9; border-radius: 4px; padding: 12px; text-align: center;}
.worldwordBoxLayer .languageContents li {display: inline-flex; border: 1px solid #ddd; box-sizing: border-box; width: 32px; height: 32px; align-items: center; justify-content: center; margin-bottom: 5px; background: #fff;}
.worldwordBoxLayer .languageContents a {cursor: pointer; width: 32px; height: 32px; text-align: center; line-height: 32px; font-size: 15px;}
.worldwordBoxLayer .languageContents a:hover {color:#0074e5;  border-radius:2px; border: 1px solid #0074e5; background: #E6F1FB;}
.worldwordBoxLayer .close-btn{cursor: pointer; float: right; width: 30px; height: 30px; background: #f9f9f9; border: 1px solid #ddd; padding: 5px; box-sizing: border-box;}
.worldwordBoxLayer .close-btn img{width: 20px; height: 20px; display: flex; justify-content: center; align-items: center;}
.wwbno {margin-right: 20px; margin-left: 20px;}

.spbtn {background-color: #0056AA; color: #fff; display: block; justify-self: end; padding: 0 16px 0 8px; border-radius: 10px; margin-bottom: 12px; margin-right: 0;}
.wkb2 {max-width: 880px;}

/*인기검색어영역*/
.searchArea .pSearchBox{display: grid; width: 900px; grid-template-columns: 1fr 4fr 1fr; gap: 10px; margin: 10px auto 0 auto;}
.searchArea .pSearchBox p{background: #0056AA; color: #fff; padding: 8px 15px; border-radius: 50px; box-sizing: border-box;}
.searchArea .pSearchBox .slider-container{height: 43px; overflow: hidden; display: flex; align-items: start;}
.searchArea .pSearchBox .slider{display: flex; flex-direction: column;}
.searchArea .pSearchBox .slide{height: 43px; font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 43px; text-align: left; width: 530px; flex: 0 0 auto;}
.searchArea .pSearchBox .slide span{border: 1px solid #0056AA; color: #0056AA; border-radius: 50px; width: 28px; height: 28px;  margin-right: 5px; display: inline-flex; justify-content: center; align-items: center;}
.searchArea .pSearchBox button {border: 1px solid #ddd; background: #fff; border-radius: 50px; color: #777; width: 43px; height: 43px; font-size: 20px;}
.searchArea .pSearchBox .controls{display: flex; gap: 7px; justify-content: right; align-items: center;}


/*팝업*/
.basicpop img {width: 50px !important; margin-bottom: 12px;}
.basicpop .popup-content {width: 540px;}

/*로딩바*/
#initialOverlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: flex; justify-content: center; align-items: center; visibility: hidden;}

.loading-container {text-align: center;}
.loading-text {font-size: 14px; color: #006ac1; margin-bottom: 8px;}
.loading-bar {width: 100px; height: 6px; background: #e0eefa; overflow: hidden; border-radius: 3px; margin: 0 auto;}
.loading-bar .bar {height: 100%; width: 0%; background: linear-gradient(to right, #4d9ee1, #006ac1); animation: loadingAnim 2s infinite;  border-radius: 3px;}

/* 팝업 공통 */
.popup-content .close-btn {cursor: pointer;}
.popup-content {background: #fff; top: 50%; position: absolute; left: 50%; transform: translate(-50%, -50%); z-index: 999; padding: 30px; text-align: center; box-sizing: border-box; min-width: 400px;}
.popup-content a.close-btn {text-align: right; display: block; background: #f9f9f9; padding: 8px 20px; text-align: center; margin-top: 12px; font-size: 15px; border: 1px solid #ddd;}
.popup-content img{width: 100%;}
.popup-content .tableType01 a img, .popup-content .tableType02 a img {width: 20px;}
.popup-content p {font-size: 21px; font-weight: bold; margin-bottom: 12px;}
.popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; z-index: 9999; }
.popup-content .btn_area {display: grid; grid-template-columns: 1fr 1fr; margin-top: 12px; gap: 8px;}
.popup-content .btn_area a.btn {background: #0056AA; padding: 8px 20px; color: #fff; margin-top: 12px; font-size: 15px;}
.popup-content .btn_area a.btn_gray {background: #808080; padding: 8px 20px;}

/* 로그아웃 타이머 */
.logout-item .timerBtn { min-width: 130px; padding: 5px 12px !important; text-align: center; display: flex !important; justify-content: center; align-items: center; }
.logout-item .timer { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; min-width: 55px; margin-right: -2px; }
.logout-item { position: relative !important; overflow: visible !important; }
.logout-hover-notice { position: absolute; top: 40px; right: 0; background: rgba(0, 0, 0, 0.9) !important; color: #fff !important; padding: 5px 12px; border-radius: 4px; font-size: 12px; white-space: nowrap; z-index: 999999; pointer-events: none; }
.logout-item:hover .logout-hover-notice { display: block !important; }

@keyframes loadingAnim {
  0% {
    width: 0%;
    margin-left: 0%;
  }
  50% {
    width: 80%;
    margin-left: 10%;
  }
  100% {
    width: 0%;
    margin-left: 100%;
  }
}

.datebtn-submit {border: 1px solid #ddd; display: inline-block; padding: 13px 18px; box-sizing: border-box; font-size: 13px; border-radius: 7px; background: #f9f9f9;}

/*****테블릿가로*****/
@media all and (max-width:1530px) {  

    /*공통*/
    .maxBox, .maxxBox{width: calc(100% - 200px); margin: 0 auto;}

    /*검색영역*/
    .searchArea .searchBox .box input{width: 560px;}
    .searchArea .autoComplete{width: 990px; margin-right: -495px;}
    .searchArea .autoComplete> div> ul> li> a{width: 920px;}

    /*모바일 전체메뉴*/
    .mAllManuBox{display: none;}

    /*인기검색어영역*/
    .searchArea .pSearchBox{width: 990px;}

    /*다국어영역*/
    .worldwordBoxLayer {width: 988px; margin-right: -494px;}
}


/*****테블릿세로*****/
 @media all and (max-width:1220px) { 

    /*공통*/
    .maxBox, .maxxBox{width: calc(100% - 100px); margin: 0 auto;}

    /*헤더*/
    header{padding: 20px 0; box-sizing: border-box;}
    header .maxBox{grid-template-columns: 1fr 1fr;}
    header .maxBox .navArea{display: none;}
    header .maxBox .utilArea> li a{font-size: 15px; padding: 5px 10px; border-radius: 10px; display: none;}
    header .maxBox .utilArea> li:nth-child(3) a{display: block;}

    /*검색영역*/
    .searchArea h2{font-size: 40px;}
    .searchArea .searchBox .box select{padding: 20px 10px 20px 15px; width: 170px !important;}
    .searchArea .searchBox .box select, .searchArea .searchBox .box input{font-size: 17px; width: 380px;}
    .searchArea .searchBox> a{font-size: 17px; width: 100px;}
    .searchArea .searchBox .box button{display: none;}
    .wwbno{display: none;}
    .searchArea .autoComplete{width: 588px; margin-right: -294px; top: 122px;}
    .searchArea .autoComplete> div> ul> li> a{width: 520px;}

    /*인기검색어영역*/
    .searchArea .pSearchBox{width: 590px; grid-template-columns: 1fr 2fr 1fr}
    .searchArea .pSearchBox .slide{width: 250px;}

    /*다국어영역*/    
    .worldwordBoxLayer {display: none !important;}

    /*페이지네이션*/
    .pagin{padding-top:50px; position:relative;}
    .pagin a.pageN{position:absolute; top:0; left:50%; transform: translateX(-36px); display:block; margin:0;}
    .pagin a.pageN.prev{margin-left:-40px;}
    .pagin a.pageN.next{margin-left:40px;}
    .pagin > .floatClear .pageL{width:32px; line-height:32px; font-size:15px;}
    .pagin > .floatClear > span.pageL{width:18px; height:32px;}
    /*페이지네이션*/       
    
}


/*****모바일*****/
 @media all and (max-width:767px) { 

    /*공통*/
    .maxBox, .maxxBox{width: calc(100% - 50px); margin: 0 auto;}
    .copyright{font-size: 11px;}

    /*헤더*/
    header{padding: 20px 0; box-sizing: border-box;}
    header .maxBox a.logo{font-size: 20px;}
    header .maxBox{grid-template-columns: 2fr 1fr;}
    header .maxBox .navArea{display: none;}
    header .maxBox .utilArea{gap: 5px;}
    header .maxBox .utilArea> li a{font-size: 13px; padding: 0 10px; border-radius: 5px; display: none;}
    header .maxBox .utilArea> li.mAllManu a{display: block !important;}

    /*모바일 전체메뉴*/
    .mAllManuBox .area{width: calc(100% - 50px); margin: 50px auto;}

    /*검색영역*/
    .searchArea{padding: 30px 0 !important;}
    .searchArea h2{font-size: 20px;}
    .searchArea .searchBox{display: block;}
    .searchArea .searchBox .box{position: relative;}
    .searchArea .searchBox .box select{background-color: #f9f9f9 !important; border-bottom: 1px solid #ddd;}
    .searchArea .searchBox .box select, .searchArea .searchBox .box input{font-size: 15px; width: 100% !important; padding: 15px 10px !important;}
    .wwbno{display: none;}    
    .searchArea .searchBox> a{font-size: 15px; width: 100%; padding: 10px; box-sizing: border-box;}
    .searchArea .searchBox> a.btn02{border: 4px solid #003161;}
    .searchArea .searchBox .box button{display: none;}
    .searchArea .autoComplete{width: 100%; margin-right: 0; right: 0; top: 189px;}
    .searchArea .autoComplete p{font-size: 15px;}
    .searchArea .autoComplete button{font-size: 13px;}
    .searchArea .autoComplete> div> ul> li{font-size: 15px;}
    .searchArea .autoComplete> div> ul> li> a{width: 250px;}
  
    /*인기검색어영역*/
    .searchArea .pSearchBox{width: 100%; display: block; grid-template-columns: initial}
    .searchArea .pSearchBox p{width: 100%;}
    .searchArea .pSearchBox .slide{width: 170px; font-size: 15px;}
    .searchArea .pSearchBox button{width: 30px; height: 30px; font-size: 15px;}
    .searchArea .pSearchBox button img{width: 15px; height: 15px;}
    .searchArea .pSearchBox .controls{gap: 3px; margin-top: -37px;}

    /*다국어영역*/
    .worldwordBoxLayer {display: none !important;}

    /*팝업*/
    .basicpop .popup-content {width: 90%;}


}