/*소장자료검색*/
.searchArea .checkrange4 {grid-template-columns: repeat(4, 1fr);}
.searchArea .checkrange4 li.searchlibW, .searchArea .checkrange4 li.allLibaray {grid-column: span 4;}
.searchArea .checkrange4 li {line-height: 1.8rem;}
.searchArea .searchBox .searchlibW input[type="search"] {border: 0; background: #f9f9f9; width: 100%; margin: 0;}
.searchlibW > div {display: grid; grid-template-columns: 1fr 60px 100px; column-gap: 8px;}
.searchArea .searchBox button.golbalkb {padding: 0; background:#69137d;}
.searchArea .searchBox button.golbalkb img {width: 20px;}
.toggle-header {cursor: pointer; font-weight: 600; padding: 0px 8px 8px 8px;}
.library-list {display: none; margin-bottom: 12px;}
.arrow-icon {transform: rotate(-90deg); transition: transform 0.3s ease ; display: inline-block; margin-left: 4px;}
.arrow-icon.rotate {transform: rotate(90deg);}
.library-list li {display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 8px; background: #f9f9f9; padding: 14px 20px; border-radius: 8px; column-gap: 4px;}
.library-list li p:first-child {grid-column: span 4; font-weight: 600;}
.reresearch {display: flex; align-items: center; gap: 10px; font-size: 14px;}
.toggle-checkbox {display: none;}
.toggle-switch {position: relative; display: inline-block; width: 36px; height: 20px; background-color: #ccc; border-radius: 15px; cursor: pointer; transition: background-color 0.3s ease;}
.toggle-switch::after {content: ''; position: absolute; width: 14px; height: 14px; background-color: #fff; border-radius: 50%; top: 2.5px; left: 3px;  transition: transform 0.3s ease;}
.toggle-checkbox:checked + .toggle-switch {background-color: #69137d;}
.toggle-checkbox:checked + .toggle-switch::after {transform: translateX(15px);}

/*다국어*/
.worldwordBoxLayer {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #fff; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); width: 80%;  max-width: 600px; padding: 20px; z-index: 99; display: none;}
.wwb_tabs {display: grid; grid-template-columns: repeat(7, 1fr); justify-content: space-around;  margin: 12px 0 8px; padding:8px 0; row-gap: 4px; border-top: 1px solid #ddd;}
.wwb_tabs li {text-align: center !important; line-height: 1.8rem;}
.wwb_tabs li a:hover, .wwb_tabs li.active, .wwb_tabs li a:active, .wwb_tabs li a:focus {color: #69137d; display: block;  background:linear-gradient(to bottom, transparent 70%, rgba(207, 185, 218, 0.2) 30%); font-weight: 600;}
.wwb_tab-link {flex: 1; padding: 10px; text-align: center; background-color: #f8f8f8; border: none;  font-size: 14px; cursor: pointer; transition: background-color 0.3s ease;}
.wwb_tab-link[aria-selected="true"] {background-color: #69137d; color: #fff; font-weight: bold;}
.tab-content {display: none;}
.tab-content:not([hidden]) {display: block;}
.languageContents {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;}
.languageContents ul {list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 5px; justify-content:center;}
.languageContents ul li {margin: 0;}
.languageContents ul li a {display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 40px; border: 1px solid #ccc; border-radius: 5px; background-color: #f8f8f8; color: #333; text-decoration: none; font-size: 16px; transition: background-color 0.3s ease, color 0.3s ease;}
.languageContents ul li a:hover {background-color: #69137d; color: #fff; cursor: pointer;}

/*상세검색*/
.detail_toggle {background: #fff; border: 1px solid #ddd; padding:15px; border-radius: 5px; font-weight: 600;}
.toggle-button {cursor: pointer;}
.Highsearch {display: block; margin-top: 12px; color: #555}
.Highsearch:hover {font-weight: 600; color: #000;}
.searchArea .searchBox .detail_toggle button {border: 0; background: #fff; color: #333; padding: 8px 16px;}
.searchArea .searchBox .detail_toggle button.button_on, .searchArea .searchBox .detail_toggle button:hover {color: #69137d; background:linear-gradient(to bottom, transparent 70%, rgba(207, 185, 218, 0.2) 30%); font-weight: 600; border-radius: 0;}
.option_inner dl {margin-top: 12px; padding-top:12px; border-top: 1px dashed #ddd;}
.option_inner dd.collapsed {overflow: hidden; height: 2.8rem; transition: height 0.3s ease;}
.option_inner dd.show-more {height: auto;}
.option_inner input {border-radius: 4px;}
.optionplus {cursor: pointer; text-decoration: none;}
.optionplus:hover {text-decoration: underline;}

.optionplus::after {content: ' +'; font-weight: normal; margin-left: 5px;}
.optionplus[aria-expanded="true"]::after {content: ' -';}

.option_inner dd button {margin: 4px; margin-left: 1px; border: 1px solid #ddd;  background-color: #f8f8f8; cursor: pointer;}
.option_inner dd button:hover {background-color: #e0e0e0;}
.option_inner dt {padding: 0 8px;}
.advancedSearchContent .ofno dd {height: initial;}


/*최근검색,인기검색*/
.searchlibW {position: relative;}
.searchlibW .auto-search-dropdown {display: block; position: absolute; top: 50px; left: 0; background: #f9f9f9; width: calc(100% - 176px); padding: 12px; z-index: 995; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); border-radius: 0 0 10px 10px;}
.searchlibW .auto-tab-item {cursor: pointer;}
.auto-tab-menu {display: grid; grid-template-columns: 1fr 1fr;}
.auto-tab-menu li {text-align: center !important; padding: 8px 0;}
.auto-tab-menu li.active {background: #fff;}
.auto-tab-content ul {background: #fff; min-height: 40px; padding: 12px 0 ; margin-bottom: 12px;}
.auto-tab-content ul li {line-height: 2rem; padding: 2px 12px;}
.auto-tab-content ul li a:hover {font-weight: 600;}
.auto-tab-content ul li img {width: 16px; background: #f9f9f9; padding: 4px; display: inline-block; border-radius: 4px; cursor: pointer; margin-left: 4px;}
.searchArea .searchBox .autobtngroup a {background: none; color: #000; padding: 8px;}
.autobtngroup a:last-child {float: right;}

/*검색 후 나뉜 탭*/
.subTabList-s {background: #f9f9f9; }
.subTabList-s ul li {border: 1px solid #fff;}
.subTabList-s ul li a {display: block; display:flex; flex-wrap: wrap; align-content: center; justify-content: space-around;}
.subTabList-s ul li.active, .subTabList-s ul li:hover {background: #69137d;}
.subTabList-s ul li:first-child, .subTabList-s ul li:last-child {border: 0;}
.subTabList-s ul li:nth-child(5) {border-left: 0;}

/*도서리스트*/
.organizar {text-align: right;}
.organizar select {padding-right: 30px; margin: 0; min-width: 70px;}
.organizar button {border: 1px solid #ddd; padding: 10px; background: #f9f9f9;}
.subTabCont {margin-top: 20px;}
.liblist > li {display: grid; grid-template-columns: 100px 1fr 300px; column-gap: 12px;}
.liblist > li .popup2 {grid-column: span 3;}
.liblist > li:hover {background-color: #fff;}
.liblist .libroT p {max-width: 420px; line-height: 1.5rem;}
.liblist2 li {grid-template-columns: 100px 1fr;}
.liblist3 li {grid-template-columns: 40px 100px 1fr;}
.liblist3 li > span {align-self: center; padding: 24px 0; text-align: center; font-weight: 600; color: #69137d;}
.liblist3 li span.Femd {background: url('/images/uce/sub/popular1.svg')no-repeat 50% 30%; color: #8f5700;}
.liblist3 li span.Semd {background: url('/images/uce/sub/popular2.svg')no-repeat 50% 30%; color: #333;}
.liblist3 li span.Temd {background: url('/images/uce/sub/popular3.svg')no-repeat 50% 30%; color: #8f5700;}
.libroT {display: flex; gap: 8px; align-items: center; margin-bottom: 8px;}
.liblist4 {display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px;}
.liblist4 p, .liblist5 p {white-space:initial;}
.liblist4 i {display: inline; line-height: 1.3rem;}
.liblist4 li {display: block;}
.liblist4 .libroT p {max-width: 100%; margin-top: 8px;}
.liblist4 .myadd {width: 100%;}
.liblist5 {display:grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
.liblist5 > li {display:grid; grid-template-columns: 140px 1fr; position: relative; gap: 12px;}
.liblist5 > li form {grid-column: span 2; position: absolute;}
.liblist5 > li .libroimg {max-height: 194px;}
.liblist5 .libinfo i {display: block; border-right: 0;}
.libroT .title {font-weight: 500;}
.libroT .title .word {font-weight: 600; color: #69137d ;}
.libinfo {margin-bottom: 8px;}
.libinfo2 {margin-bottom: 0;}
.libinfo2 i {display: block; border-right: 0;}
.libcate {border: 1px solid #ddd; padding: 4px 8px; font-size: 13px; border-radius: 4px;}
.librobtn {display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;}
.librobtn a {display: block; text-align: center; background: #f9f9f9; border-radius: 4px; align-self: center; padding: 12px 0;}
.librobtn a:hover, .librobtn a:active, .librobtn a:focus {background: #f0f0f0;}
.librobtn img {height: 16px;}
.librobtn2 {grid-template-columns: 1fr;}
.librobtnno {color: #c3c3c3;}

/*도서 내 팝업*/
.popup2 {position: initial !important; z-index: 99;}
.popup2 .TableTypeBox {max-height: 800px;}
.popup2 .close-btn {float: right; width: 14px; margin-top: 14px;}
.popup2 .TableTypeBox .tableType tbody tr td:last-child {text-align: center;}
.popup {position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; padding: 20px; background-color: white; border: 1px solid #ddd; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); z-index: 1000; display: none; border-radius: 8px; width: 40%;}
.popup .TableTypeBox {max-height:66vh; overflow-y: auto;}
.popup p {font-size: 20px; font-weight: 600;}
.popup .btn_area {margin: 16px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 50%;}
.popup .btn_area a {padding: 12px 16px; border-radius: 4px; text-align: center; cursor: pointer;}
.popup .btn_area a.btn {background: #69137d; color: #fff;}
.popup .btn_area a.close-btn2 {border:1px solid #69137d; color: #69137d;}
.popup .close-btn {position: absolute; top: 10px; right: 10px; border: none; width: 30px; height: 30px; text-align: center; cursor: pointer; font-size: 16px; line-height: 28px;}
.popup .close-btn img {width: 16px;}
.popup-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(99, 99, 99, 0.1); z-index: 999; display: none;}
.libroimg {position: relative;}
.myadd {position: absolute; bottom: 0; left: 0; z-index: 9; width: 100px; background: rgba(0, 0, 0, 0.5); padding: 8px 0; font-size: 13px; text-align: center; font-weight: 600; color: #fff;}
.myadd img {width: 16px; box-sizing: border-box;}
.myadd:hover {background: rgba(0, 0, 0, 0.6); color: #fff;}

#popup-reserve {width: 30%; }
#popup-reserve .btn_area {width: 100%; }

.address-group button {border: 1px solid #ddd; border-radius: 2px; padding: 12px 16px;}

.popaddd ul {border-top: 2px solid #000; margin: 10px auto; padding: 12px 0;}
.popaddd ul li {line-height: 2rem;}
.popaddd ul li a {display:inline-block; padding: 4px 8px;}
.popaddd ul li a:hover {background: #f9f9f9; font-weight: 600;}

.popup2 {width: 100%;}
.popup2 .toggle-header {padding: 12px 0;}
.popup2 td:last-child img {width: 30px;}
.popup2 table td {text-align: center;}

.popup2 .library-list input {margin-right: 4px;}
.popup2 .library-list div {line-height: 1.5rem;}
.popup2 .tableType th br {display: none;}

#popup-exchange .libinfo { font-size: 14px; background: #f8f8f8; padding: 12px;}
#popup-exchange .libinfo i {display: block; }
#popup-exchange .libinfo i b {font-weight: normal; display: inline-block; width: 70px;}

/*고급검색*/
.checkrangeH {display: block;}
.checkrangeH .collhcheck {display: flex; margin-bottom: 12px;}
.checkrangeH .collhcheck div {margin-right: 14px;}
.searchArea .searchBox .searchlibH input[type="search"] {border: 0; background: #f9f9f9; width: calc(100% - 100px);}
.searchArea .searchBox .searchlibH label {width: 100px; display: inline-block;  align-self: center;}
.searchArea .searchBox .searchlibH label.hide {display: none;}
.searchArea .searchBox .searchlibH .event-period {display: flex; align-items: center;}
.searchArea .searchBox .searchlibH .event-period span {display: inline-block; margin: 0 12px;}
.searchArea .searchBox .searchlibH div {display: flex;}
.searchArea .searchBox .searchlibH .event-period input[type="date"] {font-size: 15px;}
.reset {text-align: right; align-self: center;}
.reset img {width: 22px; display: inline-block; margin: 0 4px; border-radius: 50%; padding: 4px;}


/*도서상세*/
.bookView {border-top: 0;}
.bookView .bookdetail {display: grid; grid-template-columns: 180px 1fr; column-gap: 20px;}
.bookView .bookdetail .libroT {margin-bottom: 0; line-height: 1.8rem;}
.bookView .bookdetail .title {font-size: 24px; white-space: initial; max-width: initial;}
.bookView .bookdetail .libinfo span {margin-top: 12px; display: block;}
.bookView .bookdetail .libinfo span.red {margin-top: 0; display: inline-block;}
.bookView .bookdetail .libroinfo_wrap {display: flex; flex-direction:column; justify-content: space-evenly;}
.bookView .bookdetail .myadd {width: 100%; font-size: 17px;}
.bookView .librobtn {grid-template-columns: repeat(4, 1fr);}
.docuToggle {margin-top: 32px;}
.docuToggle h3 {cursor: pointer;}
.documen {border-bottom: 1px solid #ddd; padding: 0 0 24px; line-height: 1.6rem; max-width: 950px;}
.subContent .conBox .docuToggle ol> li {display: grid;}
.subContent .conBox .docuToggle ol> li::before {display: none;}
.subContent .conBox .docuToggle ol> li input {margin-right: 4px;}
.documen td:last-child {text-align: center !important;}
.documen .print0 img {width: 30px !important;}
.documen tr th br {display: none;}
.documen .librobtn img {height: 24px;}
.listMAX {max-height: 180px; overflow: auto;}
.list-view {border-top: 2px solid #000;}
/* 슬라이드 */
.documen .slider-wrapper {position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center;}
.documen .slider-container {overflow: hidden; width: 88%; margin: 0 auto;}
.documen .slides {display: flex; transition: transform 0.5s ease-in-out;}
.documen .slide-item {box-sizing: border-box; padding: 10px; flex: 1 0 auto;}
.documen .slide-item img {width: 100%; object-fit: cover;}
.documen .book-title {font-weight: normal; margin-top: 10px; font-size: 14px; color: #333;}
.documen .book-title .bookmark {display: block; padding: 4px; margin-top: 4px; font-weight: bold; border: 1px solid #ccc; border-radius: 6px;}
.documen .book-title .bookmark img {width: 16px; height: 16px; margin-right: 4px;}
.documen .book-title strong {display: inline-block; margin-top: 6px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; line-height: 1.2rem;}
.documen .book-title span { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; line-height: 1.2rem;}

.documen .prev {left: 10px;}
.documen .next {right: 10px;}
.docuToggle p {cursor: pointer;}
.docuToggle p .arrow img {width: 20px; margin-left: 4px;}
.sr-only {display: none;}

/*태그클라우드*/
#tagscloud a {
    position: absolute;
    transform: translate(-50%, -50%);
    opacity: attr(data-opacity number);
    z-index: attr(data-zIndex number);
    left: attr(data-x px);
    top: attr(data-y px);
    transition: all 0.3s ease;
}
#tagscloud {width: 100%;}

/*카테고리, 십진분류, 스마트비치도서, 희망도서*/
.category-s {display: grid; grid-template-columns: repeat(4, 1fr); gap:8px; border-top: 2px solid #000; padding: 8px 0;}
.category5 {grid-template-columns: repeat(5, 1fr);}
.category-s > li > a {background: #faf1fb; display: block; color: #69137d; text-align: center; margin: 12px 0 0; padding: 12px 0; border-radius: 4px;}
.category-s > li > a:hover {background: #f7ebfc;}
.category-s > li ul {margin-top: 12px; padding: 0 12px;}
.category-s > li ul li {line-height: 2.5rem;}
.category-s > li ul li a:hover {background:linear-gradient(to bottom, transparent 50%, rgba(207, 185, 218, 0.5) 30%);}

.researchlibW > div {grid-template-columns: 1fr 60px 160px;}
.smsearchlibW > div {grid-template-columns: 100px 1fr 100px;}
.smsearchlibW .organizar {text-align: left;}
.smsearchlibW .organizar select {width: 100%;}
.smartLibradio .library-list {display: block;}

.hopesearch > div {display: grid; grid-template-columns: 1fr 100px 124px; column-gap: 8px;}
.searchArea .hopesearch input[type="search"] {width: 100%;}
.hopesearch > div > a {padding:10px 0; box-sizing: border-box; color: #fff; vertical-align: middle;  background: #69137d; font-size: 17px; border-radius: 5px; text-align: center; align-self: center;}
.hopesearch .ment {text-align: left; display: block; margin-top: 4px;}
.hopebtn {background: #faf1fb; grid-column: span 2; padding: 12px 0; border-radius: 8px; position:absolute; width: 50px; bottom: 24px; right: 12px; color: #69137d; text-align: center;}
.hopebtn:hover {background: #f7ebfc;}
.hopebtn img {display: block; margin: 0 auto 4px; width: 34%;}
.hopebtnno {background: #f9f9f9; color:#c3c3c3;}
.hopebtnno:hover {background: #f9f9f9; cursor: auto;}

.library-list li.smartcheck {grid-template-columns: repeat(3, 1fr);}


/*신문잡지*/
.newsearchlibW > div {grid-template-columns:1fr 100px}
.newsearchlibW > div > div {display: grid; grid-template-columns: 80px 1fr; align-items: center;}

/*일반검색*/
.basicobu .searchBox input[type="search"] {width:calc(100% - 120px);}
.basicobulist {margin-top: 60px;}
.basicobulist li.fir {background: #f9f9f9; padding: 8px; font-weight: 600; }
.basicobulist li { border-bottom: 1px solid #ddd;}
.basicobulist li.more {border-bottom: 0;}
.basicobulist li a {padding: 24px 12px; display: block;}
.basicobulist li a p {margin-bottom: 8px; font-size: 19px; }
.basicobulist li a strong {font-weight: bold; color:#0056AA;}

@media all and (max-width:1420px) {      
    
    .library-list li {grid-template-columns: repeat(3, 1fr);}
    .library-list li p:first-child {grid-column: span 3;}

    .searchArea .searchBox .detail_toggle button {width: initial;}
    .searchArea .searchBox .autobtngroup a {width: initial;}

    .checkrangeH li {line-height: 2rem;}
    .searchArea .searchBox .searchlibH label {display: block;}
   
    .searchArea .searchBox .searchlibH .event-period label {float: initial;}
    .searchArea .searchBox .searchlibW > div {margin-top: 8px;}
    .searchArea .searchBox .searchlibW > div .reset {margin: 20px auto; width:150px; display: block;text-align: center;}

    .searchArea .searchBox .searchlibH select {width: 50%;}
    .documen {max-width: 100%;}
    
    /*도서 내 팝업*/
    .popup {width: 60%;}
    #popup-collectioninfo {width: 100%; left: 46%;}

    
   

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

    
    .searchArea .searchBox .searchlibW > div {margin-top: 0;}

    .liblist > li {display: block;}
    .libroimg {display:block; max-height: 330px; max-width: 200px; margin: 0 auto 12px;}
    .librobtn {grid-template-columns: repeat(6, 1fr); margin-top: 12px;}
    .myadd {width: 100%; font-size: 16px;}
    .liblist .libroT span {flex: 0 0 56px;}
    .liblist .libroT p {width: 100%; max-width: initial; white-space:initial}
    .liblist3 li > span {padding: 24px; display: block; font-size: 21px;}
    .liblist4 {grid-template-columns: repeat(4, 1fr);}
    .librobtn2 {display: block;}
    .liblist5 {gap: 20px;}
    .liblist5 > li .libroimg {max-height: initial;}

    .documen .librobtn {grid-template-columns: repeat(2, 1fr);}

    .popup {width: 66%;}
    #popup-reserve {width: 50%;}
    #popup-collectioninfo .librobtn {grid-template-columns: repeat(2, 1fr); margin-top: 0;}
}

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

    .searchlibW > div {display: block;}
    .searchlibW > div button {margin-top: 4px;}
    .golbalkb {display: none;}
    .searchlibW .auto-search-dropdown {width: 100%; top: 46px;}
    .searchArea .searchBox .autobtngroup a {padding: 8px 0;}
    .auto-tab-content ul {max-height: 180px; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none;}
    .auto-tab-content ul::-webkit-scrollbar {width: 8px; height: 8px;}
    .auto-tab-content ul::-webkit-scrollbar-track {background: #f0f0f0;  border-radius: 8px;}
    .auto-tab-content ul::-webkit-scrollbar-thumb {background-color: #888;  border-radius: 8px; border: 2px solid #f0f0f0;}
    .auto-tab-content ul::-webkit-scrollbar-thumb:hover {background-color: #888;}
    .auto-tab-content ul {scrollbar-width: thin; scrollbar-color: #888 #f0f0f0;}


    .searchArea .hopesearch button {width: 68.4%;}
    .searchArea .hopesearch a {width: 30%; display: inline-block; margin-top:4px; font-size: 14px; line-height: 1.6rem;}
    .searchArea .searchBox .searchlibW > div > div {margin-bottom: 8px;}
    .bookView .bookdetail {display: block;}
    .librobtn {grid-template-columns: repeat(3, 1fr); margin-top: 12px;}
    .libinfo br {display: none;}
    .documen .tableType02 {min-width: 600px;}

    .popup {width: 80%;}
    #popup-collectioninfo {width: 100%; left: 50%;}

    .mobileno {display: none;}
    
}


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

    .library-list li {grid-template-columns: repeat(2, 1fr); padding: 10px !important;}
    .library-list li p:first-child {grid-column: span 2;}

    .library-list li.smartcheck {display: block;}
    .searchArea .checkrange li {padding: 0;}
    .searchArea .auto-tab-menu li:first-child {grid-column: initial;}
    .searchArea .checkrange .auto-tab-content li {padding: 2px 12px;}
    .searchArea .searchBox .searchlibH .event-period {display: block;}

    .liblist4 {grid-template-columns: repeat(2, 1fr);}
    .liblist5 {display: block;}

    .category-s, .category5 {grid-template-columns: repeat(2, 1fr);}
    .subTabList-s ul li {display:flex; flex-wrap: wrap; align-content: center; justify-content: space-around;}

    .writ_wrap {display: block; }
    .writ_wrap .organizar {text-align: left; margin-top: 4px;}

    .organizar select {padding-right: 30px; margin-top: 4px; width: 49%;}
    .organizar button {width: 99%; margin-top: 4px;}
    .libinfo {font-size: 14px;}
    .librobtn {grid-template-columns: repeat(2, 1fr);}
    
    .popup {width: 100%; position: fixed; left: 0; top: 0; transform:initial; border-radius: 0; height: 100vh; padding: 20px 12px;} 
    
    #popup-reserve {height: initial; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 80%;}
    #popup-collectioninfo .tableType th, #popup-collectioninfo .tableType td {padding: 4px !important;}
    #popup-collectioninfo .tableType th {font-size: 12px;}
    #popup-collectioninfo .tableType th br {display: block;}
    #popup-collectioninfo {transform:initial; left: 0; width: 100%; }


    .bookView .librobtn {grid-template-columns: repeat(2, 1fr);}
    .documen .librobtn {grid-template-columns: repeat(4, 1fr); margin-top: 0;}
    .documen .librobtn a {margin: 4px 0;}
    .documen .list-item {border-bottom: 1px solid #ddd; padding:12px 0}
    .documen .list-item:last-child {border: 0;}
    .documen .list-item strong {font-weight: 600; width: 60px; display: inline-block;}
    
}