@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-Light.otf') format('opentype');
    font-weight: 300;
}

@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-Regular.otf') format('opentype');
    font-weight: 400;
}

@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-Medium.otf') format('opentype');
    font-weight: 500;
}


@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-SemiBold.otf') format('opentype');
    font-weight: 600;
}
@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-Bold.otf') format('opentype');
    font-weight: 700;
}


@font-face {
    font-family: 'PretendardGOV';
    src: url('/font/uce/PretendardGOV-Black.otf') format('opentype');
    font-weight: 900;
}


/*공통*/
html, body {scroll-behavior: smooth; font-family: 'PretendardGOV', sans-serif, '맑은고딕', '돋움' ,arial; font-size: 16px; color: #222; overflow-x: hidden;}
body.noScroll{overflow: hidden;}
.wid_wrap, .content {width: 1280px; margin: 0 auto;}
.content > div {margin-bottom: 80px;}
.hidden {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}

.red{color: #db0000;}
.blue{color: #004eb4;}
.green{color: #10831c;}
.dark {color: #222 !important;}
.left {text-align: left !important;}
.wrap_text { white-space: normal; overflow-wrap: anywhere; word-break: break-word;}
.sort_btn {display: flex;}
.sort_icon {display: inline-block; width: 10px; height: 14px; margin-left: 4px; background: url(/images/uce/common/icon_sort.svg) no-repeat center / contain;}

.borderNo {border: none !important; padding-top: 0 !important;}

/* 스크린리더 전용 숨김(표준 패턴) */
.sr-only {position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);  white-space: nowrap; border: 0;}


/*본문이동*/
.skipNav{position:relative;z-index:9999;}
.skipNav a{position: absolute; top: -200px; left:0; width: 160px; line-height: 30px; border: 1px solid #dedede; background-color: #333;}
.skipNav a:focus, .skipNav a:active{top: 0; color: #FFF; text-align: center}


/*헤더*/
.head_top {background-color: #F6F7F9; font-size: 14px; position: relative; z-index: 9999;}
.head_top > div { display: flex; justify-content: space-between;}
.head_top a {display: block; padding: 14px 0;}
.head_top img {display: inline-block; margin-right: 4px;}
.head_top ul li {display: inline-block;}
.head_top ul li a {padding: 14px 8px;}
.head_top .kakao_direct {background-color: #FFEB3B; color: #3E2723;}
.searchToggle{display: none;}

.logo_search {margin: 40px auto 20px; display: flex; align-items: center; justify-content: space-between;}
.search-bar {border: 1px solid #D5D5D5; border-radius: 50px; padding: 4px 26px;}
.search-bar input, .search-bar select {border: none; font-size: 16px;}
.search-bar .select {padding-right: 20px; background: url(/images/uce/common/arrow_xs.svg)no-repeat 100% 50%;}
.search-bar input {width: 454px; margin-left: 24px; padding: 6px;}
.search-bar .button {padding: 14px 0;}

.head_wrap .nav ul {display: flex; margin: 10px 0 20px;}
.head_wrap .nav ul a {display: block; font-size: 20px; padding: 8px 24px; margin-right: 10px;}
.head_wrap .nav ul li:first-child a{padding-left:0;}

.burger { display: none; }

header{position: fixed; top: 0; left: 0; right: 0; z-index: 9998; background: #fff; }
:root { --pcHeadH: 240px; } 
.content{padding-top: var(--pcHeadH);}
header.is-scrolled{box-shadow: 0 6px 16px rgba(0,0,0,.05);}

.nav a.on {font-weight: 700; position: relative;}
.nav a.on::after {content: ''; display: block; width: 6px; height: 6px; border-radius: 10px; background: #0095B8; position: absolute; top: 8px; right: 14px;}


.top_r_Banner{display:flex; justify-content:space-between; align-items: flex-end; background: url("/images/uce/common/top_r_banner.svg") no-repeat left 30px center; background-size:232px; padding: 18px 24px; text-decoration:none; position:relative;}
.top_r_Banner .bannerText{margin-left:100px;}
.top_r_Banner .bannerText .small{display:block; font-size:15px; margin-bottom:6px;}
.top_r_Banner .bannerText strong{font-size:16px; font-weight:700; letter-spacing: -0.1rem;}
.top_r_Banner .text{display:inline-flex; align-items:center;}
.top_r_Banner .arrow{position: relative; width:14px; height:18px; display:inline-block; animation: arrowMove 1.2s infinite;}
.top_r_Banner .arrow::before, .top_r_Banner .arrow::after{content:""; position:absolute; right:0; width:8px; height:2px; background:#8fa3b7; border-radius:2px;}
.top_r_Banner .arrow::before{top:6px; transform:rotate(45deg);}
.top_r_Banner .arrow::after{bottom:6px; transform:rotate(-45deg);}



/*도서관 헤더*/
.header2 {border-bottom: 1px solid #e7c8e6;}
header.header2 .top_BannerVer2 {display: none;}
.head_wrap2 h1 {color: #9e3f99; font-size: 18px; line-height: 1.6rem; width: 208px;}
.head_wrap2 h1 span {display: block; font-weight: 700; font-size: 24px;}
.head_wrap2 .top_r_Banner {background-image: url("/images/uce/common/top_r_banner2.svg"); padding: 18px 30px}
.head_wrap2 .top_r_Banner .arrow::before, .head_wrap2 .top_r_Banner .arrow::after{content:""; position:absolute; right:0; width:8px; height:2px; background:#b78fb5; border-radius:2px;}
.head_wrap2 .top_r_Banner .bannerText {margin-left: 90px;}

.head_wrap2 .logo_search {align-items: flex-start;}
.popular_search {margin-top: 10px; font-size: 16px; color: #555; padding: 0 20px; display: grid; grid-template-columns: 114px 4fr; align-items: center; }
.popular_search .tit {margin-right: 8px; color: #9e3f99; font-weight: 700;   display: flex; align-items: center; line-height: 24px;}
.popular_search ul {display: inline-flex; gap: 10px;}
.popular_search li {list-style: none;}
.popular_search button {background: none; border: 0; padding: 0; font-size: 16px; color: #333; cursor: pointer; max-width: 100px; overflow: hidden;text-overflow: ellipsis; white-space: nowrap; display: inline-block; line-height: 24px;}
.popular_search button:hover {text-decoration: underline;}
.popular_search .ctrl_btn {display: none;}

.popular_search img {width: 20px; display: inline-block; margin-right: 4px;}

@keyframes arrowMove{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(6px); }
    100%{ transform:translateX(0); }
}


/*푸터*/
footer {background: #F6F7F9;}
.footer_top {display: flex; justify-content: space-between; padding: 14px 0;}
.footer_top ul {display: flex; gap: 20px;}
.footer_top ul a {display: inline-block; padding: 4px 12px;}
footer .copyR {background: #fff; padding: 24px 0; display: flex;}
footer .copyR p {font-size: 14px; line-height: 1.5rem; font-weight: 300;}
.copyR .wid_wrap {display: flex; justify-content: space-between;}

.family-site {display: flex; gap: 4px;}
.family-site_select{appearance:none; -webkit-appearance:none; -moz-appearance:none; padding:6px 32px; background:url("/images/uce/common/family_arrow.svg") no-repeat 80%; border: 1px 
solid #CCCCCC; border-radius: 4px;}
.family-site_go {border: 1px solid #ccc; border-radius: 4px; padding: 6px 16px; font-size: 14px; line-height: 20px;}


/*탭 스타일1*/
.pop_wrap .tabs .tablist .is-active {color: #0095B8; font-weight: 700; }
.pop_wrap .tabs .tablist .is-active img {width: 19px; display: inline-block;}
.pop_wrap .tablist .tab {font-size: 16px; color: #999;}

/*탭 스타일2*/
.btn_st1 a, .btn_st1 {display: flex; gap: 8px; flex-wrap: wrap;  color: #333;}
.btn_st1 a, .btn_st1 button {background: #F6F7F9; font-size: 16px; border-radius: 6px; padding: 8px 24px;}
.btn_st1 button:active , .btn_st1 button:focus, .btn_st1 button:hover, .btn_st1 button[aria-selected="true"] {box-shadow: inset 0 0 0 1px #81E8FF; background-color: #F3FDFF; color: #0095B8;}


/*링크 스타일*/
.btn_st1 a {display: inline-block; text-align: center; line-height: 1.3rem; padding: 16px 24px;}
.btn_st1 a span {display: block;}
.btn_st1 a:active, .btn_st1 a:focus, .btn_st1 a:hover {box-shadow: inset 0 0 0 1px #81E8FF, 0 3px 10px rgba(0,149,184,.1); color: #0095B8; content: ""; background:#F3FDFF ;}
.btn_st1 a:active p, .btn_st1 a:focus p, .btn_st1 a:hover p {background: url(/images/uce/common/arrow_go.svg)no-repeat 100% 40%; padding-right: 14px;}

/* 선택된 탭 텍스트 */
.pop_wrap .checkTab .tab[aria-selected="true"] {color: #0095B8; font-weight: 700; position: relative; padding-left: 22px;}
.pop_wrap .checkTab .tab[aria-selected="true"]::before {content: ""; display: inline-block; position: absolute; left: 0; top: 51%; width: 18px; height: 18px; transform: translateY(-50%); background-image: url("/images/uce/common/icon_check.svg");}

/*버튼 스타일*/
.button {padding: 16px 28px; font-size: 16px; border-radius: 50px; align-items: center;}
.btn_ghost_st1 {border: 1px solid #2DB5D4; color: #0095B8;}
.btn_cta_st1 {background: #0095B8; color: #fff; font-weight: 500; display: block; text-align: center;}
.grande {width: 180px;}
.long {width: 600px !important;}
.button.disable {background: #D3D3D3;}
.btn_sq_line {border:1px solid #ccc; border-radius: 6px;}

table select {background: url(/images/uce/common/family_arrow.svg)no-repeat 90%;}
/*페이징*/

.pagination{display:flex; justify-content:center; align-items:center; gap:10px; margin:24px 0;}
.pg_list{display:flex; gap:6px; list-style:none; padding:0; margin:0;}
.pg_ellipsis{ display:none; }
.pg_mid{ display:list-item; }

.pg_btn, .pg_num{height:40px; min-width:40px; padding:0 12px; border-radius:999px; border:1px solid rgba(0,0,0,.12); background:#fff; color:#111; cursor:pointer; line-height:38px; font-size:14px; transition:transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;}
.pg_num{ min-width:40px; padding:0; }
.pg_btn:hover:not(:disabled), .pg_num:hover{box-shadow:0 6px 16px rgba(0,0,0,.10), inset 0 0 0 1px #0095B8; border-color: transparent; transform: translateY(-1px);}
.pg_btn:active:not(:disabled), .pg_num:active{transform: translateY(0); box-shadow:0 3px 10px rgba(0,0,0,.10), inset 0 0 0 1px #0095B8;}
.pg_num[aria-current="page"]{background:#54595b; color:#fff; box-shadow: 0 4px 10px rgba(124, 124, 124, 0.125); font-weight:700;}
.pg_btn:focus-visible, .pg_num:focus-visible{outline:3px solid rgba(0,149,184,.35); outline-offset:2px;}
.pg_btn:disabled{opacity:.45; cursor:not-allowed; box-shadow:none;}



/*컨텐츠*/

/*책 공통*/
.book_set{position:relative;}

.book_set .book_title p {line-height: 1.4rem; display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 2; overflow: hidden; color: #333; height: 44px;}
.book_set .book_title a:hover {text-decoration: underline;}
.book_set .book_cover {display: block; border: 1px solid #EFEFEF;     align-content: center; max-width: 200px; height:290px; margin-bottom: 10px; overflow: hidden; }
.book_set .book_cover img {width: 100%; overflow: hidden;}
.name_wrap {color:#555555; font-weight: 400; margin-top: 4px; display: inline-block; width: 100%; max-width: 200px;}
.name_wrap i {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: 46%;}

.book_set_wrap .book_list {display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 16px; margin-top: 14px}
.book_set_wrap .book_list .book_set {margin-bottom: 32px;}
.book_set_wrap .book_empty_wrap {display: block; padding: 40px 0;}

.book_chk{position:absolute; top:8px; left:8px; z-index:3; width: 24px;
height: 24px; opacity: 0.8;}
.book_chk_label{position:absolute; top:6px; left:6px; width:24px; height:24px; cursor:pointer; z-index:4;}
.book_cover{display:block;}

.recomend.book_set_wrap button span {display: block;}
.recomend.book_set_wrap button span::after {content: '권';}

.search_list .book_cover img {max-width: 100px;}
.book_list .book_empty {display: flex; flex-direction: column; align-items: center;}
.book_list .book_empty img {margin: 20px 0 10px; display: inline-block; width: 80px;}

/*태그클라우드*/
.tag-cloud{position: relative; width: 100%; max-width: 1280px; height: 340px;margin-top: 10px; border-radius: 14px; background: #fff; overflow: hidden; padding: 10px;}
.tag-cloud .tag{position: absolute; text-decoration: none; font-weight: 800; line-height: 1; white-space: nowrap; user-select: none;}
.tag-cloud .tag:hover {transform: scale(1.08);}
.tag_txt {border: 1px solid #d9d9d9; border-radius: 6px; display: flex;}
.tag_txt a {display: block; padding: 14px 12px; border-right: 1px solid #d9d9d9; font-size: 14px; color: #8F8F8F;}
.tag_txt a:last-child {border-right: none;}
.tag_txt a::before {content: "#";}
.tag_txt a:hover, .tag_txt a:active, .tag_txt a:focus {font-weight: 600;}


/*알림팝업*/
.modal[hidden] { display: none !important; }
.modal {position: fixed; inset: 0; z-index: 9999;}
.modal_dim {position: absolute; inset: 0; background: rgba(0,0,0,.1);}
.modal_panel {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 360px; background: #fff; border-radius: 12px; box-sizing: border-box; box-shadow: 20px 20px 40px rgba(124, 124, 124, 0.18);}
.modal_message {text-align: center; line-height: 1.6; margin: 34px;}
.modal_actions {display: grid; grid-template-columns: 1fr 1fr;}

.modal_actions button:only-child {grid-column: 1 / -1;}
.modal_actions button {padding: 20px;   font-size: 16px;}
.modal_actions .btn_confirm {background: #0095B8; color: #fff; }
.modal_actions .btn_cancel {background-color: #fff; border-top: 1px solid #ccc;}



/*테블릿 가로*/
@media all and (max-width:1480px) {
    .wid_wrap, .content {width: 1000px; margin: 0 auto;}
    .head_wrap .nav ul a {font-size: 16px;}
    .pop_wrap .name_wrap {width: 100%;}
    .book_list .name_wrap {width: 142px;}/*0327 width 수정*/
    .book_set .book_cover {height: 220px;} /*0327 width 추가*/
    .book_set .book_title p {height: 46px; width: 142px;} /*0327 width 추가*/
    .pop_wrap .book_set .book_title p {width: 100%;} /*0401 width 추가*/
    .pop_wrap .book_list .name_wrap {width: 100%;} /*0401 width 추가*/
    .name_wrap i {max-width: 45%;}
    .head_top img {margin-right: 0;}
    .search-bar input {width: 310px;}

    :root { --pcHeadH: 240px; --pcHeadH2: 240px;  } 
    .content2{padding-top: var(--pcHeadH2);}
    .popular_search button {max-width: 68px;}
    
}

/*테블릿 세로*/
@media all and (max-width:1080px) {
  .wid_wrap, .content {width: calc(100% - 40px);}
  .mb_hide {display: none !important;}
  :root { --pcHeadH: 140px;  } 
  .logo_search {display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto; row-gap: 0; column-gap: 8px; align-items: center; margin-top: 14px; position: relative; z-index: 2;  }
  .logo_search h1 {grid-column: 1 / 2; grid-row: 1 / 2;}
  .logo_search .searchToggle {grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end;}
  .logo_search .burger {grid-column: 3 / 4; grid-row: 1 / 2; justify-self: end;}
  .logo_search .search-bar {display: none;}
  .logo_search .search-bar2 {display: block;}
  .header2 .logo_search .search-bar2 input{margin-left: 0; width: calc(100% - 106px);}
  .searchToggle{display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; position: relative; z-index: 3;  }
  .burger {display: inline-flex;}
  .burger {width: 44px; height: 44px; border: 0; background: transparent; align-items: center; justify-content: center; gap: 6px; flex-direction: column; cursor: pointer; position: relative; z-index: 3;}

  .burger__bar {width: 22px; height: 2px; background: #111; display: block;}
  .burger__bar:nth-child(2) {width: 16px; margin-right: 6px;}

  #pcNav {display: none;}

  .mMenu {position: fixed; inset: 0; z-index: 9999;}
  .mMenu__dim {position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45);}
  .mMenu__panel {position: absolute; top: 0; right: 0; width: min(320px, 86vw); height: 100%; background: #fff; padding: 16px; box-shadow: -20px 0 40px rgba(0, 0, 0, 0.18); transform: translateX(0);  }
  .mMenu__head {display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08);}
  .mMenu__title {font-size: 16px;}
  .mMenu__close {width: 40px; height: 40px; border: 0; background: transparent; cursor: pointer; font-size: 18px;}
  .mMenu__nav ul {list-style: none; padding: 10px 0; border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 10px;}
  .mMenu__nav a {display: flex; flex-direction: column; padding: 12px 0; text-decoration: none; color: #222; gap: 10px; position: relative; align-items: center;  }
  .mMenu__nav a:focus {outline: 2px solid #0095B8; outline-offset: 2px;}
  .mMenu__nav a.on::before {content: ''; display: block; width: 8px; height: 8px; border-radius: 10px; background: #0095B8; position: absolute; top: 8px; right: 14px;}
  .mMenu__nav img {width: 16px;}
  .kakao_direct img {width: 15px;}
  .caution {width: 70%;}
  .caution a {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .top_r_Banner {width: 210px; padding: 18px 24px 18px 0; background-position: 0px;}
  .top_r_Banner .bannerText {margin-left: 94px;}
  .long {width: 100% !important;}
  header {overflow: visible;}
  body.isMobileSearchOpen header {z-index: 10000;}
  body.isMobileSearchOpen .head_wrap {position: relative;}
  body.isMobileSearchOpen .logo_search .search-bar {display: flex; align-items: center; position: absolute; top: 0; left: 0; right: 0; width: calc(100% - 50px); margin: 0; padding: 5px 24px; border: 1px solid #D5D5D5; border-radius: 50px; background: #fff; z-index: 99999;  }
  body.isMobileSearchOpen .logo_search h1 {visibility: hidden;}
  body.isMobileSearchOpen .search-bar input {width: calc(100% - 90px); min-width: 0; margin-left: 0;}
  body.isMobileSearchOpen .logo_search h1, body.isMobileSearchOpen .logo_search .searchToggle, body.isMobileSearchOpen .logo_search .burger {position: relative;  z-index: 3;}
  body.isMobileSearchOpen {overflow: visible;}
  .book_set_wrap .book_list {grid-template-columns: repeat(4, 1fr);}
  .book_set .book_title p {height: 44px;}

  /* footer */
  .copyR .wid_wrap {display: block}
  .family-site {margin-top: 20px;}

  /* 도서관 검색 */
  .top_r_Banner2 {position: absolute; top: 0; right: 0;}
  .header2 .logo_search {display: block;}
  .header2 .logo_search h1 {padding-top: 10px;}
  .header2 .search-bar {margin-top: 32px;}
  .head_wrap2 .top_r_Banner .bannerText {margin-left: 56px;}
  .popular_search button {max-width: 110px;}
  :root {--pcHeadH2: 300px;}
}

@media all and (max-width:768px) {

  .mb2_hide {display: none !important;}
  .caution {width: 55%;}
  .book_set_wrap .book_list {grid-template-columns: repeat(3, 1fr)}
  .name_wrap, .book_list .name_wrap {width: 129px;}
  .name_wrap i {width: 44%;}
  .pop_wrap .name_wrap i {width: initial;}

  .pg_mid{ display:none; }      /* 2~9 숨김 */
  .pg_ellipsis{display:flex; align-items:center; justify-content:center; height:40px; min-width:24px; color:#8f8f8f; user-select:none;}

  .grande {width: 100%;}

  .footer_top {display: block;}
  .footer_top ul {margin-top: 24px;}
  .footer_top ul a:first-child {padding-left: 0;}


    /*도서관 검색*/
   .popular_search.is_roll {grid-template-columns: 100px 1fr 50px; gap: 8px; align-items: center;}
  .popular_search.is_roll .tit {margin-right: 0;}
  .popular_search.is_roll .popular_search_roll {position: relative; overflow: hidden; height: 24px; min-width: 0;}
  .popular_search.is_roll .popular_search_roll ul {display: block; margin: 0; padding: 0; transform: translateY(0);}
  .popular_search.is_roll .popular_search_roll li {list-style: none; display: flex; align-items: center; height: 24px;}
  .popular_search.is_roll .popular_search_roll button {display: block; width: 100%; max-width: none; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .popular_search .popular_search_controls {display: none;}
  .popular_search.is_roll .popular_search_controls {display: flex; gap: 2px;}
  .popular_search.is_roll .popular_search_controls .down {width: 40px; height: 24px; background: #f1f1f1; color: #696969; font-size: 8px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 5px; border-radius: 4px;}
  .popular_search.is_roll .popular_search_controls .ctrl_btn:disabled {opacity: 0.5;}
  .popular_search_controls .ctrl_btn svg {width: 15px; height: auto; display: block;}
  header.header2 .top_BannerVer2 {display: block;}
  header.header2 .top_r_Banner2, header.header2 ul li:nth-child(2), header.header2 ul li:nth-child(3) {display: none;}
  .head_wrap2 h1 {width: initial; font-size: 20px; text-align: center;}
  .head_wrap2 h1 span {display: inline-block; margin-left: 6px;  font-size: 20px;}
  .header2 .search-bar {margin-top: 10px;}

  :root {--pcHeadH2: 250px;  }
  .popular_search .popular_search_controls .up {display: none;}
    
}

@media all and (max-width:460px) {
  .book_set_wrap .book_list {grid-template-columns: repeat(2, 1fr)}
  .book_title a {max-width: 200px; display: inline-block;}

  .tag-cloud {height: 500px;}

  .button {padding: 16px 12px;}
  .caution {width: 40%;}


}