@charset 'utf-8'; /**/ #searchWp {--mint: #18a888;} #design #searchWp form label {word-break: break-all;} #design #searchWp .btn_wrap {text-align: center;} #design #searchWp .num_list {counter-reset: section;} #design #searchWp .num_list > li {display: flex;word-break: keep-all;} #design #searchWp .num_list > li::before {content: counter(section)". ";counter-increment: section;margin-right: 3px;line-height: 1;} #design #searchWp .reserv {color: #cc0000 !important;} /* 대출중 */ #design #searchWp .use {color: #003ab1 !important;} /* 대출가능 */ #design #searchWp .input_wp {display: inline-block;} #design #searchWp .input_wp:first-child {margin-left: 0;} #design #searchWp .input_wp input + label {margin-left: 5px;} #design #searchWp .input_wp label + input {margin-left: 5px;} /**/ #searchWp ul ul {margin-top: 15px;} #searchWp ul.con_list > li {position: relative;z-index: 0;padding-left: 15px;font-size: 17px;color: #333;} #searchWp ul.con_list > li + li {margin-top: 15px;} #searchWp ul.con_list > li::before {content: '';position: absolute;top: 10px;left: 0;width: 6px;height: 6px;background-color: var(--subColor);border-radius: 50%;} /**/ .checkbox{display:none;} .checkbox + label{display:flex !important;align-items:center;cursor:pointer;width: max-content;margin-right:10px;} .checkbox + label span{margin:0 10px 0 0;font-size:14px} .checkbox + label:before{content:"";width:18px;height:18px;border:1px solid #ccc;background:url(../img/check1.svg) no-repeat 50% 50%;background-size:100% auto;border-radius:0px;margin-right: 5px;} .checkbox:checked + label:before{border:1px solid #39405a;background:#39405a url(../img/check2.svg) no-repeat 50% 50%} .checkroundbox{display:none} .checkroundbox + label{display:flex !important;align-items:center;cursor:pointer} .checkroundbox + label span{margin:0 10px 0 0;font-size:14px} .checkroundbox + label:before{content:"";width:18px;height:18px;border:1px solid #ccc;background:url(../img/check1.svg) no-repeat 50% 50%;background-size:100% auto;border-radius:9px} .checkroundbox:checked + label:before{border:1px solid #39405a;background:#39405a url(../img/check2.svg) no-repeat 50% 50%} .radiobox{display:none} .rad label {vertical-align:middle;font-size:16px;letter-spacing:-.7px} .radiobox + label{display:flex !important;align-items:center;color:#333;cursor:pointer;margin-right:20px;} .radiobox + label span{margin:0 10px 0 0;font-size:14px;} .radiobox + label:before{content:"";margin-right:4px;width:18px;height:18px;border:1px solid #ccc;background:#fff url(../img/check1.svg) no-repeat 50% 50%;background-size:100% auto !important;border-radius:18px} .radiobox:checked + label:before {content:"";border:1px solid #39405a;background:#39405a url(../img/check2.svg) no-repeat 50% 50%} .arrow { position: relative;} .arrow::after {position: absolute;left: -18px;top: 3px;content: '';width: 20px;height: 20px;border-top: 3px solid #999;border-right: 3px solid #999;transform: rotate(225deg);} .arrow_btn {position: fixed;right: 20px;display: block;padding: 10px 10px 10px 30px;border: 1px solid #ccc;width: 50px;height: 50px;border-radius: 50%;text-align: center;z-index:4;transform: translateY(-10%);} .arrow:hover:after {left: -19px;top: 2px;border-top: 5px solid var(--mainColor);border-right: 5px solid var(--mainColor);} /****************************** table ******************************/ #design #searchWp table {width: 100%;border-top: 1px solid #ccc;vertical-align: middle;border-collapse: collapse;} #design #searchWp table * {word-break: break-all;} #design #searchWp table thead th {padding: 20px 12px;background-color: #f4f4f4;text-align: center;font-size: 16px;color: #222;vertical-align: middle;} #design #searchWp table tbody th, #design #searchWp table tbody td {padding: 20px 12px;border-width: 1px;border-style: solid;border-color: #ccc;text-align: center;background-color: #fff;font-size: 15px;line-height: 1.4;color: #222;vertical-align: middle;} #design #searchWp table tbody th.require::after {content: '*';display: inline-block;margin-left: 3px;font-size: 20px;line-height: 1;font-weight: 400;color: #e90000;vertical-align: top;} /* table - thead tbody th 있는 버전 */ #design #searchWp table.tstyle1 thead th {border: 1px solid #ccc;} #design #searchWp table.tstyle1 thead tr:last-child th {border-bottom-width: 0;} #design #searchWp table.tstyle1 thead th:first-child {border-left: 0;} #design #searchWp table.tstyle1 thead th:last-child {border-right: 0;} #design #searchWp table.tstyle1 tbody th, #design #searchWp table.tstyle1 tbody td {padding: 15px 20px;font-weight: 400;color: #222;} #design #searchWp table.tstyle1 tbody th:first-child, #design #searchWp table.tstyle1 tbody td:first-child {border-left-width: 0;} #design #searchWp table.tstyle1 tbody td:last-child {border-right: 0;} /* table - tbody th 있는 버전 */ #design #searchWp table.tstyle2 {position: relative;} #design #searchWp table.tstyle2::before {content: '';position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 1px;background-color: #222;} #design #searchWp table.tstyle2 tbody th {height: 52px;padding: 10px 20px;text-align: left;font-size: 16px;} #design #searchWp table.tstyle2 tbody td {height: 52px;padding: 10px 20px;border-left: 1px solid #ddd;border-right: 1px solid #ddd;} #design #searchWp table.tstyle2 tbody td strong.state {color: #d90f48;font-weight: 500;} #design #searchWp table.tstyle2 tbody th:first-child, #design #searchWp table.tstyle2 tbody td:first-child {border-left-width: 0;} #design #searchWp table.tstyle2 tbody td:last-child {border-right: 0;} /*공통속성*/ .mt0 {margin-top: 0 !important;} .mt10{margin-top:10px} .mt20{margin-top:20px} .mt30{margin-top:30px} .mt40{margin-top:40px} .mt50{margin-top:50px} .mb5{margin-bottom:5px !important} .mb10{margin-bottom:10px !important} .mb15{margin-bottom:15px !important} .mb20{margin-bottom:20px !important} .mb25{margin-bottom:25px !important} .mb30{margin-bottom:30px !important} .mb35{margin-bottom:35px !important} .mb40{margin-bottom:40px !important} .mb45{margin-bottom:45px !important} .mb50{margin-bottom:50px !important} .ml5{margin-left:5px !important} .ml10{margin-left:10px !important} .ml15{margin-left:15px !important} .ml20{margin-left:20px !important} .ml25{margin-left:25px !important} .ml30{margin-left:30px !important} .ml35{margin-left:35px !important} .ml40{margin-left:40px !important} .ml45{margin-left:45px !important} .ml50{margin-left:50px !important} .pt10{padding-top:10px !important} .pt20{padding-top:20px !important} .pt30{padding-top:30px !important} .pb10{padding-bottom:10px !important} .pl10{padding-left:10px !important} .pl20{padding-left:20px !important} .pr10{padding-right:10px !important} .pr15{padding-right:15px !important} .pr20{padding-right:20px !important} .pr25{padding-right:25px !important} .pr30{padding-right:30px !important} .pr35{padding-right:35px !important} .pr40{padding-right:40px !important} .pr45{padding-right:45px !important} .pr50{padding-right:50px !important} .w5 {width:5px !important} .w10{width:10px !important} .w15{width:15px !important} .w20{width:20px !important} .w25{width:25px !important} .w30{width:30px !important} .w35{width:35px !important} .w40{width:40px !important} .w45{width:45px !important} .w50{width:50px !important} .w55{width:55px !important} .w60{width:60px !important} .w70{width:70px !important} .w80{width:80px !important} .w90{width:90px !important} .w100{width:100px !important} .w110{width:110px !important} .w120{width:120px !important} .w5p{width:5% !important} .w10p{width:10% !important} .w15p{width:15% !important} .w20p{width:20% !important} .w25p{width:25% !important} .w30p{width:30% !important} .w35p{width:35% !important} .w40p{width:40% !important} .w45p{width:45% !important} .w50p{width:50% !important} .w55p{width:55% !important} .w60p{width:60% !important} .w70p{width:70% !important} .w80p{width:80% !important} .w90p{width:90% !important} .w100p{width:100% !important} /****************************** 검색 ******************************/ #design #program {min-height:800px;} /*상세검색 창 활성화 사이즈 : 800으로 이하로 줄이면 안됨*/ /* 검색창 */ #design #searchWp .search_wrap {position: relative;} #design #searchWp .search_wrap .search_top {display: flex;} #design #searchWp .search_wrap .search_bar {position: relative;flex-grow: 1;height: 70px;border: 2px solid #222;border-radius: 5px;font-size: 0;box-shadow: 6px 6px 15px rgba(0,0,0,0.1);background-color: #fff;} #design #searchWp .search_wrap .search_bar select {width: 130px;height: 100%;margin: 0;padding: 0 10px;border: 0;font-size: 16px;vertical-align: top;color: #222;background-color: #fff;} #design #searchWp .search_wrap .search_bar select.cate{position:absolute;left:10px;width:100px;} #design #searchWp .search_wrap .search_bar input[type="text"] {width: calc(100% - 202px);margin: 0 0 0 120px;padding: 15px;height: 100%;border: 0;font-size: 18px;vertical-align: top;border-radius: 5px;} #design #searchWp .search_wrap .search_bar .search_btn {width: 82px;height: 100%;background-color: var(--mainColor);background-image: url(../img/ico_search_w.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 32px;border: 0;text-indent: -9999px;cursor: pointer;} #design #searchWp .search_wrap .search_bar .btn-txt-close{position:absolute;font-weight:bold;font-size: 30px;width:30px;height:30px;right: 100px;top: 17px;color: #7f7f7f;} #design #searchWp .search_wrap .search_bar .search_btn svg {position: absolute;top: 50%;left: 50%;z-index: -1;width: 32px;height: auto;transform: translate(-50%, -50%);} #design #searchWp .search_wrap .auto_complete {display: none;position: absolute;top: 70px;left: -1px;z-index: 9;width: calc(100% + 2px);font-size: 16px;color: #757575;background-color: white;border: 2px solid #222;border-radius: 5px;padding: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);} #design #searchWp .search_wrap .auto_complete .auto_list {overflow-y: auto;height: 200px;padding: 20px;} #design #searchWp .search_wrap .auto_complete .auto_list > a {overflow: hidden;display: block;text-overflow: ellipsis;white-space: nowrap;color: inherit;} #design #searchWp .search_wrap .auto_complete .auto_list > a + a {margin-top: 10px;} #design #searchWp .search_wrap .search_lang, #design #searchWp .search_wrap .search_detail {display: flex;flex-shrink: 0;border: 2px solid #222;border-radius: 5px;justify-content: center;align-items: center;font-size: 15px;color: #333;font-weight: 500;background-color: #fff;} #design #searchWp .search_wrap .search_lang {width: 100px;margin-left: 30px;} /*다국어*/ #design #searchWp .search_wrap {display: flex;flex-direction: column; gap: 10px;position: relative;margin: 0 auto;} #design #searchWp .search_top > label {font-size: 14px;font-weight: bold;} #design #searchWp .search_top > input[type="text"] {width: 100%;padding: 10px;font-size: 16px;border: 1px solid #ccc;border-radius: 5px;} #design #searchWp .search_top > button {padding: 10px 20px;font-size: 16px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;} #design #searchWp .search_top > button:hover {background-color: #0056b3; color:#fff;} #design #searchWp .search_top > .layer {display: none;position: absolute;top:75px;left: 0;width: 100%;background-color: white;border: 2px solid #222;border-radius: 5px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);z-index: 10;} #design #searchWp .search_top > .layer h2 {margin-bottom: 15px;} #design #searchWp .search_top > .layer .language-options {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;} #design #searchWp .search_top > .layer .language-options .lang-option {display: inline-block;text-decoration: none;padding: 10px 15px;background-color: #007bff;color: white;border-radius: 5px;cursor: pointer;font-size: 14px;} #design #searchWp .search_top > .layer .lang-option:hover {background-color: #0056b3;} #design #searchWp .search_top > .layer .selected-characters {display: flex;flex-wrap: wrap;gap: 5px;} #design #searchWp .search_top > .layer .char-box {padding: 10px;background-color: #f0f0f0;border-radius: 5px;font-size: 16px;cursor: pointer;} #design #searchWp .search_top > .layer .char-box:hover {background-color: #ddd;} #design #searchWp .search_top > .layer .close-layer-mt {margin-top: 20px;width: 100%;text-align: end;} #design #searchWp .search_top > .layer .close-layer {margin-top: 10px;padding: 10px 20px;background-color: #dc3545;color: white;border: none;border-radius: 5px;cursor: pointer;} /**/ #design #searchWp .search_top .btn_delete {position: absolute;top: 11px;right: 100px;width: 40px;height: 40px;z-index: 7} #design #searchWp .search_top .input_txt_del {display: inline-block;background-repeat: no-repeat;width: 18px;height: 18px;} #design #searchWp .search_top .input_txt_del::before {content: "";background-image: url('../../wdDLSLE_V4/img/input_txt_delete.png');background-repeat: no-repeat;background-size: 30px;position: absolute;left: 10px;top: 52%;transform: translateY(-50%);width: 30px;height: 30px;} #design #searchWp .search_top .blind {position: absolute;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;overflow: hidden;} /* 상세검색 */ #design #searchWp .search_wrap .search_detail {width: 80px;margin-left: 10px;} #design #searchWp .search_wrap .search_detail > input[type="button"] {width: 100%;height: 100%;background: none;border: 0;font-family: inherit;font-size: inherit;color: #222;cursor: pointer;} #design #searchWp .search_wrap .search_detail .search_detail_con {overflow: hidden;display: none;position: absolute;top: 0;left: 0;z-index: 10;width: 100%;background-color: #fff;border: 2px solid #222;box-shadow: 7px 7px 20px rgba(0,0,0,0.1);border-radius: 5px;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_type {padding: 30px 0;border-top-width: 1px;border-bottom-width: 1px;border-left-width: 0;border-right-width: 0;border-style: solid;border-color: #222;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_ex {margin: 30px 0;padding: 20px;background-color: #f4f4f4;text-align: left;font-size: 15px;line-height: 1.4;color: #222;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_input {display: flex;margin-bottom: 40px;padding: 0 0 40px 0;border-bottom: 1px solid #222;flex-wrap: wrap;} #design #searchWp .search_wrap .search_detail .search_detail_con dl {display: flex;font-size: 17px;font-weight: 400;color: #222;align-items: center;width:100%;} #design #searchWp .search_wrap .search_detail .search_detail_con dl:nth-child(n+7){width:50%;} #design #searchWp .search_wrap .search_detail .search_detail_con dl:last-child{width: calc(100% - 20%);} #design #searchWp .search_wrap .search_detail .search_detail_con dl + dl {margin-top: 10px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dt {flex-shrink: 0;width: 110px;padding-right: 10px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dt label {line-height: 1.2;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd {flex-grow: 1;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd input[type="text"] {width: calc(100% - 70px);vertical-align: top;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd .input_calc {display: inline-block;padding: 0 10px;font-size: 14px;color: #555;line-height: 40px;margin-left: 8px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd select {width: calc(100% - 70px);} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd select.rel_select {width: 70px;margin-left: 10px;vertical-align: top;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_type dl > dd > span {margin-left: 3%;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd > span:first-child {margin-left: 0;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd > span input[type="checkbox"] {margin-right: 5px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd.multi {display: flex;align-items: center;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.bar {position: relative;display: inline-block;width: 30px;height: 40px;vertical-align: middle;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.bar::before {content: '~';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd.multi .w50p input[type="text"] {width: calc(50% - 20px);} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.example {display: inline-block;margin-left: 10px;font-size: 16px;color: #757575;} #design #searchWp .search_wrap .search_detail .search_detail_con a.close_btn, #design #searchWp .search_wrap .search_detail .search_detail_con button.close_btn {position: absolute;top: 0;right: 0;width: 50px;height: 50px;background-color: #222;text-indent: -9999px;background-image: url(../img/ico_w_close.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 24px;border: 0;cursor: pointer;padding: 0;} #design #searchWp .search_wrap .search_lang {cursor: pointer;font: inherit;color: inherit;} #design #searchWp .search_wrap .search_detail .search_detail_con .btn_wrap {text-align: center;} #design #searchWp .search_wrap .best_search {margin: 30px 0 0;font-size: 0;} #design #searchWp .search_wrap .best_search > a {display: inline-block;padding: 12px 20px;margin: 3px;border: 1px solid var(--subColor1);font-size: 15px;font-weight: 400;color: #222;color: var(--subColor1);border-radius: 100px;background-color: #fff;} #design #searchWp .search_wrap .new_search {margin: 5px 0 0;font-size: 0;} #design #searchWp .search_wrap .new_search > a {display: inline-block;padding: 12px 20px;margin: 3px;border: 1px solid var(--colorOrange);font-size: 15px;font-weight: 400;color: #222;color: var(--colorOrange);border-radius: 100px;background-color: #fff;} /* 도서관 선택 */ #design #searchWp .library_wrap {margin: 40px auto 0;border-top: 1px solid #ddd;} #design #searchWp .library_wrap .con {position: relative;border-bottom: 1px solid #ddd;} #design #searchWp .library_wrap .con .lib_search_btn {font-size: 0;} #design #searchWp .library_wrap .con .lib_search_btn input[type="button"] {font-size: 14px;margin: 1px;} #design #searchWp .library_wrap .con .lib_search_btn input[type="button"].lightgray {color: #333 !important;} #design #searchWp .library_wrap .con .lib_search_btn input[type="button"]:hover {background-color: #333 !important;color: #fff !important;transition: all 0.3s;} #design #searchWp .library_wrap .con > div {padding: 40px 0 30px;font-size: 0;} #design #searchWp .library_wrap .con > div + div {border-top: 1px dashed #dedede;} #design #searchWp .library_wrap .con > div p.title {margin-bottom: 10px;font-size: 18px;font-weight: 500;color: var(--subColor1);} #design #searchWp .library_wrap .con > div.slib.is-open {display: block;} #design #searchWp .library_wrap .con > div.slib {overflow: hidden;display: none;padding: 0;} #design #searchWp .library_wrap .con > div.slib > div {padding: 30px 0;} #design #searchWp .library_wrap .con > div > div > span {display: inline-flex;margin: 5px 0;width: 25%;font-size: 16px;color: #222;vertical-align: top;align-items: center;position: relative;} #design #searchWp .library_wrap .con > div > div > span input {vertical-align: top;margin-top: 0;} #design #searchWp .library_wrap .con > div > div > span label {height: auto;padding: 0 15px 0 5px;line-height: 1.3;word-break: keep-all;} #design #searchWp .library_wrap .checkbox {position: absolute;width: 1px;height: 1px;margin: -1px;padding: 0;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;display: inline-block !important;opacity: 0;} #design #searchWp .library_wrap label.lib-code-label {width: 100%;box-sizing: border-box;padding: 4px 15px 4px 5px;border-radius: 4px;} #design #searchWp .library_wrap .con > div.slib:not(.is-open) .lib-code-label {visibility: hidden;pointer-events: none;} #design #searchWp .library_wrap .con > div.slib:not(.is-open) .libCode {visibility: hidden;pointer-events: none;} #design #searchWp .library_wrap .libCode:focus + .lib-code-label, #design #searchWp .library_wrap .libCode:focus-visible + .lib-code-label {outline: 2px solid var(--mainColor);outline-offset: 2px;} #design #searchWp .library_wrap .more_slib {display: block;position: relative;top: -1px;margin: 0 auto;padding: 12px 20px;font-size: 15px;background: none;border: 1px solid #ddd;border-top: 1px solid #fff;cursor: pointer;border-radius: 0 0 10px 10px;} #design #searchWp .search_set button.btn {appearance: none;background: #fff;cursor: pointer;font: inherit;} /* 검색 */ #design #searchWp .search_result {margin: 40px 0 0;} #design #searchWp .search_result .search_sum {padding: 30px;background-color: #f4f4f4;} #design #searchWp .search_result .search_sum strong {font-size: 17px;font-weight: 700;color: #222;} #design #searchWp .search_result .search_sum > span {margin-left: 30px;font-size: 16px;} /* 검색 container */ #design #searchWp .container {display: flex;align-items: flex-start;margin: 30px auto 0;} #design #searchWp.type_left .container {display: block;} #design #searchWp .search_set {display: flex;padding: 20px 0;border: 1px solid #222;border-left: 0;border-right: 0;flex-wrap: wrap;} #design #searchWp .search_set span.set_select {font-size: 0;} #design #searchWp .search_set span.set_select input[type="button"] {background-color: #717171;font-size: 14px;color: #fff;border: 0;} #design #searchWp .search_set select {max-width: 120px;width: 100%;margin-right: 4px;background-color: #fff;font-size: inherit;font-size: 14px;} #design #searchWp .search_set .set_btn input[type="checkbox"] {width: 16px;height: 16px;border: 1px solid #ddd;} #design #searchWp .search_set .btn.btn_like {border-color: var(--mainColor);color: var(--mainColor);} #design #searchWp .search_set .btn::before {content: '';display: inline-block;height: 100%;background-repeat: no-repeat;background-position: 50% 50%;vertical-align: middle;} #design #searchWp .search_set .btn.btn_like::before {width: 20px;margin-right: 5px;background-image: url(../img/ico_c_like.png);} #design #searchWp .search_set .btn.btn_excel {border-color: #00a54c;color: #00a54c;} #design #searchWp .search_set .btn.btn_excel::before {width: 26px;background-image: url(../img/ico_excel.png);} #design #searchWp .search_set .btn.btn_category {display: none;} #design #searchWp .search_set .btn_insearch {position: relative;z-index: 0;text-align: right;} #design #searchWp .search_set .btn_insearch input[type="text"] {width: 100%;} #design #searchWp .search_set .btn_insearch input[type="button"] {position: absolute;top: 0;right: 0;z-index: 1;width: 40px;height: 100%;background-color: transparent;background-image: url(../img/ico_search.svg);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 20px;font-size: 0;text-indent: -9999px;border: 0;cursor: pointer;} /*#design #searchWp .search_set svg {position: absolute;z-index: 0;top: 50%;right: 10px;width: auto;height: 18px;margin-top: -9px;}*/ #design #searchWp .search_list {display: flex;} #design #searchWp .list_left {flex-shrink: 0;width: 230px;} #design #searchWp .list_left > dl {padding: 30px 0;border-bottom: 1px solid #222;} #design #searchWp .list_left > dl dt {margin-bottom: 15px;font-size: 17px;font-weight: 700;color: #222;} #design #searchWp .list_left > dl dd a {overflow: hidden;display: block;padding: 3px 0 4px;font-size: 15px;font-weight: 400;color: #222;text-overflow: ellipsis;white-space: nowrap;} #design #searchWp .list_left > dl dd a.more, #design #searchWp .list_left > dl dd button.more {margin-top: 10px;padding: 10px 0 0;color: #888;background: none;border: 0;cursor: pointer;font: inherit;display: block;width: 100%;text-align: left;} #design #searchWp .list_left a.close_btn {display: none;} #design #searchWp .list_con > dl {overflow: hidden;padding: 40px 0;border-bottom: 1px solid #ddd;} #design #searchWp .list_con > dl dt {float: left;width: 200px;position: relative;padding-left: 25px;margin-right: 30px;} #design #searchWp .list_con > dl dt > a {display: block;} #design #searchWp .list_con > dl dt input[type="checkbox"] {position: absolute;top: 0;left: 0;width: 16px;height: 16px;border: 1px solid #ddd;border-radius: 3px;} #design #searchWp .list_con > dl dt .book-img-area {display:flex;gap:10px;flex-direction: column-reverse;} #design #searchWp .list_con > dl dt img {width: 100%;height: auto;border: 1px solid #ddd;} #design #searchWp .list_con > dl dd {float: left;width: calc(100% - 250px);} #design #searchWp .list_con > dl dd p.book_name {overflow: visible;font-size: 20px;color: #222;text-overflow: ellipsis;} #design #searchWp .list_con > dl dd p.book_name > a {overflow: hidden;display: block;text-overflow: ellipsis;color: inherit;word-break: break-all;line-height: 1.2em; font-weight:500;} #design #searchWp .list_con > dl dd p.book_name > a:hover {font-weight: 500;color: var(--subColor1);letter-spacing: 0.2px;} #design #searchWp .list_con > dl dd p.book_name span.field {color: #757575;} #design #searchWp .list_con > dl dd p.book_name > a span.red {font-weight:inherit;} #design #searchWp .list_con > dl dd p.book_info > span {position: relative;z-index: 0;display: inline-block;padding: 4px 12px 4px 0;margin-right: 5px;font-size: 15px;line-height: 1.2;} #design #searchWp .list_con > dl dd p.book_info > span:last-child {margin-right: 0;padding-right: 0;} #design #searchWp .list_con > dl dd p.book_info > span::after {content: '';position: absolute;top: 50%;right: 0;width: 1px;height: 12px;margin-top: -6px;background-color: #aaa;} #design #searchWp .list_con > dl dd p.book_info > span:last-child::after {display: none;} #design #searchWp .list_con > dl dd span.kdc0 {color: #17348D;} #design #searchWp .list_con > dl dd span.kdc1 {color: #3e9e00;} #design #searchWp .list_con > dl dd span.kdc2 {color: #C57804;} #design #searchWp .list_con > dl dd span.kdc3 {color: #757575;} #design #searchWp .list_con > dl dd span.kdc4 {color: #0B8A1F;} #design #searchWp .list_con > dl dd span.kdc5 {color: #da5700;} #design #searchWp .list_con > dl dd span.kdc6 {color: #ea0159;} #design #searchWp .list_con > dl dd span.kdc7 {color: #0085FF;} #design #searchWp .list_con > dl dd span.kdc8 {color: #000;} #design #searchWp .list_con > dl dd span.kdc9 {color: #8731B8;} #design #searchWp .list_con > dl dd p.book_condition {font-size: 15px;line-height: 1.2;font-weight: 400;border: 1px solid #ccc;border-radius: 10px;display: inline-block;padding: 5px 10px;} #design #searchWp .list_con > dl dd p + p {margin-top: 25px;} #design #searchWp .list_con > dl dd .book_btn {margin-top: 25px;} #design #searchWp .list_con > dl dd .book_btn > span {display: block;margin-top: 10px;font-size: 0;} #design #searchWp .list_con > dl dd .book_btn > span a.btn {padding: 5px 25px !important;color: #222;background-color: transparent;background-repeat: no-repeat;background-position: 0 50%;} #design #searchWp .list_con > dl dd .book_btn > span a.btn_like {background-image: url(../img/ico_b_like.png);} #design #searchWp .list_con > dl dd .book_btn > span a.btn_print {padding: 5px 0 5px 30px;background-image: url(../img/ico_print.png);} #design #searchWp .search_aside {border: 1px solid #222;} #design #searchWp .search_aside > div {padding: 20px;box-sizing: content-box;} #design #searchWp .search_aside > div + div {border-top: 1px solid #222;} #design #searchWp .search_aside > div .title {padding-bottom: 20px;font-size: 17px;line-height: 1.2;font-weight: 700;color: #222;} #design #searchWp .search_aside .aside1 [role="tablist"] {display: flex;gap: 12px;margin-bottom: 16px;flex-wrap: wrap;} #design #searchWp .search_aside .aside1 [role="tab"] {appearance: none;background: none;border: 0;padding: 0;margin: 0;font-size: 15px;color: #909090;font-weight: 700;cursor: pointer;} #design #searchWp .search_aside .aside1 [role="tab"][aria-selected="true"], #design #searchWp .search_aside .aside1 [role="tab"].active {color: var(--mainColor);} #design #searchWp .search_aside .aside1 .num_list {margin: 0;padding: 0;list-style-position: inside;} #design #searchWp .search_aside .aside1 .num_list li {font-size: 14px;line-height: 1.3;} #design #searchWp .search_aside .aside1 .num_list li + li {margin-top: 12px;} #design #searchWp .search_aside .aside1 .num_list li a {font-size: inherit;color: #555;display: block;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;} #design #searchWp .search_aside > div > ul {position: relative;} #design #searchWp .search_aside > div > ul::after {content: '';display: block;clear: both;} #design #searchWp .search_aside > div > ul > li {float: left;} #design #searchWp .search_aside > div > ul > li > a.tab_btn {display: block;margin-bottom: 20px;font-size: 15px;color: #909090;font-weight: 700;} #design #searchWp .search_aside > div > ul > li.active > a.tab_btn {color: var(--mainColor);} #design #searchWp .search_aside > div > ul > li + li {margin-left: 10px;} #design #searchWp .search_aside > div > ul > li .num_list {position: absolute;left: 0;width: 100%;} #design #searchWp .search_aside > div > ul > li .num_list li {font-size: 14px;line-height: 1.3;} #design #searchWp .search_aside > div > ul > li .num_list li a {font-size: inherit;color: #555; display: block;overflow: hidden;width: 100%;text-overflow: ellipsis;white-space: nowrap;} #design #searchWp .search_aside > div > ul > li .num_list li + li {margin-top: 12px;} .blind, .visually-hidden {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip: rect(0,0,0,0) !important;white-space: nowrap !important;border: 0 !important;} #design #searchWp .view_info .icon_like_wp button, #design #searchWp #oneBookReview .icon_like_wp button {appearance: none;background: none;border: 0;padding: 0;cursor: pointer;font: inherit;color: inherit;} #design #searchWp .view_wrap .btn_wrap button.big_btn {cursor: pointer;font: inherit;} #design #searchWp .appendix-list__title {margin: 0 0 10px;} #design #searchWp .search_aside .aside2 > a {display: block;font-size: 14px;line-height: 1.2;color: #555;word-break: keep-all;} #design #searchWp .search_aside .aside2 > a + a {margin-top: 8px;} #design #searchWp .search_aside .aside3 .pager .slick-dots {margin-top: 10px;text-align: center;} #design #searchWp .search_aside .aside3 .pager .slick-dots li {display: inline-block;vertical-align: top;} #design #searchWp .search_aside .aside3 .pager .slick-dots li + li {margin-left: 5px;} #design #searchWp .search_aside .aside3 .pager .slick-dots li button {width: 10px;height: 10px;border-radius: 50%;cursor: pointer;background-color: #fff;border: 1px solid #adadad;text-indent: -9999px;} #design #searchWp .search_aside .aside3 .pager .slick-dots li.slick-active button {background-color: #134aa9;border-width: 0;} /* 상호대차 신청 */ #resultBox {max-width: 800px;min-width: 320px;margin: 0 auto;padding: 20px;} #resultBoxWrapper{width: 100%;} #resultBoxWrapper h3{padding:0 0 8px;margin-bottom: 15px;font-size: 20px;font-weight: 600;color:#1b5b9d;border-bottom: 2px solid #1b5b9d;} #resultBoxWrapper h3.lib_title{padding:7px 0 5px;border:0;width:100%;font-size:12px} #resultBoxWrapper h4 {margin-bottom: 8px;font-size: 17px;font-weight: 500;color: #333;} #resultBoxWrapper table + h4 {margin-top: 30px;} #resultBoxWrapper .lib_list li{padding-left:7px;background:url(../img/common/icon01.gif) no-repeat left center;margin-bottom:2px;font-size:11px} #resultBoxWrapper p.lib_tip{font-weight: 600;font-size:11px} #resultBoxWrapper p.tip{padding:20px 0;line-height:130%} #resultBoxWrapper .btn_check{text-align: center;padding: 20px 0 0;} #resultBoxWrapper .btn_check input[type="button"] {display: inline-block;padding: 12px 30px;background-color: #0a3085;font-size: 16px;color: #fff;} #resultBoxWrapper #interTxt {padding: 15px;margin-top: 20px;background-color: #f8f8f8;border-top: 2px solid #5bade2;} #resultBoxWrapper #interTxt > ul > li {position: relative;z-index: 0;padding-left: 12px;color: #555;font-size: 13px;} #resultBoxWrapper #interTxt > ul > li::before {content: '-';position: absolute;top: 3px;left: 0;z-index: -1;} /* table01 */ #resultBox .tstyle{position: relative;z-index: 0;width:100%;border-collapse:collapse;text-align:center;} #resultBox .tstyle::before {content: '';position: absolute;top: 0;left: 0;z-index: -1;width: 100%;height: 2px;background-color: #5bade2;} #resultBox .tstyle thead th {padding: 12px 5px;background-color: #efefef;color: #222;font-size: 15px;font-weight: 500;border: 1px solid #dbdee3;} #resultBox .tstyle tbody th{padding: 5px;font-size:14px;font-weight: 500;text-align:center;color:#1b5b9d;border:1px solid #dbdbdb;font-size: 14px;} #resultBox .tstyle tbody td{border:1px solid #dbdee3;padding:12px 10px;font-size: 14px;text-align: left;color: #555;} #resultBox .tstyle tbody td strong {font-weight: 500;color: #1B2A79;} #resultBox .tstyle tbody td.item{background-color:#faf6eb;font-weight: 500;} #resultBox .tstyle tbody select {padding: 5px;border: 1px solid #ddd;} #resultBox .tstyle tbody td .overlap {padding: 5px;margin-bottom: 10px;border: 1px solid #ccc;} #resultBox ul {margin-bottom:5px;} #resultBox ul li {padding-bottom:3px;} #resultBox ul.txt {margin-top:5px;} #resultBox ul.txt li {position:relative;padding-left:15px;} #resultBox ul.txt li:before {content: "※"; position:absolute; left:0;} /* paging #design #searchWp .paging_area {padding: 30px;margin-top: 40px;background-color: #f4f4f4;} #design #searchWp .paging_area .total {display: none;} #design #searchWp .paging_area .paging {font-size: 0;text-align: center;} #design #searchWp .paging_area .paging .pagination {display: inline-flex;text-align: center;align-items: center;flex-wrap: wrap;} #design #searchWp .paging_area .paging .pagination > span, #design #searchWp .paging_area .paging .pagination > a {min-width: 30px;height: 30px;margin: 0 1px;padding: 0 7px;font-size: 15px;line-height: 30px;border: 1px solid #999;border-radius: 3px;} #design #searchWp .paging_area .paging .pagination > a:hover {background-color: #00843d;color: #fff;border-color: #00843d;} #design #searchWp .paging_area .paging .pagination > .fp, #design #searchWp .paging_area .paging .pagination > .lp {min-width: auto;border-width: 0;padding: 0;word-spacing: -3px;} #design #searchWp .paging_area .paging .pagination > .fp {position: relative;margin-right: 10px;padding-right: 30px;} #design #searchWp .paging_area .paging .pagination > .lp {position: relative;margin-left: 10px;padding-left: 30px;} #design #searchWp .paging_area .paging .pagination > .fp::after, #design #searchWp .paging_area .paging .pagination > .lp::after {content: '';position: absolute;bottom: 0;width: 100%;height: 1px;background-color: #999;transition: all 0.4s;} #design #searchWp .paging_area .paging .pagination > .fp:hover, #design #searchWp .paging_area .paging .pagination > .lp:hover {background-color: transparent;color: #4e0080;font-weight: 700;} #design #searchWp .paging_area .paging .pagination > .fp::after {right: 0;} #design #searchWp .paging_area .paging .pagination > .lp::after {left: 0;} #design #searchWp .paging_area .paging .pagination > .fp:hover::after, #design #searchWp .paging_area .paging .pagination > .lp:hover::after {background-color: #4e0080;} #design #searchWp .paging_area .paging .pagination > .sel {background-color: #222;color: #fff;border-width: 0;} */ /* paging */ #design #searchWp .paging_area{padding:0 0 10px 0;text-align:center} #design #searchWp .paging_area *{margin:0;padding:0;border:0;list-style-type:none;font-size:13px} #design #searchWp .paging_area .paging{display: flex;padding:20px 0;align-items: center;justify-content: center;align-content: space-between;flex-wrap: wrap;height: 120px;} #design #searchWp .paging_area .paging span span{color:#2d4594;font-size:11px;display:none} #design #searchWp .paging_area .paging strong{display:block;margin:0 2px;width: 35px;height: 35px;line-height: 35px;font-weight:800;text-align:center;color: #fefefe;border: 1px solid #0f4fa5;border-radius: 20px;background-color: #0f4fa5;} #design #searchWp .paging_area .paging .num{display:inline-block;width: 35px;height: 35px;line-height: 35px;border-radius: 20px;margin: 0 2px;color:#888;border:1px solid #d5d5d5} #design #searchWp .paging_area .paging .num:hover{color:#fff;border:1px solid #0f4fa5;background:#0f4fa5} #design #searchWp .paging_area .total{text-align:right;margin:10px 0;font-size:14px;} #design #searchWp .paging_area span{line-height:35px;height:35px} #design #searchWp .paging_area .pprev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:0px solid #ccc} #design #searchWp .paging_area .prev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:1px solid #ccc} #design #searchWp .paging_area .next{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:1px solid #ccc} #design #searchWp .paging_area .nnext{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:0px solid #ccc} /* 상세페이지 */ #design #searchWp .view_detail {display: flex;} #design #searchWp .view_detail .img img {width: 100%;height: auto;border: 1px solid #eee;} #design #searchWp .view_detail .con p.title, #design #searchWp .view_detail .con h2.title {line-height: 1.4;font-weight: 400;color: #222;} #design #searchWp .view_detail .con p.title .field, #design #searchWp .view_detail .con h2.title .field {display: block;color: #757575;} #design #searchWp .view_detail .con .detail_list > li {display: flex;align-items: flex-start;} #design #searchWp .view_detail .con .detail_list > li > span {color: #222;} #design #searchWp .view_detail .con .detail_list > li > span.tit {position: relative;color: #757575;} #design #searchWp .view_detail .con .detail_list > li > span.tit::after {content:'';position: absolute;top: 50%;right: 0;width: 1px;background-color: #e7e7e7;transform: translateY(-50%);} #design #searchWp .view_detail .con .detail_list > li > span.qr_img img {border: 1px solid #222;} #design #searchWp .view_detail .con .con_type {margin-top: 30px;padding-top: 30px;border-top: 1px solid #eee;} #design #searchWp .view_detail .con .con_type > ul > li {display: table;width: 100%;} #design #searchWp .view_detail .con .con_type > ul > li > span {display: table-cell;vertical-align: middle;font-size: 15px;} #design #searchWp .view_detail .con .con_type > ul > li > span.tit {border: 1px solid #ddd;text-align: center;color: #757575;} #design #searchWp .view_detail .con .con_type > ul > li.keyword > span > a {display: inline-block;color: #222;} #design #searchWp .view_info .reserv_normal, #design #searchWp .view_info .reserv_loan {background-color: var(--subColor1);color: #fff !important;} #design #searchWp .view_info .reserv_imp {background-color: #efefef;color: var(--subColor1) !important;cursor: default;} #design #searchWp .view_info .mutual_pos {background: var(--colorOrange);color: #fff !important;} #design #searchWp .view_info .mutual_imp {background: #efefef;color: var(--colorOrange) !important;cursor: default;} #design #searchWp .view_info .reserv_less {background: #222;color: #fff;} #design #searchWp .view_info .btn_wrap .mid_btn::before {content: '';display: inline-block;vertical-align: middle;background-repeat: no-repeat;background-position: 50% 50%;} #design #searchWp .view_info .btn_wrap .btn_like::before {background-image: url(../img/ico_c_like.png);} #design #searchWp .view_info .btn_wrap .btn_list::before {background-image: url(../img/ico_c_list.png);} #design #searchWp .view_info .btn_wrap .btn_print::before {background-image: url(../img/ico_print.png);} #design #searchWp .view_info .btn_wrap .btn_marc::before {background-image: url(../img/ico_marc.png);background-size: auto 18px;} /*#design #searchWp .view_summary {border-bottom: 1px solid #eee;}*/ #design #searchWp .view_summary > p {line-height: 1.6;font-weight: 400;color: #222;} #design #searchWp .view_summary a.view_more {margin-top: 20px;padding: 10px 12px;} #design #searchWp .view_summary a.view_more > span {color: #6f6f6f;} #design #searchWp .book_slide {position: relative;} #design #searchWp .book_slide .slick-arrow {position: absolute;top: 50%;z-index: 1;background-color: rgba(0,0,0,0.8);text-indent: -9999px;transform: translateY(-50%);background-repeat: no-repeat;background-position: 50% 50%;} #design #searchWp .book_slide .slick-prev {left: 0;border-radius: 0 5px 5px 0;background-image: url(../img/arrow_w_prev.png);} #design #searchWp .book_slide .slick-next {right: 0;border-radius: 5px 0 0 5px;background-image: url(../img/arrow_w_next.png);} #design #searchWp .book_slide li > a {display: block;} #design #searchWp .tag_cloud #tagCloud {background-color: #f4f4f4;} /*marc*/ .marc {width: auto !important;margin: 20px;padding: 10px;float: none !important;} /* 대출베스트, 신착 검색바 영역 */ #design #searchWp .new-form-box, #design #searchWp .best_form { padding: 28px 32px; border: 1px solid #e6e8ec; border-radius: 16px; background: linear-gradient(135deg, rgba(51,121,231,.06) 0%, rgba(42,49,62,.03) 45%, #f7f8fa 100%); box-shadow: 0 10px 28px rgba(42, 49, 62, .04); } /* 신착도서 */ #design #searchWp .new_form {display: flex;margin-bottom: 20px;gap: 5px;flex-wrap: wrap;justify-content: space-between;} #design #searchWp .new_form select, #design #searchWp .new_form input[type="text"] {width: calc(20% - 15px);background-color: #fff;} #design #searchWp .new_form input[type="submit"] {border: 0;height: 40px;margin: 0;vertical-align: top;} #design #searchWp .new_form .new_period {display: inline-block;width: 30%;} #design #searchWp .new_form .new_period input[type="text"] {max-width: calc(100% - 150px);min-width: 130px;width: auto;margin-right: 5px;} #design #searchWp .new_form .txt {width: auto;line-height: 40px;font-size: 16px;} #design #searchWp .new-search-guide {margin-top: 10px;} /* 대출베스트 */ #design #searchWp .best_form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } #design #searchWp .best_form fieldset + fieldset {margin-top: 18px;} #design #searchWp .best_form .best_select_row {display: flex;flex-wrap: wrap;gap: 8px;} #design #searchWp .best_form .best_select select, #design #searchWp .best_form .best_select_row select { min-width: 180px; height: 44px; padding: 0 14px; border: 1px solid #d7dbe3; border-radius: 10px; background-color: #fff; font-size: 15px; transition: border-color .2s ease, box-shadow .2s ease; } #design #searchWp .best_form .best_select select:focus, #design #searchWp .best_form .best_select_row select:focus { border-color: var(--mainColor); box-shadow: 0 0 0 3px rgba(51,121,231,.15); outline: 0; } #design #searchWp .best_form .best_period_list, #design #searchWp .best_form .best_period { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } #design #searchWp .best_form .best_period_item, #design #searchWp .best_form .best_period > span { display: inline-flex; align-items: center; margin: 0; vertical-align: middle; } #design #searchWp .best_form .best_period_custom, #design #searchWp .best_form .best_period > span:last-child {margin-right: 0; flex-wrap: wrap; gap: 8px;} #design #searchWp .best_form .best_period input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; } #design #searchWp .best_form .best_period label { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid #d7dbe3; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 500; color: #3a4150; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } #design #searchWp .best_form .best_period input[type="radio"]:checked + label { border-color: var(--mainColor); background: var(--mainColor); color: #fff; } #design #searchWp .best_form .best_period input[type="radio"]:focus-visible + label { outline: 2px solid var(--mainColor); outline-offset: 2px; } #design #searchWp .best_form .best_period label:hover { border-color: var(--mainColor); transform: translateY(-1px); } #design #searchWp .best_form .best_period .add_form {display: inline-flex;align-items: center;gap: 6px;margin-left: 4px;} #design #searchWp .best_form .best_period .add_form input[type="text"] { width: 110px; height: 38px; border-radius: 10px; background: #fff; } #design #searchWp .best_content { margin-top: 56px; font-size: 0; } #design #searchWp .best_content .best_list { margin: 0; padding: 0; list-style: none; font-size: 0; } #design #searchWp .best_content .best_empty { margin: 40px 0; padding: 28px; border: 1px dashed #d7dbe3; border-radius: 14px; background: #fafbfc; color: #5b6575; font-size: 15px; text-align: center; } #design #searchWp .best_content .cont_wp { position: relative; display: inline-block; width: 50%; padding: 28px 0; vertical-align: top; font-size: 15px; border-top: 1px solid #eceff3; transition: background-color .2s ease; } #design #searchWp .best_content .cont_wp .best_item_body, #design #searchWp .best_content .cont_wp > div {display: flex;align-items: flex-start;} #design #searchWp .best_content .cont_wp .img { overflow: hidden; flex: 0 0 auto; border-radius: 12px; background-color: #f3f5f8; } #design #searchWp .best_content .cont_wp .img a {display: block;width: 100%;height: 100%;} #design #searchWp .best_content .cont_wp .img img { display: block; max-width: 100%; border: 0; box-sizing: border-box; transition: transform .35s ease; } /* 리스트형(13위~) */ #design #searchWp .best_content .cont_wp:not(.best_featured) { padding: 22px 18px; border-radius: 14px; border-top: 0; margin-bottom: 8px; } #design #searchWp .best_content .cont_wp:not(.best_featured):hover { background: #f7f9fc; } #design #searchWp .best_content .cont_wp:not(.best_featured) .img { width: auto; max-width: 180px; height: auto; background-color: transparent; } #design #searchWp .best_content .cont_wp:not(.best_featured) .img a {width: auto;height: auto;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img img { width: auto; max-width: 180px; height: auto !important; border-radius: 10px; } #design #searchWp .best_content .cont_wp:not(.best_featured):hover .img img { transform: translateY(-2px) scale(1.02); } #design #searchWp .best_content .cont_wp:not(.best_featured) .con { flex: 1 1 auto; width: auto; min-width: 0; padding: 4px 24px 0 28px; } /* 상위(featured) 카드 */ #design #searchWp .best_content .cont_wp.best_featured { padding: 0 16px 28px 0; border-top: 0; } #design #searchWp .best_content .cont_wp.best_featured .best_item_body, #design #searchWp .best_content .cont_wp.best_featured > div { display: block; height: 100%; padding: 16px; border: 1px solid #e7ebf1; border-radius: 18px; background: #fff; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; } #design #searchWp .best_content .cont_wp.best_featured:hover .best_item_body, #design #searchWp .best_content .cont_wp.best_featured:hover > div { transform: translateY(-4px); border-color: rgba(51,121,231,.35); box-shadow: 0 18px 36px rgba(26, 34, 48, .12); } #design #searchWp .best_content .cont_wp.best_featured .img { position: relative; width: 100%; height: 260px; border-radius: 14px; background: linear-gradient(180deg, #eef2f7 0%, #f8f9fb 100%); } #design #searchWp .best_content .cont_wp.best_featured .img a { display: flex; align-items: center; justify-content: center; } #design #searchWp .best_content .cont_wp.best_featured .img img { width: 100%; height: 100% !important; object-fit: contain; object-position: center center; } #design #searchWp .best_content .cont_wp.best_featured:hover .img img { transform: scale(1.04); } #design #searchWp .best_content .cont_wp.best_featured .con { width: 100%; padding: 18px 4px 4px; } /* 순위 뱃지 */ #design #searchWp .best_content .cont_wp > .number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; margin: 0 0 12px; padding: 0 10px; border-radius: 999px; background: #edf1f6; color: #2a313e; font-size: 13px; font-weight: 700; letter-spacing: .02em; line-height: 1; } #design #searchWp .best_content .cont_wp > .number em { font-style: normal; font-family: 'Paperlogy', 'suite', sans-serif; } #design #searchWp .best_content .cont_wp.best_featured > .number { position: absolute; top: 28px; left: 28px; z-index: 2; min-width: 48px; height: 48px; margin: 0; border-radius: 14px; background: rgba(255,255,255,.92); border: 1px solid rgba(26,34,48,.08); box-shadow: 0 8px 18px rgba(26,34,48,.12); font-size: 18px; backdrop-filter: blur(6px); } #design #searchWp .best_content .cont_wp.best_rank1 > .number { background: linear-gradient(145deg, #2a313e 0%, #1a2030 100%); border-color: transparent; color: #f4cb0a; } #design #searchWp .best_content .cont_wp.best_rank2 > .number { background: linear-gradient(145deg, #5b6578 0%, #3d4658 100%); border-color: transparent; color: #fff; } #design #searchWp .best_content .cont_wp.best_rank3 > .number { background: linear-gradient(145deg, #c9854a 0%, #a8672f 100%); border-color: transparent; color: #fff; } #design #searchWp .best_content .cont_wp.best_rank1 .best_item_body, #design #searchWp .best_content .cont_wp.best_rank1 > div { border-color: rgba(244,203,10,.35); } #design #searchWp .best_content .cont_wp .con p.book_name a { overflow: hidden; display: block; color: #1c2430; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; transition: color .2s ease; } #design #searchWp .best_content .cont_wp .con p.book_name a:hover, #design #searchWp .best_content .cont_wp .con p.book_name a:focus { color: var(--mainColor); } #design #searchWp .best_content .cont_wp .con > span {display: block;color: #5b6575;} #design #searchWp .best_content .cont_wp .con > span.writer {color: #7a8494;} #design #searchWp .best_content .cont_wp .con > span.library { display: inline-flex; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: #eef3fa; font-size: 1.6rem; } #design #searchWp .best_content .cont_wp .con .btn_like, #design #searchWp .best_content .cont_wp .con a.btn_like { display: inline-flex; align-items: center; margin-top: 14px; padding: 0 0 0 22px; border: 0; background-color: transparent; background-image: url(../img/ico_c_like.png); background-repeat: no-repeat; background-position: 0 50%; background-size: auto 14px; cursor: pointer; } #design #searchWp .best_content .cont_wp .con .btn_like:focus-visible { outline: 2px solid var(--mainColor); outline-offset: 2px; } /* 희망도서 */ #design #searchWp .hope_wrap .guide_txt {margin-bottom: 30px;font-size: 15px;color: #757575;} #design #searchWp .hope_wrap table .btn_search {padding-left: 30px !important;background-image: url(../img/ico_search_w.svg);background-repeat: no-repeat;background-position: 10px 50%;background-size: auto 15px;} #design #searchWp .hope_wrap .agree_wrap {display: flex;align-items: flex-start;} #design #searchWp .hope_wrap .agree_wrap label {height: auto;line-height: 1.2;word-break: keep-all;} #design #searchWp .hope_wrap .place_list {margin-top: 15px;} #design #searchWp .hope_wrap .place_list p.title {margin-bottom: 10px;font-size: 15px;font-weight: 400;color: #000;} #design #searchWp .hope_wrap .place_list ul li {position: relative;z-index: 0;padding-left: 8px;font-size: 13px;color: #555;} #design #searchWp .hope_wrap .place_list ul li::before {content: '';position: absolute;top: 5px;left: 0;width: 3px;height: 3px;border-radius: 50%;background-color: #555;} #design #searchWp .hope_wrap .place_list ul li + li {margin-top: 7px;} /**/ #design #searchWp .hope_form {margin-bottom: 30px;padding: 30px;background-color: #f4f4f4;} #design #searchWp .hope_form select, #design #searchWp .hope_form input[type="text"] {width: calc(24% - 15px);background-color: #fff;} #design #searchWp .hope_form input[type="submit"] {border: 0;height: 40px;margin: 0;vertical-align: top;} /**/ #bookSearch{padding:20px 10%;border-bottom:1px solid #777;background:#fff} #bookSearch *{margin:0;padding:0;list-style-type:none;font-size:14px;font-family:'NanumBarunGothic','dotum','돋움','gulim','굴림','Tahoma','sans-serif',Arial, Helvetica, sans-serif} #bookSearch div{position:relative;padding:5px;height:33px;border:2px solid #03a98f;background:#fff;border-radius:50px;box-sizing: content-box;} #bookSearch div:before, #bookSearch div:after{clear:both;display:table;content:"";line-height:0} #bookSearch div strong{float:left;display:block;width: 80px;font-size:12px;color:#2d4594;letter-spacing:-0px} #bookSearch div strong select{width: 100%;padding:5px;height:33px;border:0;text-indent:10px;background-color: transparent;} #bookSearch div input{float:left;padding:0 5px;width:calc(100% - 80px);height:33px;line-height:33px;font-size:15px;color:#333;border:0px solid #fff;background:#fff;} #bookSearch div input:focus{border:0px solid #e51a24} #bookSearch .btn-search{position:absolute;top:-2px;right:-3px;width:46px;height:46px;border:0;background:url(../img/btn_search.png) no-repeat 50% 50%;cursor:pointer;text-indent:-99999em} /**/ #bookSearchGuide{border-top:2px solid #eaeaea;background:#fff} #bookSearchGuide *{margin:0;padding:0;list-style-type:none;font-size:14px;font-family:'NanumBarunGothic','dotum','돋움','gulim','굴림','Tahoma','sans-serif',Arial, Helvetica, sans-serif} #bookSearchGuide h3{display:none} #bookSearchGuide dl{position:relative;padding:30px 120px 30px 100px;border-bottom:1px solid #ccc} #bookSearchGuide dt{font-size:17px;font-weight:600;padding-bottom:5px} #bookSearchGuide dd strong{position:relative;z-index:10;line-height:20px;font-size:14px;font-weight:400} #bookSearchGuide dd span{position:absolute;z-index:0;top:45%;right:5%;line-height:25px;font-size:20px;font-weight:500;color:#888;font-family:Arial, Helvetica, sans-serif} #bookSearchGuide .bookSearchGuide{padding:0 10px} #bookSearchGuide .r1{background:url(../img/hope1.png) no-repeat 20px 50%;} #bookSearchGuide .r2{background:url(../img/hope2.png) no-repeat 20px 50%} #bookSearchGuide .r3{background:url(../img/hope3.png) no-repeat 20px 50%} /**/ #bookSearchResult{position:relative;margin:10px} #bookSearchResult *{margin:0;padding:0;list-style-type:none;font-family:'NanumBarunGothic','dotum','돋움','gulim','굴림','Tahoma','sans-serif',Arial, Helvetica, sans-serif} #bookSearchResult h2{font-size:15px;font-weight:400} #bookSearchResult h2 strong{color:#0fb6ac} #bookSearchResult p{display:none} #bookSearchResult fieldset select {background-color: #fff;border: 0;} #bookSearchResult fieldset .view{padding:0 7px;color:#fff;border:2px solid #777;background:#777} /**/ #bookSearchList *{margin:0;padding:0;list-style-type:none;font-size:14px;font-family:'NanumBarunGothic','dotum','돋움','gulim','굴림','Tahoma','sans-serif',Arial, Helvetica, sans-serif} #bookSearchList ul{border-top:1px solid #777} #bookSearchList li{border-bottom:1px solid #e1e1e1} #bookSearchList li dl{position:relative;padding:0 60px 0 90px;height:132px;background:#fff;overflow:hidden} #bookSearchList li dt{position:absolute;top:10px;left:10px} #bookSearchList li dt img{width:80px;height:110px;border:1px solid #909090} #bookSearchList li dd strong{display:block;padding-bottom:10px;line-height:20px;font-size:14px;font-weight:600;white-space:nowrap;text-overflow:ellipsis;overflow:hidden} #bookSearchList li dd{padding:10px 20px} #bookSearchList li dd div{padding-bottom:10px;font-size:14px} #bookSearchList li dd p{margin-bottom:5px;height:54px;line-height:18px;font-size:12px;overflow:hidden} #bookSearchList li dd .detail{position:absolute;bottom:15px;right:20px;display:block;padding:7px;width:30px;font-size:13px;font-weight:600;text-align:center;color:#fff;border:1px solid #12917d;background:#12917d;border-radius:3px} #bookSearchList li dd .detail:hover{color:#fff;border:1px solid #333;background:#333} #bookSearchList li dd .entry{position:absolute;top:15px;right:20px;display:block;padding:7px;width:30px;font-size:13px;font-weight:600;text-align:center;color:#fff;border:1px solid #f44e1b;background:#f44e1b;border-radius:3px;box-sizing: content-box;} #bookSearchList li dd .entry:hover{color:#fff;border:1px solid #333;background:#333} #bookSearchList li dl:hover{background:#f9f9f9} #bookSearchList .sg_paging{padding: 20px 0 40px;} #bookSearchList .sg_paging .pagination{clear:both;text-align:center;} #bookSearchList .sg_paging .pagination span.sel {color:#fff;border:1px solid #044d97;display:inline-block;min-width: 17px;padding: 1px 3px;line-height: 20px;font-weight:bold;background:#1666b7;box-sizing: content-box;vertical-align: middle;font-size: 14px;text-align: center;} #bookSearchList .sg_paging .pagination a.pn{border:1px solid #cdcdcd;color:#585858;display:inline-block;min-width: 17px;text-decoration:none;vertical-align:middle;box-sizing: content-box;padding: 1px 3px;line-height: 20px;text-align: left;font-size: 14px;text-align: center;} #bookSearchList .sg_paging .pagination a.pn:hover{text-decoration:none;color:#585858} #bookSearchList .sg_paging .pagination img{vertical-align:middle} #bookSearchList .sg_paging .pagination .fp, #bookSearchList .sg_paging .pagination .lp {display: none;} #bookSearchList .sg_paging .pagination .pp, #bookSearchList .sg_paging .pagination .pb, #bookSearchList .sg_paging .pagination .np, #bookSearchList .sg_paging .pagination .nb {display: inline-block;width: 25px;height: 24px;text-indent: -9999px;background-repeat: no-repeat;background-position: 50% 50%;vertical-align: middle;} #bookSearchList .sg_paging .pagination .pb {background-image: url(../img/hope_paging_first.gif);} #bookSearchList .sg_paging .pagination .pp {background-image: url(../img/hope_paging_pre.gif);} #bookSearchList .sg_paging .pagination .np {background-image: url(../img/hope_paging_next.gif);} #bookSearchList .sg_paging .pagination .nb {background-image: url(../img/hope_paging_end.gif);} /*한줄서평*/ #oneBookReview {margin-top: 40px !important;} #oneBookReview > table {width: 100%;vertical-align: middle;border-top: 1px solid #ddd !important;} #oneBookReview > table::before {display: none} #oneBookReview > table * {word-break: break-all;} #oneBookReview > table thead th {padding: 15px 12px !important;background-color: #f6f3f9;text-align: center;font-size: 15px;color: #222;vertical-align: middle;} #oneBookReview > table tbody th, #oneBookReview > table tbody td {padding: 15px 12px !important;border: 0 !important;border-bottom: 1px solid #ddd !important;text-align: center;background-color: #fff;font-size: 15px;line-height: 1.4;color: #222;vertical-align: middle;} #oneBookReview .obr_writer {display: inline-block;font-size: 13px;color: #8919d0;} #oneBookReview .obr_date {display: inline-block;font-size: 13px;color: #757575;} #oneBookReview .obr_con {padding: 10px 0 0;line-height: 1.2em;} #oneBookReview .btn_my_area {padding-top: 10px;} #oneBookReview .icon_like_wp {font-size: 12px;font-weight: normal;} #oneBookReview .icon_like_wp .icon_like {display: inline-block;width: 15px;height: 18px;margin-right: 3px;text-indent: -99999em;background: url(../img/icon_obr_like.png) no-repeat center 40%;} #oneBookReview .btn {display: inline-block;height: auto;padding: 5px 8px 3px !important;border-radius: 30px;margin: 0 !important;font-size: 13px !important;line-height: 1em !important;} #oneReviewWrite {margin-top: 80px;} #oneReviewWrite .obr-form__body { display: flex; flex-direction: column; gap: 0; padding: 8px 12px; background-color: #f5f5f5; box-sizing: border-box; } #oneReviewWrite .obr-form__row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 8px; box-sizing: border-box; } #oneReviewWrite .obr-form__label { flex: 0 0 80px; width: 80px; padding-top: 6px; font-weight: 600; font-size: 15px; line-height: 1.4; color: #222; box-sizing: border-box; } #oneReviewWrite .obr-form__control { flex: 1 1 auto; min-width: 0; } #oneReviewWrite .obr-form__row--rating .obr-form__control { display: flex; align-items: center; min-height: 32px; } #oneReviewWrite .obr_write_area {display: flex;align-items: stretch;margin-bottom: 10px;padding-right: 20px;gap: 10px;} #oneReviewWrite .obr_write_area textarea { flex: 1 1 auto; width: auto; min-width: 0; min-height: 80px !important; box-sizing: border-box; resize: vertical; } #oneReviewWrite .obr_write_area .btn_all_area { display: flex; flex-direction: column; flex: 0 0 80px; width: 80px; margin-left: 0; gap: 2px; } #oneReviewWrite .obr_write_area .btn_all_area .btn_ok, #oneReviewWrite .obr_write_area .btn_all_area .btn_modify, #oneReviewWrite .obr_write_area .btn_all_area .btn_cancel { flex: 1 1 auto; width: 100%; min-height: 36px; box-sizing: border-box; padding: 0 10px; font-size: 14px; cursor: pointer; } #oneReviewWrite .obr_write_area .btn_all_area .btn_ok, #oneReviewWrite .obr_write_area .btn_all_area .btn_modify { border: 1px solid #00a54c !important; background: #00a54c; color: #fff !important; } #oneReviewWrite .obr_write_area .btn_all_area .btn_cancel { border: 1px solid #333 !important; background: #fff; color: #333 !important; } #oneReviewWrite .txt_count {margin: 0;text-align: right;font-size: 12px;line-height: 1.4;color: #757575;padding-right: 20px;} /********************************************* 반응형 *********************************************/ /* desktop */ @media (min-width: 1340px) { /**/ #design #searchWp select, #design #searchWp input[type="text"], #design #searchWp input[type="submit"], #design #searchWp input[type="button"] {max-width: 100%;border: 1px solid #ccc;font-family: inherit;color: #222;border-radius: 2px;} #design #searchWp select, #design #searchWp input[type="text"] {height: 40px;padding: 0 7px;} #design #searchWp input[type="radio"] {height: 20px; width:20px; padding: 0 7px;} #design #searchWp {max-width: 1240px;} #design #searchWp h3 {margin-bottom: 30px;font-size: 24px;font-weight: 500;color: var(--mainColor);} #design #searchWp h4 {margin-bottom: 25px;font-size: 20px;font-weight: 700;color: #222;} /* button */ #design #searchWp .btn_chk {padding: 20px 0 0;} #design #searchWp .btn_wrap {margin-top: 40px;} #design #searchWp .btn_chk + .btn_wrap {margin-top: 20px;padding-top: 30px;border-top: 1px solid #ddd;} #design #searchWp .btn {display: inline-block;height: auto;padding: 8px 10px;margin: 2px;font-size: 1.6rem;line-height: 1.2;} #design #searchWp .mid_btn {display: inline-block;min-width: 140px;height: auto;padding: 13px 15px;font-size: 15px;line-height: 1.2;font-weight: 400;} #design #searchWp .big_btn {display: inline-block;min-width: 180px;height: auto;padding: 22px 10px;font-size: 18px;line-height: 1.2;font-weight: 400;} #design #searchWp .input_wp {margin-left: 20px;} /* 상세검색 */ #design #searchWp .search_wrap .search_detail .search_detail_con {padding: 50px 60px 50px 50px;} /* 작은도서관 */ #design #searchWp .library_wrap .con .lib_search_btn {position: absolute;top: 10px;right: 0;} /* 이용안내 */ #design #searchWp .search_guide {margin-top: 60px;} /* 검색 리스트 */ #design #searchWp .search_set .btn {display: inline-block;height: 40px;margin: 0;padding: 0 7px;line-height: 40px;border-width: 1px;border-style: solid;background-repeat: no-repeat;background-position: 0 50%;font-size: 15px;} #design #searchWp .search_set span.set_select {flex: 0 0 300px;font-size: 0;} #design #searchWp .search_set span.set_btn {flex: 0 0 280px;} #design #searchWp .search_set .btn_insearch {flex: 1 1 30%;} #design #searchWp .search_set .btn_insearch input[type="text"] {max-width: 340px;} #design #searchWp .list_left {margin-right: 40px;} #design #searchWp .list_con {flex-grow: 1;width: calc(100% - 280px);} #design #searchWp .list_con > dl dd .book_btn > span a {display: inline-block;padding: 12px 10px;margin: 3px;font-size: 1.6rem;color: #fff;background-color: var(--subColor1);} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_imp {background: #efefef;color: var(--subColor1);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_pos {background: var(--colorOrange);} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_imp {background: #efefef;color: var(--colorOrange);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_less {background: #222;} #design #searchWp .list_con > dl dd ul{padding:15px 0px;display: flex;flex-wrap: wrap;max-width: 700px;flex-direction: column;} #design #searchWp .list_con > dl dd ul li{padding:3px 0;color:#555} #design #searchWp .list_con > dl dd ul li strong{padding:0 5px 0 10px;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li span{font-size: 1.6rem;color:var(--colorDarkgray);} #design #searchWp .list_con > dl dd ul li .con{padding: 3px 20px 0 10px;position: relative;word-break: break-all;line-height: 1.3em;} #design #searchWp .list_con > dl dd ul li .con em{padding:0 5px 0 0;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li .con em:before {content:'';display:block;position:absolute;left:0px;top:8px;background:#999;width:3px;height:3px} #design #searchWp .list_con > dl dd ul li .con .shelf-loc-006 {font-weight: 500;color: var(--colorBlue);} #design #searchWp .search_content {flex-grow: 1;width: calc(100% - 230px);} #design #searchWp.type_left .search_content {width: 100%;} #design #searchWp .search_aside {flex-shrink: 0;width: 180px;margin-left: 50px;border: 1px solid #222;} #design #searchWp .search_aside .aside3 .slider li img {width: 100%;} #design #searchWp.type_left .search_aside {display: flex;width: 100%;margin: 50px 0 0 0;} #design #searchWp.type_left .search_aside > div {width: calc(50% - 70px);border-top: 0;border-left: 1px solid #222;} #design #searchWp.type_left .search_aside > div:first-child {border-left: 0;} #design #searchWp.type_left .search_aside > div.aside1 {min-height: 330px;} #design #searchWp.type_left .search_aside > div.aside3 {width: 140px;border-right-width: 0;} /* 상세페이지 */ #design #searchWp .view_detail .img {width: 200px;margin-right: 50px;} #design #searchWp .view_detail .con {width: calc(100% - 250px);} #design #searchWp .view_detail .con p.title, #design #searchWp .view_detail .con h2.title {font-size: 24px;} #design #searchWp .view_detail .con p.title .field, #design #searchWp .view_detail .con h2.title .field {margin-bottom: 7px;font-size: 18px;} #design #searchWp .view_detail .con .detail_list {margin-top: 50px;} #design #searchWp .view_wrap > div + div {margin-top: 80px;} #design #searchWp .view_info .btn_wrap {margin-top: 40px;text-align: center;} #design #searchWp .view_info .btn_wrap .mid_btn {width: 24%;} #design #searchWp .view_info .btn_wrap .mid_btn::before {width: 22px;height: 20px;margin-right: 5px;} #design #searchWp .view_info .btn_wrap .btn_print::before {background-size: auto 18px;} /*#design #searchWp .view_summary {padding-bottom: 70px;}*/ #design #searchWp .view_detail .con .detail_list > li + li {margin-top: 15px;} #design #searchWp .view_detail .con .detail_list > li > span {width: calc(100% - 100px);} #design #searchWp .view_detail .con .detail_list > li > span.tit {width: 80px;margin-right: 20px;} #design #searchWp .view_detail .con .detail_list > li > span.tit::after {height: 12px;} #design #searchWp .view_detail .con .con_type > ul > li + li {margin-top: 5px;} #design #searchWp .view_detail .con .con_type > ul > li > span {width: calc(100% - 110px);padding-left: 20px;font-size: 15px;} #design #searchWp .view_detail .con .con_type > ul > li > span.tit {width: 110px;padding: 7px 0;font-size: 14px;} #design #searchWp .view_detail .con .con_type > ul > li.keyword > span > a {padding: 0 12px 0 0;} #design #searchWp .view_summary > p {font-size: 16px;text-align: justify;} #design #searchWp .view_summary a.view_more {font-size: 13px;} #design #searchWp .book_slide .slick-arrow {width: 50px;height: 50px;} #design #searchWp .book_slide li {margin: 0 10px;} #design #searchWp .book_slide li > a img {max-width: 100%;height: 250px;margin: auto;} /* 대출베스트 — 1~12위 카드(4열), 13위~ 리스트 */ #design #searchWp .best_content {margin-top: 64px;} #design #searchWp .best_content .cont_wp.best_featured {display: inline-block;width: 25%;padding: 0 20px 24px 0;box-sizing: border-box;} #design #searchWp .best_content .cont_wp.best_featured:nth-child(4n) {padding-right: 0;} #design #searchWp .best_content .cont_wp.best_featured .img {height: 280px;} #design #searchWp .best_content .cont_wp.best_featured > .number {top: 30px;left: 30px;} #design #searchWp .best_content .cont_wp:not(.best_featured) {width: 50%;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img {max-width: 180px;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img img {max-width: 180px;} #design #searchWp .best_content .cont_wp:not(.best_featured) .con {padding: 4px 40px 0 28px;} #design #searchWp .best_content .cont_wp .con p.book_name a {font-size: 1.8rem;} #design #searchWp .best_content .cont_wp.best_featured .con p.book_name a { display: -webkit-box; white-space: normal; max-height: 2.7em; font-size: 18px; line-height: 1.35em; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #design #searchWp .best_content .cont_wp .con > span {font-size: 1.6rem;} #design #searchWp .best_content .cont_wp .con > span.writer {padding: 8px 0 0;} #design #searchWp .best_content .cont_wp.best_featured .con > span.writer {padding: 10px 0 0;} #design #searchWp .best_content .cont_wp .con .btn_like {margin-top: 0px;} /* 희망도서 */ #design #searchWp .hope_wrap colgroup .th_width {width: 180px;} #design #searchWp .hope_wrap table td select {width: 25%;height: 36px;} #design #searchWp .hope_wrap table td input[type="text"] {width: 25%;} #design #searchWp .hope_wrap table td.full input[type="text"] {width: 80%;} #design #searchWp .hope_wrap table td.half input[type="text"] {width: 50%;} #design #searchWp .hope_wrap table td.multi input[type="text"] {width: 15%;max-width: 80px;vertical-align: middle;} #design #searchWp .hope_wrap .add_txt {display: inline-block;margin-left: 20px;color: #757575;} #design #searchWp .hope_wrap .agree_wrap {padding: 0 20px;margin: 40px 0 60px;} #design #searchWp .hope_wrap .agree_wrap input[type="checkbox"] {margin-right: 10px;} } /* tablet */ @media (max-width: 1339px) and (min-width: 841px) { #design #searchWp table thead th {padding: 20px 10px;font-size: 15px;} #design #searchWp table tbody th, #design #searchWp table tbody td {padding: 15px 10px;font-size: 14px;} /* table - tbody th 있는 버전 */ #design #searchWp table.tstyle2 tbody th {height: 46px;padding: 10px 20px;text-align: left;font-size: 15px;} #design #searchWp table.tstyle2 tbody td {height: 46px;padding: 10px 20px;border-left: 1px solid #ddd;border-right: 1px solid #ddd;} #myLib #dataLoanList .settype fieldset button {height: 34px;} #myLib #dataLoanList .settype.mylib_filter fieldset, #myLib #dataLoanList .settype.mylib_filter .filter_row { flex-wrap: wrap; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects, #myLib #dataLoanList .settype.mylib_filter .filter_row--keyword { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_item { flex: 0 1 auto; width: auto; min-width: var(--filter-select-min); max-width: var(--filter-select-max); max-width: min(var(--filter-select-max), 100%); } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_row--date { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; } #myLib #dataLoanList .settype.mylib_filter .filter_item--date { flex: 1 1 calc(50% - 18px); min-width: 0; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_row--keyword { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dce2ea; } #myLib #dataLoanList .settype.mylib_filter .filter_item--keyword { max-width: none; } /**/ #design #searchWp select, #design #searchWp input[type="text"], #design #searchWp input[type="submit"], #design #searchWp input[type="button"] {max-width: 100%;border: 1px solid #ccc;font-family: inherit;color: #222;border-radius: 2px;} #design #searchWp select, #design #searchWp input[type="text"] {height: 40px;padding: 0 7px;} #design #searchWp h3 {margin-bottom: 25px;font-size: 22px;font-weight: 500;} #design #searchWp h4 {margin-bottom: 20px;font-size: 18px;font-weight: 700;color: #222;} #design #searchWp .input_wp {margin-left: 15px;} /* button */ #design #searchWp .btn_chk {padding: 20px 0 0;} #design #searchWp .btn_wrap {margin-top: 40px;} #design #searchWp .btn_chk + .btn_wrap {margin-top: 20px;padding-top: 30px;border-top: 1px solid #ddd;} #design #searchWp .btn {display: inline-block;height: auto;padding: 8px 10px;margin: 2px;font-size: 1.6rem;} #design #searchWp .mid_btn {display: inline-block;width: auto;min-width: 130px;height: auto;padding: 13px 15px;font-size: 15px;line-height: 1.2;font-weight: 400;} #design #searchWp .big_btn {display: inline-block;width: auto;min-width: 160px;height: auto;padding: 20px 10px;font-size: 17px;line-height: 1.2;font-weight: 400;} /* 상세검색 */ #design #searchWp .search_wrap .search_detail .search_detail_con {padding: 30px 60px 30px 30px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl {font-size: 16px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.example {font-size: 15px;} /**/ #design #searchWp .search_result .search_sum {padding: 25px;} #design #searchWp .search_set {font-size: 14px;} #design #searchWp .search_set .btn {display: inline-block;height: 40px;margin: 0;padding: 0 7px;line-height: 40px;border-width: 1px;border-style: solid;background-repeat: no-repeat;background-position: 0 50%;font-size: 15px;} #design #searchWp .search_set > span {margin: 3px 0;} #design #searchWp .search_set span.set_select {flex: 0 0 230px;font-size: 0;} #design #searchWp .search_set select {max-width: 90px;font-size: 13px;} #design #searchWp .search_set span.set_btn {flex: 0 0 260px;} #design #searchWp .search_set span.set_btn .btn {padding: 0 7px !important;} #design #searchWp .search_set .btn {font-size: 14px;} #design #searchWp .search_set span.btn_insearch {flex: 1 1 32%;} #design #searchWp .library_wrap {margin-top: 50px;} #design #searchWp .library_wrap .con .lib_search_btn {position: absolute;top: 7px;right: 0;} #design #searchWp .library_wrap .con > div > div > span {width: 32%;margin: 5px 1%;font-size: 15px;} #design #searchWp .library_wrap .con > div > div > span:nth-child(3n-2) {margin-left: 0;} #design #searchWp .library_wrap .con > div > div > span:nth-child(3n) {margin-right: 0;} /* 이용안내 */ #design #searchWp .search_guide {margin-top: 40px;} #design #searchWp .container {display: block;} /*검색결과*/ #design #searchWp .list_left {width: 200px;margin-right: 30px;} #design #searchWp .list_left > dl dd a {font-size: 14px;} #design #searchWp .list_con {width: calc(100% - 260px);flex-grow: 1;} #design #searchWp .list_con > dl dt {max-width: 180px;margin-right: 20px;} #design #searchWp .list_con > dl dd {width: calc(100% - 210px);} #design #searchWp .list_con > dl dd .book_btn > span a {display: inline-block;padding: 10px 10px;margin: 3px;font-size: 14px;color: #fff;background-color: var(--subColor1);} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_imp {background: #efefef;color: var(--subColor1);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_pos {background: var(--colorOrange);} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_imp {background: #efefef;color: var(--colorOrange);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_less {background: #222;} #design #searchWp .list_con > dl dd p.book_name {font-size: 19px;} #design #searchWp .list_con > dl dd p.book_info > span {font-size: 14px;} #design #searchWp .list_con > dl dd p + p {margin-top: 20px;} #design #searchWp .list_con > dl dd p.book_condition {font-size: 14px;} #design #searchWp .list_con > dl dd ul{padding:15px 0px;display: flex;flex-wrap: wrap;max-width: 700px;flex-direction: column;} #design #searchWp .list_con > dl dd ul li{padding:0px 0;color:#555} #design #searchWp .list_con > dl dd ul li strong{padding:0 5px 0 10px;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li span{font-size: 1.5rem;color:var(--colorDarkgray);} #design #searchWp .list_con > dl dd ul li .con{padding: 3px 20px 3px 10px;position: relative;display: block;} #design #searchWp .list_con > dl dd ul li .con em{padding:0 5px 0 0;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li .con em:before {content:'';display:block;position:absolute;left:0px;top:8px;background:#999;width:3px;height:3px} #design #searchWp .list_con > dl dd ul li .con .shelf-loc-006 {font-weight: 500;color: var(--colorBlue);} #design #searchWp .search_aside {margin-top: 30px;} #design #searchWp.type_left .search_aside > div.aside1 {min-height: 330px;} #design #searchWp .search_aside .aside3 .slider li {text-align: center;} #design #searchWp .search_aside .aside3 .slider li img {max-width: 100%;height: 180px;margin: 0 auto;} /* 상호대차 신청 */ #resultBoxWrapper h3{font-size: 19px;} #resultBoxWrapper h4 {font-size: 16px;} #resultBoxWrapper table + h4 {margin-top: 20px;} #resultBoxWrapper .btn_check input[type="button"] {font-size: 15px;} /* table01 */ #resultBox .tstyle thead th {font-size: 14px;} #resultBox .tstyle tbody th{font-size: 13px;} #resultBox .tstyle tbody td{font-size: 13px;} /* 상세페이지 */ #design #searchWp .view_detail .img {width: 160px;margin-right: 40px;} #design #searchWp .view_detail .con {width: calc(100% - 200px);} #design #searchWp .view_detail .con p.title, #design #searchWp .view_detail .con h2.title {font-size: 22px;} #design #searchWp .view_detail .con p.title .field, #design #searchWp .view_detail .con h2.title .field {margin-bottom: 7px;font-size: 16px;} #design #searchWp .view_detail .con .detail_list {margin-top: 40px;} #design #searchWp .view_wrap > div + div {margin-top: 60px;} #design #searchWp .view_info .btn_wrap {margin-top: 30px;text-align: center;} #design #searchWp .view_info .btn_wrap .mid_btn::before {width: 20px;height: 18px;margin-right: 5px;} #design #searchWp .view_info .btn_wrap .btn_print::before {background-size: auto 17px;} #design #searchWp .view_detail .con .detail_list > li + li {margin-top: 15px;} #design #searchWp .view_detail .con .detail_list > li > span {width: calc(100% - 100px);font-size: 15px;} #design #searchWp .view_detail .con .detail_list > li > span.tit {width: 80px;margin-right: 20px;font-size: 15px;} #design #searchWp .view_detail .con .detail_list > li > span.tit::after {height: 12px;} #design #searchWp .view_detail .con .con_type > ul > li + li {margin-top: 5px;} #design #searchWp .view_detail .con .con_type > ul > li > span {width: calc(100% - 110px);padding-left: 20px;font-size: 15px;} #design #searchWp .view_detail .con .con_type > ul > li > span.tit {width: 110px;padding: 7px 0;font-size: 14px;} #design #searchWp .view_detail .con .con_type > ul > li.keyword > span > a {padding: 0 12px 0 0;} #design #searchWp .view_summary {padding-bottom: 50px;} #design #searchWp .view_summary > p {font-size: 15px;text-align: justify;} #design #searchWp .view_summary a.view_more {font-size: 13px;} #design #searchWp .book_slide .slick-arrow {width: 50px;height: 50px;background-size: auto 26px;} #design #searchWp .book_slide li {margin: 0 7px;} #design #searchWp .book_slide li > a img {max-width: 100%;height: 220px !important;margin: auto;} /* 대출베스트 — 태블릿: 상위 2열, 리스트 max 140 */ #design #searchWp .best_form {padding: 22px;} #design #searchWp .best_form .best_period_item {margin: 0;} #design #searchWp .best_content {margin-top: 48px;} #design #searchWp .best_content .cont_wp.best_featured {display: inline-block;width: 50%;padding: 0 14px 20px 0;box-sizing: border-box;} #design #searchWp .best_content .cont_wp.best_featured:nth-child(2n) {padding-right: 0;} #design #searchWp .best_content .cont_wp.best_featured .best_item_body {padding: 14px;} #design #searchWp .best_content .cont_wp.best_featured .img {height: 240px;} #design #searchWp .best_content .cont_wp.best_featured > .number {top: 26px;left: 26px;min-width: 44px;height: 44px;font-size: 16px;} #design #searchWp .best_content .cont_wp:not(.best_featured) {width: 50%;padding: 18px 12px;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img {max-width: 140px;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img img {max-width: 140px;} #design #searchWp .best_content .cont_wp:not(.best_featured) .con {padding: 2px 20px 0 18px;} #design #searchWp .best_content .cont_wp .con p.book_name a {font-size: 1.8rem;} #design #searchWp .best_content .cont_wp.best_featured .con p.book_name a { display: -webkit-box; max-height: 2.7em; font-size: 17px; line-height: 1.35em; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } #design #searchWp .best_content .cont_wp .con > span {font-size: 1.6rem;line-height: 1.35;} #design #searchWp .best_content .cont_wp .con > span.writer {padding: 8px 0 0;} #design #searchWp .best_content .cont_wp .con .btn_like {margin-top: 0px;} /* 희망도서 */ #design #searchWp .hope_wrap colgroup .th_width {width: 20%;} #design #searchWp .hope_wrap table td select {width: 30%;height: 36px;} #design #searchWp .hope_wrap table td input[type="text"] {width: 30%;} #design #searchWp .hope_wrap table td.full input[type="text"] {width: 80%;} #design #searchWp .hope_wrap table td.half input[type="text"] {width: 50%;} #design #searchWp .hope_wrap table td.multi input[type="text"] {width: 15%;max-width: 80px;vertical-align: middle;} #design #searchWp .hope_wrap .add_txt {display: block;margin-top: 10px;color: #757575;} #design #searchWp .hope_wrap .agree_wrap {padding: 0 20px;margin: 30px 0 50px;font-size: 15px;} #design #searchWp .hope_wrap .agree_wrap input[type="checkbox"] {margin-right: 7px;} } /****************************** 내서재 ******************************/ #myLib #dataLoanList .dataLoanListTab{margin:20px 0;border-bottom:0px solid #eaeaea} #myLib #dataLoanList .dataLoanListTab *{margin:0;padding:0;font-size:13px;border:0;list-style-type:none} #myLib #dataLoanList .dataLoanListTab li { min-width: 120px;} #myLib #dataLoanList .dataLoanListTab ul {display: flex;flex-wrap: wrap;} #myLib #dataLoanList .dataLoanListTab ul:before, #myLib #dataLoanList .dataLoanListTab ul:after{clear:both;display:table;content:"";line-height:0} #myLib #dataLoanList .dataLoanListTab ul li{float:left;margin-right: 5px;margin-bottom: 5px;} #myLib #dataLoanList .dataLoanListTab ul li:last-child{margin-right: 0px;} #myLib #dataLoanList .dataLoanListTab ul li a{display:block;text-align: center;position:relative;z-index:5;margin-left:-1px;padding: 12px 8px;font-size:16px;font-weight:400;color:#555;border:1px solid #bababa;border-radius: 10px;background:#fefefe;} #myLib #dataLoanList .dataLoanListTab ul li a:hover{position:relative;z-index:10;top:-0px;color:#fff;border:1px solid #0e4ea5;background:#0e4ea5} #myLib #dataLoanList .dataLoanListTab ul li.on a{position:relative;z-index:10;top:-0px;color:#fff;border:1px solid #0e4ea5;background:#0e4ea5} #myLib #dataLoanList .dataLoanListTab ul li:first-child a{margin-left:0} /* #myLib #dataLoanList .infomation{padding: 30px;color:#555;border:2px solid #0e4ea5;background-color: #fff;} #myLib #dataLoanList .infomation p {margin-bottom: 10px;font-size: 19px;font-weight:700;color:#2b3b56} #myLib #dataLoanList .infomation p strong{color:#000} #myLib #dataLoanList .infomation ul{padding-top:1px;overflow:hidden} #myLib #dataLoanList .infomation ul li {position: relative;float:left; min-width: 50%;padding: 4px 0 4px 10px;line-height:20px;font-size:15px;box-sizing: border-box;} #myLib #dataLoanList .infomation ul li::before {content: '';position: absolute;top: 13px;left: 0;width: 3px;height: 3px;background-color: #333;border-radius: 3px;} #myLib #dataLoanList .infomation ul li.end{margin-right:0} #myLib #dataLoanList .infomation ul li.long{} #myLib #dataLoanList .infomation ul li span.mem_num{color:#a28354} #myLib #dataLoanList .infomation ul li span.use_ok{color:#498bbf} #myLib #dataLoanList .infomation ul li span.use_no{color:#c14e33} */ #dataLoanList .infomation{margin:20px 0;padding:0 0 26px 110px;color:#555;background: #f6f6f6 url(../../wdDLSLE_V4/img/ico_member.png) no-repeat 0 50%;background-size: 70px;background-position: 20px;} #dataLoanList .infomation p{padding:30px 0 10px 0;font-size:16px;color:#2b3b56} #dataLoanList .infomation p strong{color:#000} #dataLoanList .infomation ul{display: flex;padding-top:1px;overflow:hidden;flex-wrap: wrap;} #dataLoanList .infomation ul li{display: block;position: relative;padding:0 0 5px 15px;margin-right:30px;line-height:20px;font-size:16px;} #dataLoanList .infomation ul li:before{content:"";display: inline-block;position: absolute;vertical-align: middle;top: 5px;left: 0px;width: 8px;height: 8px;border-radius:50%;background-color: #0e4ea5;} #dataLoanList .infomation ul li.end{margin-right:0} #dataLoanList .infomation ul li span.mem_num{color:#a28354} #dataLoanList .infomation ul li span.use_ok{color:#498bbf} #dataLoanList .infomation ul li span.use_no{color:#c14e33} #myLib #dataLoanList .notice{padding-bottom:50px} #myLib #dataLoanList .notice ul{overflow:hidden} #myLib #dataLoanList .notice li{margin:0 0 10px 0;font-size:15px;font-weight:300;color:#2b3b56} #myLib #dataLoanList .settype{position:relative;padding:10px 0;border-top:0px solid #888;border-bottom:0px solid #ccc;overflow:hidden} #myLib #dataLoanList .settype strong:first-child {padding-left:40px;} #myLib #dataLoanList .settype:before, #myLib #dataLoanList .settype:after{clear:both;display:table;content:"";line-height:0} #myLib #dataLoanList .settype h3{float:left;margin-bottom: 0;padding: 9px 0;font-size:16px;font-weight: 400;color: #222;} #myLib #dataLoanList .settype ul{float:right;overflow:hidden} #myLib #dataLoanList .settype li{float:left} #myLib #dataLoanList .settype li a{display:block;margin:0 0 0 5px;padding:5px 0;width:80px;font-size:12px;font-weight:400;letter-spacing:-1px;text-align:center;color:#405a89;border:1px solid #809ec3;background:#dbebff} #myLib #dataLoanList .settype li a:hover{border:1px solid #3d4f8b;background:#fff} #myLib #dataLoanList .settype form {float:right;padding:0;overflow:hidden;text-align: right;word-break: keep-all;} #myLib #dataLoanList .settype fieldset strong{display: inline-block;margin-right: 3px;padding-left: 5px;font-size:12px} #myLib #dataLoanList .settype fieldset select{display: inline-block;width: auto;margin-right: 3px;padding: 5px 10px;font-size:14px;border:1px solid #dbdbdb;background:#fff} #myLib #dataLoanList .settype fieldset input {display: inline-block;margin: 1px 3px 1px 0;padding: 5px 3px;font-size:13px;border:1px solid #dbdbdb;background:#fff} #myLib #dataLoanList .settype fieldset .input_wp {display: inline-block;margin: 1px 0;} #myLib #dataLoanList .settype fieldset input#searchTitle {width: 50%;max-width: 200px;} #myLib #dataLoanList .settype fieldset .input_wp input#searchTitle {width: 100%;max-width: 170px;} #myLib #dataLoanList .settype fieldset button{display: inline-block;padding: 0 10px;height: 40px;font-weight: 500;letter-spacing:-1px;color:#fff;background:#0e4ea5;vertical-align: middle;} /* 22-04-11 수정 #dataLoanList .settype fieldset select{display: inline-block;width: 20%;min-height: 30px;padding:5px 3px;font-size:12px;border:1px solid #dbdbdb;background:#fff;vertical-align: top;} #dataLoanList .settype fieldset input {display: inline-block;width: 30%;min-height: 18px;padding:5px 3px;font-size:12px;border:1px solid #dbdbdb;background:#fff;vertical-align: top;} #dataLoanList .settype fieldset button{display: inline-block;padding:0 10px;height: 30px;font-weight: 500;letter-spacing:-1px;color:#fff;background:#0e4ea5;vertical-align: top;}*/ #myLib #dataLoanList .settype fieldset span{/*float:left;*/display: inline-block;/*margin-right:3px;line-height:26px;*/font-size: 13px;color:#555} #myLib #dataLoanList .settype fieldset label{/*float:left;*/display: inline-block;/*margin-right:3px;line-height:26px;padding:0 0 0 10px*/font-size: 14px;font-weight: 600;} #myLib #dataLoanList .settype fieldset .t_text{/*float:left;*/display: inline-block;/*margin-right:3px;padding:0 3px;height:24px;line-height:24px;font-weight:800;*/border:1px solid #ccc} #myLib #dataLoanList .settype fieldset .t_text.w70 {width: 10%;} #myLib #dataLoanList .settype fieldset .btn{/*float:left;*/display: inline-block;padding:0 10px;font-size:13px;color:#fff;border:1px solid #111;background:#333} /* 내서재(마이페이지) 공통 검색폼 — .settype.mylib_filter 구조: .filter_row(--selects|--date|--keyword) > .filter_item(--date|--keyword|--submit) */ #myLib #dataLoanList .settype.mylib_filter { --filter-select-min: 88px; --filter-select-max: 220px; display: block; padding: 5px 0 20px; overflow: visible; } #myLib #dataLoanList .settype.mylib_filter h3 { float: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0 0 14px; padding: 0; font-size: 18px; font-weight: 600; } #myLib #dataLoanList .settype.mylib_filter h3 strong:first-child {padding-left: 0;} #myLib #dataLoanList .settype.mylib_filter h3 .result_count { font-size: 15px; font-weight: 400; color: #555; } #myLib #dataLoanList .settype.mylib_filter form { float: none; width: 100%; text-align: left; overflow: visible; } #myLib #dataLoanList .settype.mylib_filter fieldset { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; width: 100%; max-width: 100%; margin: 0; padding: 10px 16px; border: 1px solid #e5e8ee; border-radius: 12px; background: #f7f9fc; min-width: 0; box-sizing: border-box; } #myLib #dataLoanList .settype.mylib_filter .filter_row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } #myLib #dataLoanList .settype.mylib_filter .filter_row + .filter_row { margin: 0; padding: 0; border: 0; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects { flex: 1 1 auto; min-width: 0; max-width: 100%; } #myLib #dataLoanList .settype.mylib_filter .filter_row--keyword { flex: 1 1 220px; min-width: 0; max-width: 100%; } #myLib #dataLoanList .settype.mylib_filter .filter_item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0; max-width: 100%; box-sizing: border-box; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_item { flex: 0 1 auto; width: auto; min-width: var(--filter-select-min); max-width: var(--filter-select-max); max-width: min(var(--filter-select-max), 100%); } #myLib #dataLoanList .settype.mylib_filter .filter_row--date { flex-wrap: nowrap; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_row--date { flex: 1 1 240px; width: auto; min-width: 0; max-width: 100%; margin: 0; padding: 0; border: 0; align-self: flex-end; } #myLib #dataLoanList .settype.mylib_filter .filter_item--date { flex: 1 1 140px; min-width: 0; max-width: 200px; } #myLib #dataLoanList .settype.mylib_filter .calendar-conts { position: relative; width: 100%; } #myLib #dataLoanList .settype.mylib_filter .calendar-input { position: relative; z-index: 1; width: 100%; } .krds-calendar-area.krds-calendar-popup { position: fixed; z-index: 10050; width: auto; display: none; } .krds-calendar-area.krds-calendar-popup.active { display: block; } .krds-calendar-area.krds-calendar-popup .calendar-wrap { position: relative; top: 0; left: 0; bottom: auto; } .krds-calendar-area.krds-calendar-popup table, .krds-calendar-area.krds-calendar-popup th, .krds-calendar-area.krds-calendar-popup td { border: 0; background: transparent; } @media (max-width: 440px) { .krds-calendar-area.krds-calendar-popup .calendar-wrap { left: 0; width: min(38.4rem, calc(100vw - 24px)); } } #myLib #dataLoanList .settype.mylib_filter .calendar-input input.t_text, #myLib #dataLoanList .settype.mylib_filter .calendar-input .krds-input { width: 100% !important; max-width: none; height: 40px; padding: 0 40px 0 10px; box-sizing: border-box; } #myLib #dataLoanList .settype.mylib_filter .calendar-input .form-btn-datepicker { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 32px !important; min-width: 32px; height: 32px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; } #myLib #dataLoanList .settype.mylib_filter .calendar-input .form-btn-datepicker:focus, #myLib #dataLoanList .settype.mylib_filter .calendar-input .form-btn-datepicker:focus-visible { outline: 2px solid #256ef4; outline-offset: 2px; border-radius: 4px; } .krds-calendar-area.krds-calendar-popup .btn-set-date:focus, .krds-calendar-area.krds-calendar-popup .btn-set-date:focus-visible, .krds-calendar-area.krds-calendar-popup .btn-cal-move:focus, .krds-calendar-area.krds-calendar-popup .btn-cal-switch:focus, .krds-calendar-area.krds-calendar-popup .krds-btn:focus { outline: 2px solid #256ef4; outline-offset: 2px; } #myLib #dataLoanList .settype.mylib_filter .filter_item--keyword { flex: 1 1 auto; min-width: 0; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_item--submit { flex: 0 0 auto; max-width: none; align-self: flex-end; } #myLib #dataLoanList .settype.mylib_filter .filter_label_spacer { display: block; height: 1.2em; font-size: 13px; line-height: 1.2; visibility: hidden; pointer-events: none; } #myLib #dataLoanList .settype.mylib_filter .filter_sep { display: inline-flex; align-items: center; height: 40px; padding: 0 2px; color: #777; font-size: 14px; } #myLib #dataLoanList .settype.mylib_filter label { position: static; margin: 0; padding: 0; font-size: 13px; font-weight: 600; line-height: 1.2; color: #333; } #myLib #dataLoanList .settype.mylib_filter input.t_text { width: 100% !important; max-width: none; height: 40px; margin: 0; padding: 0 10px; box-sizing: border-box; border: 1px solid #dbdbdb; border-radius: 8px; background: #fff; font-size: 14px; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects select { display: block; width: max-content; min-width: var(--filter-select-min); max-width: var(--filter-select-max); max-width: min(var(--filter-select-max), 100%); height: 40px; margin: 0; padding: 0 32px 0 10px; box-sizing: border-box; border: 1px solid #dbdbdb; border-radius: 8px; background: #fff url('../../wdDLSLE_V4/img/ico_angle.svg') no-repeat right 10px center; background-size: 22px 20px; font-size: 14px; field-sizing: content; cursor: pointer; } #myLib #dataLoanList .settype.mylib_filter select.is-selected { background-color: #e8eefc; border-color: #9eb0d9; } #myLib #dataLoanList .settype.mylib_filter .filter_item--submit button, #myLib #dataLoanList .settype.mylib_filter .input_wp button { flex: 0 0 auto; width: auto; min-width: 72px; max-width: 120px; height: 40px; margin: 0; padding: 0 16px; border: 0; border-radius: 8px; cursor: pointer; } #myLib #dataLoanList .settype.mylib_filter .input_wp { display: flex; align-items: stretch; gap: 8px; width: 100%; margin: 0; } #myLib #dataLoanList .settype.mylib_filter .input_wp input.t_text, #myLib #dataLoanList .settype.mylib_filter .input_wp input#searchTitle { flex: 1 1 auto; width: auto !important; max-width: 200px; } #myLib #dataLoanList .settype.mylib_filter select:focus, #myLib #dataLoanList .settype.mylib_filter input.t_text:focus, #myLib #dataLoanList .settype.mylib_filter .filter_item--submit button:focus-visible, #myLib #dataLoanList .settype.mylib_filter .input_wp button:focus-visible { outline: 2px solid #0e4ea5; outline-offset: 2px; } #myLib #dataLoanList .dataLoanTable table{clear:both;border-collapse:collapse;width:100%;/* border-top:2px solid #888; */text-align:center} #myLib #dataLoanList .dataLoanTable th{padding:10px 10px;line-height:16px;font-size:14px;font-weight: 500;color:#333;/* border-bottom:1px solid #aaa; *//* background:#f7f7f7; */} #myLib #dataLoanList .dataLoanTable tr:first-child {border-top:0px;} #myLib #dataLoanList .dataLoanTable td{padding:5px 10px;line-height:15px;font-size:16px;color:#575757;border-bottom:1px solid #d3d3d3} #myLib #dataLoanList .dataLoanTable td a.btn, #myLib #dataLoanList .dataLoanTable td button.btn {font-size: 13px;} #myLib #dataLoanList .dataLoanTable td button.btn { appearance: none; display: inline-block; cursor: pointer; font-family: inherit; line-height: inherit; border: 0; vertical-align: middle; } #myLib #dataLoanList .dataLoanTable td a.btn:focus-visible, #myLib #dataLoanList .dataLoanTable td button.btn:focus-visible { outline: 2px solid #0e4ea5; outline-offset: 2px; } #myLib #dataLoanList .dataLoanTable td a:hover {color:var(--mainColor);font-weight:600;letter-spacing: -0.3px;} #myLib #dataLoanList .dataLoanTable td span.data_loan {display: block;font-size: inherit;padding: 3px 0;color: #333;font-weight: 500;} #myLib #dataLoanList .dataLoanTable td span.date_return {display: block;font-size: inherit;padding: 3px 0;font-weight: 500;color: #333;} #myLib #dataLoanList .dataLoanTable td span.return_state {display: block;font-size: inherit;padding: 3px 0;font-weight: 500;color: #333;} #myLib #dataLoanList .dataLoanTable td.chk_content > span {display: flex;align-items: center;} #myLib #dataLoanList .dataLoanTable td.chk_content > span input[type="checkbox"] {margin: 0 5px 0 0;} #myLib #dataLoanList .dataLoanTable td.chk_content > span label {height: auto;line-height: 1.4;} #design #myLib table.responsive .cell-th, #design #searchWp table.responsive .cell-th { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } #myLib #dataLoanList .enbloc {padding: 20px 0 0;} #myLib #dataLoanList .enbloc button {padding:0 10px;color:#fff;background:#777} #myLib #dataLoanList .enbloc button.exel{color:#3b873b;border:1px solid #ccc;background:#fff} #myLib #dataLoanList .enbloc a, #myLib #dataLoanList .enbloc button {display:inline-block;padding: 12px 20px;border:1px solid #ccc;background:#fff;font-size: 14px;line-height: 1;vertical-align: middle;font-weight: 500;color: #333;} #myLib #dataLoanList .enbloc .exel{color:#3b873b} #myLib #dataLoanList .enbloc .total{color:#366212} #myLib #dataLoanList .enbloc .del{color:#777} #myLib #dataLoanList .txt{padding:10px 0} #myLib #dataLoanList .txt li {padding-bottom:5px;color:#757575} #myLib #dataLoanList .txt li strong {color: #222;} #myLib #dataLoanList .dataLoanTable .orange {display: block !important;margin-top: 3px !important;color: #f00 !important;} #myLib #dataLoanList .btngroup .enbloc button {font-size: 12px;padding: 7px 10px;background-color: #333;color: #fff;border-width: 0;} #myLib #dataLoanList .btngroup .enbloc button + button {margin-left: 2px;} /**/ #myLib #search_bar01{background:#f5f6f1;height:22px;padding:9px 10px;position:relative;border:2px solid #e8e9e4;margin:27px 13px 5px} #myLib #search_bar01 .title{margin:0;padding:2px 4px 0 0;float:left;width:60px} #myLib #search_bar01 .title h2{margin:0;float:left;background:none} #myLib #search_bar01 .title p{padding:0 0 0 0;margin:7px 0 0;float:left} #myLib #search_bar01 .title p input{vertical-align:middle;padding:0} #myLib #search{float:left;width:422px;font-size:1.3em} #myLib .search_commend input{vertical-align:top;float:left} #myLib #result_box_wrapper p.pic{padding:20px 0;text-align:center} #myLib #result_box_wrap h3{padding:0 0 8px 3px;font-size:14px;color:#1b5b9d;background:none;border-bottom:3px solid #e4e4e4;width:575px} #myLib #result_box_wrap ul li{font-weight:normal;padding:3px 0 3px 20px;line-height:150%} #myLib #result_box{text-align:center;position:relative} #myLib #result_box_wrapper{text-align:left;padding-top:15px;margin:0 auto} #myLib #result_box_wrap h3{padding:0 0 8px 3px;font-size:14px;color:#1b5b9d;background:none;border-bottom:3px solid #e4e4e4;width:575px} #myLib #result_box_wrap ul li{font-weight:normal;padding:3px 0 3px 20px;line-height:150%} #myLib #result_box_wrapper p{line-height:150%;margin:0;padding:0;width:587px} #myLib #result_box_wrapper p.pic{padding:20px 0;text-align:center} #myLib #result_box_wrapper .output{position:absolute;right:20px;top:0} #myLib #result_box_wrap table td ul li {padding-left: 0;} #myLib div.search_list{position:relative;padding:15px;border-bottom:1px solid #d8d8d8;overflow:hidden} #myLib div.search_list .pic{float:left;position:relative;width:20%;height:96px} #myLib div.search_list .pic img{padding:2px;border:1px solid #d8d8d8} #myLib div.search_list .pic span.title{background:url("../img/common/group_title01.png") no-repeat scroll left bottom transparent;position:absolute;top:0px;left:0;height:57px;text-align:center;width:65px} #myLib div.search_list .pic span.title02 {background:url("../img/common/group_title02.png") no-repeat scroll left bottom transparent;position:absolute;top:0px;left:0;height:57px;text-align:center;width:65px} #myLib div.search_list .pic span.title03 {background:url("../img/common/group_title03.png") no-repeat scroll left bottom transparent;position:absolute;top:0px;left:0;height:57px;text-align:center;width:65px} #myLib div.search_list .pic span.title04 {background:url("../img/common/group_title04.png") no-repeat scroll left bottom transparent;position:absolute;top:0px;left:0;height:57px;text-align:center;width:65px} #myLib div.search_list .pic span.title05 {background:url("../img/common/group_title05.png") no-repeat scroll left bottom transparent;position:absolute;bottom:0px;padding-top:8px;left:0;height:26px;text-align:center;width:65px} #myLib div.search_list .pic span.title a, div.search_list .pic span.title02 a, div.search_list .pic span.title03 a, div.search_list .pic span.title04 a, div.search_list .pic span.title05 a {font-weight:bold;color:#fff} #myLib div.search_list .group_con {float:left;width:47px;margin:32px 20px 0 10px} #myLib div.search_list dl{float:left;width:80%} #myLib div.search_list dl *{color:#777} #myLib div.search_list dt{font-size:1em;font-weight:bold;margin:2px 0 9px 0;padding:0} #myLib div.search_list dd{font-size:0.92em;line-height:130%;margin:5px 0 0 0} #myLib div.search_list dd a{color:#216aaa} #myLib div.search_list dd.writer{color:#434343;font-weight:bold} #myLib .btn_basket{position:absolute;top:20px;right:20px} #myLib .sg_paging .paging{clear:both;text-align:center;padding:15px 0} #myLib .sg_paging .paging strong{color:#fff;border:1px solid #044d97;display:inline-block;font-weight:bold;height:22px;line-height:23px;text-align:center;vertical-align:middle;width:22px;background:#1666b7} #myLib .sg_paging .paging a.paging_num {background:url(../img/common/pg_bg.gif) repeat left top;border:1px solid #cdcdcd;color:#585858;display:inline-block;height:22px;line-height:23px;text-align:center;text-decoration:none;vertical-align:middle;width:22px} #myLib .sg_paging .paging a.paging_num:hover {text-decoration:none;color:#585858} #myLib .sg_paging .paging img{vertical-align:middle} #myLib .sg_paging .paging .prev{padding:0 7px 0 2px} #myLib .sg_paging .paging .next{padding:0 2px 0 5px} /* #myLib #paging{padding: 20px 0 0 0;overflow:hidden} #myLib #paging .total{float:left;color:#555;font-size: 14px;} #myLib #paging .total strong{padding:0 5px} #myLib #paging .paging{float:right;overflow:hidden} #myLib #paging .paging .num{float:left;display:block;margin:0 2px;padding:0 8px;height:20px;line-height:20px;text-align:center;color:#747d9d;border:1px solid #eee} #myLib #paging .paging .num:hover{color:#fff;border:1px solid #747d9d;background:#747d9d} #myLib #paging .paging .pn{float:left;display:block;margin: 0 2px;padding:0 8px;height:22px;font-size: 12px;line-height:20px;text-align:center;color:#747d9d;border:1px solid #ccc} #myLib #paging .paging .pn:hover{color:#fff;border:1px solid #747d9d;background:#747d9d} #myLib #paging .paging strong{float:left;display:block;margin:0 2px;padding:0 8px;height:22px;font-size: 12px;line-height:20px;font-weight: 500;text-align:center;color:#333;border:1px solid #ccc;background:#fff} #myLib #paging .paging span.sel {float:left;display:block;margin:0 2px;padding:0 8px;height:22px;font-size: 12px;line-height:22px;font-weight: 500;text-align:center;color:#fff;border-width: 0;background: #0e4ea5;} #myLib #paging .paging .pb{float:left;display:block;margin:0 1px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -0px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .pp{float:left;display:block;margin:0 1px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -22px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .np{float:left;display:block;margin:0 1px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -44px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .nb{float:left;display:block;margin:0 1px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -66px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .fp, #myLib #paging .paging .lp {display: none;} */ /**/ #myLib #paging{padding:0 0 10px 0;text-align:center} #myLib #paging *{margin:0;padding:0;border:0;list-style-type:none;font-size:13px} #myLib #paging .paging{display: flex;padding:20px 0;align-items: center;justify-content: center;flex-wrap: wrap;height: 120px;} #myLib #paging .paging span span{color:#2d4594;font-size:11px;display:none} #myLib #paging .paging strong{display:block;margin:0 2px;width: 35px;height: 35px;line-height: 35px;font-weight:800;text-align:center;color: #fefefe;border: 1px solid var(--colorOrange);border-radius: 20px;background-color: var(--colorOrange);} #myLib #paging .paging .num{display:inline-block;width: 35px;height: 35px;line-height: 35px;border-radius: 20px;margin: 0 2px;color:#888;border:1px solid #d5d5d5} #myLib #paging .paging .num:hover{color:#fff;border:1px solid #0f4fa5;background:#0f4fa5} #myLib #paging .total{text-align:left;margin:10px 0;font-size:14px;} #myLib #paging .pprev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:0px solid #ccc} #myLib #paging .prev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:1px solid #ccc} #myLib #paging .next{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:1px solid #ccc} #myLib #paging .nnext{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:0px solid #ccc} /**/ #myLib #searchBookList .listCheck{position:absolute;z-index:10;top: 12px;/*left:10px*/left: 0;} #myLib #searchBookList .divList .list{display:flex;position:relative;padding:15px 0;color:#555;border-bottom:1px dotted #aaa} #myLib #searchBookList .divList .list dl{position:relative;padding: 0 0 0 160px;} #myLib #searchBookList .divList .list dt{position:absolute;top:5px;/*left:30px;*/left: 22px;max-width: 120px;border:1px solid #ccc;box-shadow:2px 2px 0px #e8e8e8} #myLib #searchBookList .divList .list dt a img{width: 100%;} #myLib #searchBookList .divList .list dt a em{display:block;width:80px;height:114px;border:0px solid #e1e1e1;background:#fff url(../img/no_bk.png) no-repeat 50% 50%;background-size:cover;text-indent: -9999px;} #myLib #searchBookList .divList .list dt a .no-bk{background:#fff url(../img/no_bk.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-eb{background:#fff url(../img/no_eb.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-ab{background:#fff url(../img/no_ab.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-dv{background:#fff url(../img/no_dv.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-se{background:#fff url(../img/no_se.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-cd{background:#fff url(../img/no_cd.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-dd{background:#fff url(../img/no_cd.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-tp{background:#fff url(../img/no-tp.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt .label{position:absolute;top:-5px;left:5px} #myLib #searchBookList .divList .list dt .label img {height: 32px;} #myLib #searchBookList .divList .list dt .label-ab{top:50%;left:50%;display:block;margin:-26px 0 0 -26px;width:52px;height:52px;background:url(../img/label_audio.png) no-repeat} #myLib #searchBookList .divList .list dt .label-ab img{display:none !important} #myLib #searchBookList .divList .list dt .label-dv{top:50%;left:50%;display:block;margin:-26px 0 0 -26px;width:52px;height:52px;background:url(../img/label_dvd.png) no-repeat} #myLib #searchBookList .divList .list dt .label-dv img{display:none !important} #myLib #searchBookList .divList .list dt .loadr{display:none;position:absolute;left:30px;top:50px} #myLib #searchBookList .divList .list dd div strong{position:relative;top:-2px;padding:0 5px 0 25px;font-size:13px;font-weight:800;color:#999;border-right:0px solid #ccc} #myLib #searchBookList .divList .list dd div *{font-size:14px;font-weight: 400;} #myLib #searchBookList .divList .list dd div a {font-size: 16px;font-weight: 500;color: #222;} #myLib #searchBookList .divList .list dd div a:hover {color:var(--mainColor);font-weight:600;letter-spacing: -0.2px;} #myLib #searchBookList .divList .list dd div a span{color:#e35000} #myLib #searchBookList .divList .list dd .ico{background:url('../img/ico_books.png') no-repeat 0 0;white-space:normal;text-overflow:ellipsis;overflow:hidden} #myLib #searchBookList .divList .list dd .ico-bo{background-position:0 -0px} #myLib #searchBookList .divList .list dd .ico-eb{background-position:0 -25px} #myLib #searchBookList .divList .list dd .ico-ab{background-position:0 -50px} #myLib #searchBookList .divList .list dd .ico-dv{background-position:0 -75px} #myLib #searchBookList .divList .list ul{padding:5px} #myLib #searchBookList .divList .list ul li {margin: 2px 0;padding:4px 0;color:#555;font-size: 14px;} #myLib #searchBookList .divList .list ul li strong{padding:0 5px 0 0;font-weight:400;color:#888} #myLib #searchBookList .divList .list ul li span{color:#e35000} #myLib #searchBookList .divList .list ul li em{padding:0 10px;color:#ccc} #myLib #searchBookList .divList .list ol {margin-top: 10px;padding:0 5px;overflow:hidden} #myLib #searchBookList .divList .list ol li {float:left;padding-right:7px} #myLib #searchBookList .divList .list ol li.add_interest {clear: both;float: none;display: block;} #myLib #searchBookList .divList .list ol li strong{display:block;margin-bottom:5px;padding:4px 12px;font-size:13px;text-align:center;color:#777;border:1px solid #ccc;background:#fff;} #myLib #searchBookList .divList .list ol li strong.using2{color:#2d4594;border:1px solid #8993b3;background:#fff;font-weight: 400;} #myLib #searchBookList .divList .list ol li strong.using2.disallow {border-color: #eee;color: #757575;} #myLib #searchBookList .divList .list ol li a.reserv_imp, #myLib #searchBookList .divList .list ol li a.mutual_imp {padding: 5px 12px !important;background-color: #efefef;border-width: 0;color: #2d4594;cursor: default;} #myLib #searchBookList .divList .list ol li strong.using1{color:#999;border:1px solid #ccc;background:#f8f8f8;font-weight: 400;} #myLib #searchBookList .divList .list ol li a{display:block;margin-bottom:5px;padding:4px 12px;font-size:13px;font-weight: 400;text-align:center;color:#fff;border:1px solid #23377b;background:#2d4594;} #myLib #searchBookList .divList .list ol li.add_interest a{display: inline-block;padding-left: 25px;border: 0;color: #757575;background: #fff url('../img/ico_book_interest.png') no-repeat 0 7px / auto 15px;} #myLib #searchBookList .divList .list ol li a:hover{border:1px solid #3d4f8b;background-color:#465ba1} #myLib #searchBookList .divList .list ol li a.reserv_imp:hover, #myLib #searchBookList .divList .list ol li a.mutual_imp:hover {background-color: #efefef;border-width: 0;color: #2d4594;} #myLib #searchBookList .divList .list ol li.add_interest a:hover {background-color: #fff;border: 0;} #myLib #searchBookList .divList .list ol li.sec strong{margin-bottom:0;padding:7px 10px;font-size:10px;font-family:Arial, Helvetica, sans-serif;border:0px solid #eee;background:none} #myLib #searchBookList .divList .list .nonone{color:#555;border:1px solid #ccc;background:#f8f8f8} #myLib #searchBookList .divList .list .blue{color:#2d4594 !important} #myLib #searchBookList .divList .list .yellow{color:#aa6e39 !important} #myLib #searchBookList .divList .list .print{/*position:absolute;bottom:5px;right: 2px;*/margin-top: 5px;} #myLib #searchBookList .divList .list .print a{display:block;padding:0 0 0 27px;height:25px;line-height:25px;font-size:12px;color:#555;background:url('../img/ico_books.png') no-repeat 0 -100px} #myLib #searchBookList .divList .list .print a:hover{color:#333} /* mobile */ @media all and (max-width: 840px) { #oneReviewWrite {margin-top: 48px;} #oneReviewWrite .obr-form__body {padding: 10px;} #oneReviewWrite .obr-form__row { flex-direction: column; gap: 8px; padding: 10px 4px; } #oneReviewWrite .obr-form__label { flex: none; width: auto; padding-top: 0; font-size: 14px; } #oneReviewWrite .obr_write_area { flex-direction: column; align-items: stretch; padding-right: 0; gap: 10px; } #oneReviewWrite .obr_write_area textarea { width: 100%; min-height: 96px !important; } #oneReviewWrite .obr_write_area .btn_all_area { flex-direction: row; flex: none; width: 100%; gap: 8px; } #oneReviewWrite .obr_write_area .btn_all_area .btn_ok, #oneReviewWrite .obr_write_area .btn_all_area .btn_modify, #oneReviewWrite .obr_write_area .btn_all_area .btn_cancel { flex: 1 1 0; min-height: 44px; } #oneReviewWrite .txt_count {padding-right: 0;text-align: left;} #design #searchWp table thead th {padding: 15px 8px;font-size: 14px;} #design #searchWp table tbody th, #design #searchWp table tbody td {padding: 12px 8px;font-size: 13px;} /* table - thead tbody th 있는 버전 */ #design #searchWp table.tstyle1 tbody th, #design #searchWp table.tstyle1 tbody td {padding: 10px 12px;border: 1px solid #ddd;} /* table - tbody th 있는 버전 */ #design #searchWp table.tstyle2 tbody th {height: 40px;padding: 7px 15px;text-align: left;font-size: 14px;} #design #searchWp table.tstyle2 tbody td {height: 40px;padding: 7px 15px;border-left: 1px solid #ddd;border-right: 1px solid #ddd;} /* responsive - thead 있는 버전 */ #design #searchWp table.responsive {border-top: 0;} #design #searchWp table.responsive thead {overflow: hidden;position: absolute;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;padding: 0;} #design #searchWp table.responsive tbody tr {display: block;border-top: 1px solid #222;} #design #searchWp table.responsive tbody tr + tr {margin-top: 15px;} #design #searchWp table.responsive tbody td {display: flex;width: 100%;text-align: left;padding: 0;border-top-width: 0;} #design #searchWp table.responsive tbody td.bt-hide {display: none;} #design #searchWp table.responsive tbody td::before {content: attr(data-th);width: 80px;height: auto;padding: 10px;background-color: #f6f3f9;font-weight: 500;color: #222;} #design #searchWp table.responsive tbody td .bt-content {width: calc(100% - 80px);padding: 10px;} #contain #design #searchWp table.responsive tbody td:has(.cell-th)::before { display: none !important; content: none !important; } #contain #design #searchWp table.responsive .cell-th { position: static !important; display: flex !important; align-items: center; flex: 0 0 96px; width: 96px !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; border: 0 !important; background: #f6f3f9; color: #222; font-weight: 600; font-size: 13px; line-height: 1.4; box-sizing: border-box; } #contain #design #searchWp table.responsive tbody td:has(.cell-th) .bt-content { width: auto; flex: 1 1 auto; min-width: 0; padding: 10px 12px; } /**/ #design #searchWp select, #design #searchWp input[type="text"], #design #searchWp input[type="submit"], #design #searchWp input[type="button"] {max-width: 100%;border: 1px solid #ccc;font-family: inherit;color: #222;border-radius: 2px;} #design #searchWp select, #design #searchWp input[type="text"] {height: 36px;padding: 0 7px;} #design #searchWp input[type="radio"] {height: 18px; width:18px; padding: 0 7px;} #design #searchWp h3 {margin-bottom: 20px;font-size: 20px;font-weight: 500;} #design #searchWp h4 {margin-bottom: 15px;font-size: 17px;font-weight: 700;color: #222;} #design #searchWp .input_wp {margin-left: 7px;} /* button */ #design #searchWp .btn_chk {padding: 15px 0 0;} #design #searchWp .btn_wrap {margin-top: 30px;} #design #searchWp .btn_chk + .btn_wrap {margin-top: 15px;padding-top: 25px;border-top: 1px solid #ddd;} #design #searchWp .btn {display: inline-block;height: auto;padding: 8px 10px !important;margin: 2px;font-size: 13px;} #design #searchWp .mid_btn {display: inline-block;max-width: 50%;height: auto;padding: 10px 12px;font-size: 14px;line-height: 1.2;font-weight: 400;} #design #searchWp .big_btn {display: inline-block;width: 80%;height: auto;padding: 15px 20px;font-size: 16px;line-height: 1.2;font-weight: 400;} /* 검색창 */ #design #searchWp .search_wrap .search_top {display: flex; flex-wrap:wrap; gap:0 10px} #design #searchWp .search_wrap .search_top > :first-child{flex: 0 0 100%} #design #searchWp .search_wrap .search_top > :not(:first-child){flex: 1 1 0;min-width:0;} #design #searchWp .search_wrap .search_bar {margin-bottom: 10px;height: 55px;} #design #searchWp .search_wrap .search_bar select {width: 80px;padding: 0 10px;font-size: 14px;background-color: #fff;} #design #searchWp .search_wrap .search_bar select.cate{position:absolute;left:10px;width:80px;} #design #searchWp .search_wrap .search_bar input[type="text"] {width: calc(100% - 162px);margin: 0 0 0 100px;padding: 15px;height: 100%;border: 0;font-size: 18px;vertical-align: top;border-radius: 5px;} #design #searchWp .search_wrap .search_bar .search_btn {width: 62px;background-size: auto 26px;} #design #searchWp .search_wrap .search_lang, #design #searchWp .search_wrap .search_detail {display: inline-block;height: 50px;margin-left: 0;text-align: center;vertical-align: top;font-size: 1.6rem;} #design #searchWp .search_wrap .search_lang {margin-right: 0.8%;} #design #searchWp .search_wrap .search_detail {margin-left: 0;} #design #searchWp .search_wrap .auto_complete {top: 53px;} #design #searchWp .search_wrap .auto_complete .auto_list {height: 170px;padding: 15px;} #design #searchWp .search_wrap .auto_complete .auto_list > a {font-size: 13px;} /* 상세검색 */ #design #searchWp .search_wrap .search_detail .search_detail_con {padding: 20px;line-height: 1.4;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_type {padding: 15px 0;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_ex {margin: 15px 0;padding: 15px;font-size: 13px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl {display: flex;text-align: left;font-size: 14px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl:nth-child(n+7){width:100% !important;} #design #searchWp .search_wrap .search_detail .search_detail_con dl + dl {margin-top: 5px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dt {width: 75px;padding-right: 0;margin-bottom: 7px;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_type dl > dd > span {display: inline-block;min-width: 48%;margin: 0;} #design #searchWp .search_wrap .search_detail .search_detail_con .detail_input {margin-bottom: 20px;padding: 0 0 10px 0;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd .input_calc {padding-left: 8px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd.multi {display: block;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd .w50p {width: 100% !important;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd.multi .w50p input[type="text"] {width: calc(50% - 10px);} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.bar {width: 20px;} #design #searchWp .search_wrap .search_detail .search_detail_con dl > dd span.example {margin: 7px 0 0 0;font-size: 14px;} #design #searchWp .search_wrap .best_search {margin: 20px auto 0;} #design #searchWp .search_wrap .best_search > a {padding: 10px 15px;font-size: 13px;margin: 2px;} #design #searchWp .search_wrap .new_search {margin: 7px auto 0;} #design #searchWp .search_wrap .new_search > a {padding: 10px 15px;font-size: 13px;margin: 2px;} #design #searchWp .library_wrap {margin-top: 30px;} #design #searchWp .library_wrap .con > div {padding-top: 15px;} #design #searchWp .library_wrap .con .lib_search_btn {display: block;margin: 5px 0 0;font-size: 0;text-align: right;} #design #searchWp .library_wrap .con .lib_search_btn input[type="button"] {font-size: 12px;margin: 1px;} #design #searchWp .library_wrap .con > div > div > span {width: 49%;margin: 5px 1%;font-size: 14px;} #design #searchWp .library_wrap .con > div > div > span:nth-child(2n-1) {margin-left: 0;} #design #searchWp .library_wrap .con > div > div > span:nth-child(2n) {margin-right: 0;} #design #searchWp .library_wrap .more_slib {font-size: 14px;} /*다국어*/ #design #searchWp .search_top > .search_wrap {padding: 10px;} #design #searchWp .search_top > button {font-size: 14px;padding: 8px 16px;} #design #searchWp .search_top > .lang-option {font-size: 12px;padding: 8px 10px;} #design #searchWp .search_top > .char-box {font-size: 14px;padding: 8px;} #design #searchWp .search_top > .layer {top:64px;} /**/ #design #searchWp .search_top .btn_delete {position: absolute;top: 11px;right: 80px;width: 30px;height: 30px;z-index: 7} #design #searchWp .search_top .input_txt_del {display: inline-block;background-repeat: no-repeat;width: 18px;height: 18px;} #design #searchWp .search_top .input_txt_del::before {content: "";background-image: url('../../wdDLSLE_V4/img/input_txt_delete.png');background-repeat: no-repeat;background-size: 24px;position: absolute;left: 10px;top: 52%;transform: translateY(-50%);width: 30px;height: 30px;} #design #searchWp .search_top .blind {position: absolute;clip: rect(0 0 0 0);width: 1px;height: 1px;margin: -1px;overflow: hidden;} /* 이용안내 */ #design #searchWp .search_guide {margin-top: 30px;} /**/ #design #searchWp .search_result .search_sum {padding: 25px 20px;} #design #searchWp .search_result .search_sum > strong {display: block;margin-bottom: 15px;font-size: 16px;} #design #searchWp .search_result .search_sum > span {display: block;margin-left: 0;word-break: keep-all;font-size: 14px;} #design #searchWp .search_result .search_sum > span + span {margin-top: 10px;} /**/ #design #searchWp .container {display: block;} #design #searchWp .search_set .btn {display: inline-block;height: 36px;margin: 0;padding: 0 7px;line-height: 36px;border-width: 1px;border-style: solid;background-repeat: no-repeat;background-position: 0 50%;font-size: 15px;} #design #searchWp .search_set > span {width: 100%;font-size: 13px;} #design #searchWp .search_set > span.set_select {order: 1;} #design #searchWp .search_set > span.set_btn {position: relative;order: 3;padding-left: 20px;} #design #searchWp .search_set .set_btn input[type="checkbox"] {position: absolute;top: 50%;left: 0;width: 13px;height: 13px;transform: translateY(-50%);} #design #searchWp .search_set > span.btn_insearch {max-width: 500px;order: 2;} #design #searchWp .search_set > span + span {margin-top: 7px;} #design #searchWp .search_set > span + span.set_btn {margin-top: 12px;} #design #searchWp .search_set .btn {padding: 0 7px !important;font-size: 13px;margin: 1px 0;} #design #searchWp .search_set .btn.btn_like::before {background-size: auto 16px;margin-right: 3px;} #design #searchWp .search_set .btn.btn_excel::before {background-size: auto 22px;} #design #searchWp .search_set .btn.btn_category {display: inline-block;border-color: #757575;color: #757575;} #design #searchWp .search_list {display: block;} #design #searchWp .search_list .list_left {display: none;overflow-y: auto;position: fixed;top: 0;left: -240px;width: 220px;height: 100%;z-index: 999;padding: 20px;background-color: #fff;box-shadow: 5px 5px 15px rgba(0,0,0,0.1);} #design #searchWp .list_left > dl {padding: 15px 0;} #design #searchWp .list_left > dl:first-child {padding-top: 10px;} #design #searchWp .list_left > dl:last-child {border-bottom: 0;padding-bottom: 0;} #design #searchWp .list_left > dl dt {font-size: 15px;} #design #searchWp .list_left > dl dd a {font-size: 13px;} #design #searchWp .list_left > dl dd a.more {margin-top: 5px;} #design #searchWp .list_left a.close_btn {display: block;position: absolute;top: 0;right: 0;width: 40px;height: 40px;background-color: #333;background-image: url(../img/ico_w_close.png);background-repeat: no-repeat;background-position: 50% 50%;background-size: auto 20px;text-indent: -9999px;} #design #searchWp .search_list .list_con {width: 100%;} #design #searchWp .list_con > dl dt {width: 130px;padding-left: 20px;margin-right: 20px;} #design #searchWp .list_con > dl dt input[type="checkbox"] {top: 0;left: 0;width: 13px;height: 13px;} #design #searchWp .list_con > dl dt .book-img-area {display:flex; gap:10px; flex-direction: column-reverse;} #design #searchWp .list_con > dl dt img {width: 100%;height: auto;max-height: none;} #design #searchWp .list_con > dl dd {width: calc(100% - 160px);} #design #searchWp .list_con > dl dd p.book_name {font-size: 17px;} #design #searchWp .list_con > dl dd p + p {margin-top: 15px;} #design #searchWp .list_con > dl dd p.book_info > span {display: block;padding: 0 0 0 12px;font-size: 14px;} #design #searchWp .list_con > dl dd p.book_info > span::after {top: 10px;left: 0;right: auto;width: 4px;height: 4px;border-radius: 4px;background-color: #222;} #design #searchWp .list_con > dl dd p.book_info > span + span {margin-top: 7px;} #design #searchWp .list_con > dl dd p.book_condition {font-size: 13px;} #design #searchWp .list_con > dl dd .book_btn {margin-top: 15px;} #design #searchWp .list_con > dl dd .book_btn > span {margin-top: 5px;} #design #searchWp .list_con > dl dd .book_btn > span a {display: inline-block;height: 100%;padding: 10px;margin: 2px;font-size: 1.6rem;color: #fff;background-color: var(--subColor1);} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_imp {background: #efefef;color: var(--subColor1);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_pos {background: var(--colorOrange);} #design #searchWp .list_con > dl dd .book_btn > span a.mutual_imp {background: #efefef;color: var(--colorOrange);cursor: default;} #design #searchWp .list_con > dl dd .book_btn > span a.reserv_less {background: #222;} #design #searchWp .list_con > dl dd .book_btn > span a.btn {padding: 3px 10px 3px 20px !important;background-size: auto 15px;} #design #searchWp .list_con > dl dd ul{padding:15px 0px;display: flex;flex-wrap: wrap;max-width: 700px;flex-direction: column;} #design #searchWp .list_con > dl dd ul li{padding:0px 0;color:#555} #design #searchWp .list_con > dl dd ul li strong{padding:0 5px 0 10px;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li span{font-size: 1.6rem;color:var(--colorDarkgray);} #design #searchWp .list_con > dl dd ul li .con{padding: 3px 20px 0px 10px;position: relative;display: block;line-height: 1.3em;} #design #searchWp .list_con > dl dd ul li .con em{padding:0 5px 0 0;font-weight:400;color:#888} #design #searchWp .list_con > dl dd ul li .con em:before {content:'';display:block;position:absolute;left:0px;top:8px;background:#999;width:3px;height:3px} #design #searchWp .list_con > dl dd ul li .con .shelf-loc-006 {font-weight: 500;color: var(--colorBlue);} /**/ #design #searchWp .search_aside {margin-top: 20px;} #design #searchWp .search_aside .aside1 {min-height: 325px;} #design #searchWp .search_aside .aside3 .slider li {text-align: center;} #design #searchWp .search_aside .aside3 .slider li img {max-width: 100%;height: 150px !important;margin: 0 auto;} /* 상호대차 신청 */ #resultBox {padding: 15px;} #resultBoxWrapper h3{padding-bottom: 5px;margin-bottom: 12px;font-size: 16px;border-bottom: 1px solid #1b5b9d;} #resultBoxWrapper h4 {margin-bottom: 8px;font-size: 15px;font-weight: 500;color: #333;} #resultBoxWrapper table + h4 {margin-top: 15px;} #resultBoxWrapper .btn_check{text-align: center;padding: 15px 0 0;} #resultBoxWrapper .btn_check input[type="submit"] {padding: 10px 20px;background-color: #0a3085;color: #fff;} #resultBoxWrapper #interTxt {padding: 12px;margin-top: 15px;background-color: #f8f8f8;border-top: 2px solid #5bade2;} /* table01 */ #resultBox .tstyle::before {height: 1px;} #resultBox .tstyle thead th {padding: 10px 5px;font-size: 13px;} #resultBox .tstyle tbody th{padding: 3px;font-size:13px;} #resultBox .tstyle tbody td{padding: 10px 7px;font-size: 13px;} #resultBox .tstyle tbody select {padding: 5px;border: 1px solid #ddd;} /* paging */ #design #searchWp .paging_area {padding: 15px;margin-top: 30px;} #design #searchWp .paging_area .paging .pagination > span, #design #searchWp .paging_area .paging .pagination > a {min-width: 25px;height: 25px;margin: 1px;padding: 0 5px;font-size: 12px;line-height: 25px;border: 1px solid #999;border-radius: 2px;} #design #searchWp .paging_area .paging .pagination > .fp, #design #searchWp .paging_area .paging .pagination > .lp {width: 100%;margin: 0;padding: 0;text-decoration: underline;} #design #searchWp .paging_area .paging .pagination > .fp {margin-bottom: 5px;} #design #searchWp .paging_area .paging .pagination > .lp {margin-top: 5px;} #design #searchWp .paging_area .paging .pagination > .fp::after, #design #searchWp .paging_area .paging .pagination > .lp::after {display: none;} /* 상세페이지 */ #design #searchWp .view_detail {display: block;} #design #searchWp .view_detail .img {display: flex;margin-bottom: 20px;text-align: center;justify-content: center;} #design #searchWp .view_detail .img img {display: block;width: auto;max-width: 220px;min-width: 100px;} #design #searchWp .view_detail .con p.title, #design #searchWp .view_detail .con h2.title {font-size: 19px;} #design #searchWp .view_detail .con p.title .field, #design #searchWp .view_detail .con h2.title .field {margin-bottom: 7px;font-size: 15px;} #design #searchWp .view_detail .con .detail_list {margin-top: 20px;} #design #searchWp .view_wrap > div + div {margin-top: 40px;} #design #searchWp .view_info .btn_wrap {margin-top: 20px;text-align: center;} #design #searchWp .view_info .btn_wrap .mid_btn {margin: 3px 0;font-size: 13px;} #design #searchWp .view_info .btn_wrap .mid_btn::before {width: 18px;height: 15px;margin-right: 5px;background-size: auto 100%;} #design #searchWp .view_info .btn_wrap .btn_list::before {background-size: auto 85%;} #design #searchWp .view_detail .con .detail_list > li + li {margin-top: 15px;} #design #searchWp .view_detail .con .detail_list > li > span {width: calc(100% - 85px);font-size: 16px;} #design #searchWp .view_detail .con .detail_list > li > span.tit {width: 70px;padding-right: 10px;margin-right: 15px;font-size: 16px;} #design #searchWp .view_detail .con .detail_list > li > span.tit::after {top: 7px;height: 10px;} #design #searchWp .view_detail .con .detail_list > li.qr-scrn {display:none;} #design #searchWp .view_detail .con .con_type {padding-top: 20px;margin-top: 20px;} #design #searchWp .view_detail .con .con_type > ul > li + li {margin-top: 5px;} #design #searchWp .view_detail .con .con_type > ul > li > span {width: calc(100% - 90px);padding-left: 15px;font-size: 14px;} #design #searchWp .view_detail .con .con_type > ul > li > span.tit {width: 90px;padding: 7px 0;font-size: 13px;} #design #searchWp .view_detail .con .con_type > ul > li.keyword > span > a {padding: 3px 12px 3px 0;} #design #searchWp .view_summary {padding-bottom: 30px;} #design #searchWp .view_summary > p {font-size: 13px;text-align: justify;} #design #searchWp .view_summary a.view_more {font-size: 12px;} #design #searchWp .book_slide .slick-arrow {width: 40px;height: 40px;background-size: auto 18px;} #design #searchWp .book_slide li {margin: 0 5px;} #design #searchWp .book_slide li > a img {max-width: 100%;height: 150px !important;margin: auto;} /* 신착도서 */ #design #searchWp .new_form {padding: 0px;background-color: #f4f4f4;} #design #searchWp .new_form select, #design #searchWp .new_form input[type="text"] {width: calc(48% - 4px);margin: 2px 0;background-color: #fff;} #design #searchWp .new_form input[type="submit"] {border: 0;height: 36px;margin: 2px 0;vertical-align: top;} #design #searchWp .new_form .new_period {display: inline-block;} /* 대출베스트 */ #design #searchWp .best_form {padding: 16px;border-radius: 14px;background: linear-gradient(135deg, rgba(51,121,231,.06) 0%, #f7f8fa 100%);} #design #searchWp .best_form fieldset + fieldset {margin-top: 14px;} #design #searchWp .best_form .best_select_row select {min-width: 0;width: calc(50% - 4px);height: 40px;margin: 2px 0;} #design #searchWp .best_form .best_period label {min-height: 34px;padding: 0 12px;font-size: 13px;} #design #searchWp .best_form .best_period_item {display: inline-flex;min-width: auto;margin: 0;} #design #searchWp .best_form .best_period_custom {width: 100%;} #design #searchWp .best_form .best_period .add_form {display: inline-flex;margin-left: 0;} #design #searchWp .best_form .best_period .add_form input[type="text"] {width: 88px;max-width: 40%;height: 34px;} #design #searchWp .best_content {margin-top: 28px;font-size: 0;} #design #searchWp .best_content .cont_wp, #design #searchWp .best_content .cont_wp.best_featured, #design #searchWp .best_content .cont_wp:not(.best_featured) { display: block; width: 100%; padding: 14px; margin: 0 0 10px; border-radius: 14px; border: 1px solid #e8ecf2; background: #fff; box-shadow: none; box-sizing: border-box; } #design #searchWp .best_content .cont_wp.best_featured .best_item_body, #design #searchWp .best_content .cont_wp.best_featured > div { display: flex; gap: 20px; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; } #design #searchWp .best_content .cont_wp.best_featured:hover .best_item_body, #design #searchWp .best_content .cont_wp.best_featured:hover > div { transform: none; box-shadow: none; border-color: transparent; } #design #searchWp .best_content .cont_wp .best_item_body, #design #searchWp .best_content .cont_wp > div {display: flex;align-items: flex-start;} #design #searchWp .best_content .cont_wp:not(.best_featured) .img, #design #searchWp .best_content .cont_wp.best_featured .img { width: auto; max-width: 140px; height: auto; background: transparent; box-shadow: 0 6px 14px rgba(26,34,48,.1); } #design #searchWp .best_content .cont_wp:not(.best_featured) .img a, #design #searchWp .best_content .cont_wp.best_featured .img a { display: block; width: auto; height: auto; } #design #searchWp .best_content .cont_wp:not(.best_featured) .img img, #design #searchWp .best_content .cont_wp.best_featured .img img { width: auto; max-width: 140px; height: auto !important; object-fit: unset; border-radius: 10px; } #design #searchWp .best_content .cont_wp > .number, #design #searchWp .best_content .cont_wp.best_featured > .number { position: static; min-width: 36px; height: 28px; margin: 0 0 10px; border-radius: 999px; font-size: 13px; box-shadow: none; backdrop-filter: none; } #design #searchWp .best_content .cont_wp .con { flex: 1 1 auto; width: auto; min-width: 0; padding: 0 0 0 14px; } #design #searchWp .best_content .cont_wp .con p.book_name a, #design #searchWp .best_content .cont_wp.best_featured .con p.book_name a { display: block; max-height: none; font-size: 1.8rem; white-space: nowrap; -webkit-line-clamp: unset; } #design #searchWp .best_content .cont_wp .con > span {font-size: 1.5rem;} #design #searchWp .best_content .cont_wp .con > span.writer {padding: 6px 0 0;} #design #searchWp .best_content .cont_wp .con > span.library {margin-top: 6px;font-size: 14px;} #design #searchWp .best_content .cont_wp .con .btn_like, #design #searchWp .best_content .cont_wp .con a.btn_like {margin-top: 10px;padding: 0 0 0 18px !important;background-size: auto 12px;} /* 희망도서 */ #design #searchWp .hope_wrap colgroup .th_width {width: 30%;min-width: 80px;} #design #searchWp .hope_wrap table td select {min-width: 120px;width: 50%;height: 32px;} #design #searchWp .hope_wrap table td input[type="text"] {width: 50%;} #design #searchWp .hope_wrap table td.full input[type="text"] {width: 100%;} #design #searchWp .hope_wrap table td.half input[type="text"] {width: 80%;} #design #searchWp .hope_wrap table td.multi input[type="text"] {width: 25%;max-width: 80px;vertical-align: middle;} #design #searchWp .hope_wrap .add_txt {display: block;margin-top: 5px;color: #757575;} #design #searchWp .hope_wrap .agree_wrap {display: flex;padding: 0 15px;margin: 20px 0 35px;font-size: 14px;line-height: 1.2;align-items: flex-start;} #design #searchWp .hope_wrap .agree_wrap input[type="checkbox"] {margin-right: 5px;} #design #searchWp .hope_form {padding: 20px;background-color: #f4f4f4;} #design #searchWp .hope_form select, #design #searchWp .hope_form input[type="text"] {width: calc(48% - 26px);margin: 2px 0;background-color: #fff;} #design #searchWp .hope_form input[type="submit"] {border: 0;height: 36px;margin: 2px 0;vertical-align: top;} /* table */ #design #myLib table.responsive {border-top: 0;} #contain #design #myLib table.responsive thead { display: table-header-group !important; position: absolute !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; } #contain #design #myLib table.responsive colgroup {display: none;} #contain #design #myLib table.responsive, #contain #design #myLib table.responsive tbody {display: block;width: 100%;} #contain #design #myLib table.responsive tbody tr { display: block !important; margin: 0 0 12px; padding: 0 !important; overflow: hidden; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; } #contain #design #myLib table.responsive tbody tr + tr {margin-top: 0;} #contain #design #myLib table.responsive tbody th, #contain #design #myLib table.responsive tbody td, #contain #design #myLib table.responsive tbody tr:first-child th, #contain #design #myLib table.responsive tbody tr:first-child td { display: flex !important; align-items: stretch; clear: none; width: 100% !important; height: auto; margin: 0; padding: 0 !important; text-align: left !important; border: 0 !important; border-bottom: 1px solid #f1f3f5 !important; background: #fff !important; position: relative; } #contain #design #myLib table.responsive tbody td:last-child {border-bottom: 0 !important;} #contain #design #myLib table.responsive tbody td.bt-hide {display: none !important;} #contain #design #myLib table.responsive tbody th:before, #contain #design #myLib table.responsive tbody td:before, #contain #design #myLib table.responsive tbody td::before { display: none !important; content: none !important; } #contain #design #myLib table.responsive .cell-th { position: static !important; display: flex !important; align-items: center; flex: 0 0 96px; width: 96px !important; height: auto !important; margin: 0 !important; padding: 10px 12px !important; overflow: visible !important; clip: auto !important; clip-path: none !important; white-space: normal !important; border: 0 !important; background: #f6f3f9; color: #222; font-weight: 600; font-size: 13px; line-height: 1.4; box-sizing: border-box; } #contain #design #myLib table.responsive tbody td .bt-content { display: flex !important; align-items: center; flex: 1 1 auto; flex-wrap: wrap; min-width: 0; width: auto; padding: 10px 12px !important; line-height: 1.45; text-align: left !important; background: #fff; word-break: break-word; gap: 4px; } #contain #design #myLib table.responsive tbody td.tal .bt-content {font-weight: 600;} #contain #design #myLib table.responsive tbody td[data-th="대출일 / 반납예정일"] .bt-content, #contain #design #myLib table.responsive tbody td[data-th="반납일 / 반납상태"] .bt-content, #contain #design #myLib table.responsive tbody td[data-th="신청일자 / 반납예정일"] .bt-content, #contain #design #myLib table.responsive tbody td[data-th="도착일자 / 예약만기일"] .bt-content, #contain #design #myLib table.responsive tbody td[data-th="도착일자 / 대출대기일"] .bt-content, #contain #design #myLib table.responsive tbody td .bt-content:has(.data_loan) { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; gap: 0; } #contain #design #myLib #dataLoanList .dataLoanTable td span.data_loan, #contain #design #myLib #dataLoanList .dataLoanTable td span.date_return, #contain #design #myLib #dataLoanList .dataLoanTable td span.return_state { display: block !important; margin: 0 !important; width: auto !important; padding: 2px 0; font-size: 13px; } /*내서재*/ #myLib #dataLoanList .dataLoanListTab{margin:10px 0;border-bottom:0px solid #eaeaea} #myLib #dataLoanList .dataLoanListTab *{margin:0;padding:0;font-size:12px;border:0;list-style-type:none;} #myLib #dataLoanList .dataLoanListTab ul {height: auto;} #myLib #dataLoanList .dataLoanListTab ul:before, #myLib #dataLoanList .dataLoanListTab ul:after{clear:both;display:table;content:"";line-height:0} #myLib #dataLoanList .dataLoanListTab ul li{float:left;width: 50%;margin: 0;} #myLib #dataLoanList .dataLoanListTab ul li a{display:block;position:relative;z-index:5;margin:0 2px;margin-bottom:4px;padding: 7px 25px;font-size: 13px;font-weight:400;color:#555;text-align:center;border:1px solid #bababa;background:#fff} #myLib #dataLoanList .dataLoanListTab ul li a:hover{position:relative;z-index:10;color:#fff;border:1px solid #0e4ea5;background:#0e4ea5} #myLib #dataLoanList .dataLoanListTab ul li.on a{position:relative;z-index:10;top:-0px;color:#fff;border:1px solid #0e4ea5;background:#0e4ea5} #myLib #dataLoanList .infomation{margin:10px 0;padding:20px 20px 20px 110px; color:#555;border:2px solid #0e4ea5;/*background:url(../img/mylib.png) no-repeat -15px 50%*/} /*#dataLoanList .infomation *{font-family:'NanumBarunGothic'}*/ #myLib #dataLoanList .infomation p{padding: 0 0 10px 0;margin-bottom: 0;font-size: 16px;line-height: 1.3em;font-weight: 400;color:#2b3b56;word-break: keep-all;} #myLib #dataLoanList .infomation p strong {color:#000;font-weight: 600;} #myLib #dataLoanList .infomation ul{display: flex;padding-top:1px;overflow:hidden;flex-direction: column;} #myLib #dataLoanList .infomation ul li {padding: 0 0 0 10px;margin: 3px 0;/*margin-right:30px;line-height:20px;*/font-size: 14px;/*background:url(../img/ico_dot.png) no-repeat 0 4px / auto 5px;*/} /*#dataLoanList .infomation ul li + li {margin-top: 7px;}*/ #myLib #dataLoanList .infomation ul li.end{margin-right:0} #myLib #dataLoanList .infomation ul li span.mem_num{color:#a28354} #myLib #dataLoanList .infomation ul li span.use_ok{color:#498bbf} #myLib #dataLoanList .infomation ul li span.use_no{color:#c14e33} #myLib #dataLoanList .notice{padding-bottom:50px} #myLib #dataLoanList .notice *{font-family:'NanumBarunGothic'} #myLib #dataLoanList .notice ul{overflow:hidden} #myLib #dataLoanList .notice li{margin:0 0 10px 0;font-size:15px;font-weight:300;color:#2b3b56} #myLib #dataLoanList .settype{position:relative;padding:5px 0;border-top:0px solid #888;border-bottom:0px solid #ccc;background:#fff;overflow:hidden} #myLib #dataLoanList .settype:before, #myLib #dataLoanList .settype:after{clear:both;display:table;content:"";line-height:0} #myLib #dataLoanList .settype h3{float: none;padding:5px 0;font-size:14px;font-weight:400} #myLib #dataLoanList .settype ul{overflow:hidden} #myLib #dataLoanList .settype li{float:left} #myLib #dataLoanList .settype li a{display:block;margin:0 0 0 5px;padding:5px 0;width:80px;font-size:12px;font-weight:400;letter-spacing:-1px;text-align:center;color:#405a89;border:1px solid #809ec3;background:#dbebff} #myLib #dataLoanList .settype li a:hover{border:1px solid #3d4f8b;background:#fff} /*#dataLoanList .settype fieldset{float:right;padding:0}*/ #myLib #dataLoanList .settype fieldset strong{padding-left:5px;font-size:12px} /*#dataLoanList .settype fieldset select{padding:4px 3px;font-size:12px;border:1px solid #dbdbdb} #dataLoanList .settype fieldset button{padding:0 10px;height:25px;font-weight:800;letter-spacing:-1px;color:#fff;background:#0e4ea5}*/ /* 22-04-11 추가 */ #myLib #dataLoanList .settype {margin-bottom: 20px;padding: 10px;background-color: aliceblue;word-break: keep-all;} #myLib #dataLoanList .settype form {float: none;text-align: left;} #myLib #dataLoanList .settype fieldset select{display: inline-block;width: 40%;padding: 5px;margin: 2px 0;font-size:12px;border:1px solid #dbdbdb;vertical-align: top;background-color: #fff;} #myLib #dataLoanList .settype fieldset input{display: inline-block;width: calc(100% - 60px);margin: 2px 0;padding: 5px;font-size:12px;border:1px solid #dbdbdb;vertical-align: top;} #myLib #dataLoanList .settype fieldset input#searchTitle {width: calc(100% - 60px);} #myLib #dataLoanList .settype fieldset button{display: inline-block;width: 40px;height: 32px;padding: 5px 0;margin: 2px 0;font-weight: 500;text-align: center;letter-spacing:-1px;color:#fff;background:#0e4ea5;vertical-align: top;} #myLib #dataLoanList .settype fieldset .input_wp {display: block;padding: 0;} #myLib #dataLoanList .settype fieldset .input_wp input#searchTitle {max-width: 180px;} #myLib #dataLoanList .settype fieldset span{padding: 0 3px;font-size: 12px;letter-spacing:-1px;color:#555} #myLib #dataLoanList .settype fieldset label{position: absolute;top: -9999px;left: -9999px;z-index: -1;padding:0;font-size: 0;line-height: 1;} #myLib #dataLoanList .settype fieldset .t_text{position:relative;top:-1px;padding: 4px 3px;/*height:20px;line-height:20px;*/font-weight:400;border:1px solid #ccc;vertical-align: middle;} #myLib #dataLoanList .settype fieldset .t_text.w70 {width: 40%;} #myLib #dataLoanList .settype fieldset .btn{padding:2px 10px;font-size:11px;color:#fff;border:1px solid #111;background:#333} /* 내서재 공통 검색폼 — 모바일 보정 (기존 settype 규칙 덮어쓰기) */ #myLib #dataLoanList .settype.mylib_filter { margin-bottom: 16px; padding: 0; background: transparent; overflow: visible; } #myLib #dataLoanList .settype.mylib_filter h3 { float: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 10px; padding: 0; font-size: 16px; } #myLib #dataLoanList .settype.mylib_filter form { float: none; width: 100%; text-align: left; } #myLib #dataLoanList .settype.mylib_filter fieldset { flex-wrap: wrap; padding: 12px; background: #f7f9fc; } #myLib #dataLoanList .settype.mylib_filter .filter_row { flex-wrap: wrap; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects { flex: 1 1 100%; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_item { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_row--date { flex-wrap: nowrap; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects > .filter_row--date { flex: 1 1 100%; width: 100%; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_item--date { flex: 1 1 0; min-width: 0; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_row--keyword { flex: 1 1 100%; min-width: 0; max-width: none; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dce2ea; } #myLib #dataLoanList .settype.mylib_filter .filter_item--keyword { flex: 1 1 100%; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_item--submit { flex: 1 1 100%; max-width: none; } #myLib #dataLoanList .settype.mylib_filter .filter_label_spacer { display: none; } #myLib #dataLoanList .settype.mylib_filter .filter_sep { height: 36px; align-self: flex-end; margin-bottom: 0; } #myLib #dataLoanList .settype.mylib_filter label { position: static !important; top: auto; left: auto; z-index: auto; display: block; padding: 0; font-size: 12px !important; line-height: 1.2; font-weight: 600; color: #333; height: 14px; } #myLib #dataLoanList .settype.mylib_filter select, #myLib #dataLoanList .settype.mylib_filter input.t_text, #myLib #dataLoanList .settype.mylib_filter fieldset select, #myLib #dataLoanList .settype.mylib_filter fieldset input { display: block; width: 100% !important; max-width: none !important; height: 36px; margin: 0; padding: 0 8px; font-size: 13px; vertical-align: top; box-sizing: border-box; } #myLib #dataLoanList .settype.mylib_filter .filter_row--selects select, #myLib #dataLoanList .settype.mylib_filter fieldset select { padding: 0 28px 0 8px; background: #fff url('../../wdDLSLE_V4/img/ico_angle.svg') no-repeat right 8px center; background-size: 22px 20px; } #myLib #dataLoanList .settype.mylib_filter .calendar-input input.t_text, #myLib #dataLoanList .settype.mylib_filter .calendar-input .krds-input, #myLib #dataLoanList .settype.mylib_filter fieldset .calendar-input input { padding: 0 36px 0 8px !important; } #myLib #dataLoanList .settype.mylib_filter .input_wp { display: flex !important; align-items: stretch; gap: 6px; width: 100%; padding: 0; } #myLib #dataLoanList .settype.mylib_filter .input_wp input.t_text, #myLib #dataLoanList .settype.mylib_filter .input_wp input#searchTitle, #myLib #dataLoanList .settype.mylib_filter fieldset .input_wp input#searchTitle { flex: 1 1 auto; width: auto !important; max-width: none !important; } #myLib #dataLoanList .settype.mylib_filter .filter_item--submit button, #myLib #dataLoanList .settype.mylib_filter fieldset button, #myLib #dataLoanList .settype.mylib_filter .input_wp button { flex: 0 0 auto; width: 100% !important; min-width: 64px; max-width: 120px; height: 36px; margin: 0; padding: 0 14px; } #myLib #dataLoanList .dataLoanTable table {clear:both;border-collapse:collapse;width:100%;border-top:2px solid #888} #myLib #dataLoanList .dataLoanTable table colgroup {display: none;} #myLib #dataLoanList .dataLoanTable th{padding:10px 5px;line-height:14px;font-size:13px;font-weight:800;color:#575757;border-bottom:1px solid #aaa;background:#f7f7f7} #myLib #dataLoanList .dataLoanTable td{padding:5px 10px;line-height:13px;font-size:13px;color:#575757;border-bottom:1px solid #d3d3d3} #myLib #dataLoanList .enbloc{padding: 15px 0 0;} #myLib #dataLoanList .enbloc button{padding: 0 10px;height:25px;font-weight:800;color:#fff;background:#777} #myLib #dataLoanList .enbloc button.exel{color:#3b873b;border:1px solid #ccc;background:#fff} #myLib #dataLoanList .enbloc a, #myLib #dataLoanList .enbloc button {display:inline-block;height: auto;/*width: 30%;*/padding: 10px;font-size: 13px;line-height: 1.2;font-weight: 500;border:1px solid #ccc;background:#fff;letter-spacing:-1px;box-sizing: border-box;text-align: center;vertical-align: top;} #myLib #dataLoanList .enbloc .exel{color:#3b873b} #myLib #dataLoanList .enbloc .total{color:#366212} #myLib #dataLoanList .enbloc .del{color:#777} #myLib #dataLoanList .btngroup .enbloc button {padding: 5px 8px;font-size: 11px;} #myLib #dataLoanList .txt{padding:10px 0 0;font-size: 13px;} #myLib #dataLoanList .txt li{padding-bottom:5px;color:#888} #myLib #dataLoanList .nocontent{padding:70px 0 !important;text-align:center;color:#999;border-top:1px solid #ccc !important;font-size: 15px !important;border-bottom:1px solid #ccc !important;} /* #paging #myLib #paging{padding:15px 0 0 0;overflow:hidden} #myLib #paging .total{float: none;color:#696969;font-size: 13px;} #myLib #paging .total strong{padding: 0 3px 0 0;color: #222;} #myLib #paging .paging{float: none;margin-top: 7px;overflow:hidden} #myLib #paging .paging .num{float:left;display:block;margin:0 2px;padding:0 8px;height:20px;line-height:20px;text-align:center;color:#747d9d;border:1px solid #eee} #myLib #paging .paging .num:hover{color:#fff;border:1px solid #747d9d;background:#747d9d} #myLib #paging .paging strong{float:left;display:block;margin:0 2px;padding:0 8px;height:20px;line-height:20px;font-weight:800;text-align:center;color:#333;border:1px solid #ccc} #myLib #paging .paging .pprev{float:left;display:block;margin:0 2px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -0px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .prev{float:left;display:block;margin:0 2px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -22px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .next{float:left;display:block;margin:0 2px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -44px -0px;text-indent:-9999em;overflow:hidden} #myLib #paging .paging .nnext{float:left;display:block;margin:0 2px;width:22px;height:22px;background:url('../img/btn_paging.png') no-repeat -66px -0px;text-indent:-9999em;overflow:hidden} */ /*paging*/ #myLib #paging{padding:0 0 10px 0;text-align:center} #myLib #paging *{margin:0;padding:0;border:0;list-style-type:none;font-size:13px} #myLib #paging .paging{display: flex;padding:20px 0;align-items: center;justify-content: center;flex-wrap: wrap;height: 120px;} #myLib #paging .paging span span{color:#2d4594;font-size:11px;display:none} #myLib #paging .paging strong{display:block;margin:0 2px;width: 35px;height: 35px;line-height: 35px;font-weight:800;text-align:center;color: #fefefe;border: 1px solid var(--colorOrange);border-radius: 20px;background-color: var(--colorOrange);} #myLib #paging .paging .num{display:inline-block;width: 35px;height: 35px;line-height: 35px;border-radius: 20px;margin: 0 2px;color:#888;border:1px solid #d5d5d5} #myLib #paging .paging .num:hover{color:#fff;border:1px solid #444;background:#444} #myLib #paging .total{text-align:left;margin:10px 0;font-size:14px;} #myLib #paging .pprev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:0px solid #ccc} #myLib #paging .prev{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-left:1px solid #ccc} #myLib #paging .next{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:1px solid #ccc} #myLib #paging .nnext{display:inline-block;padding:0 10px;font-size:13px;color:#888;border-right:0px solid #ccc} /**/ /*#searchBookList .listCheck{position:absolute;z-index:10;top:10px;left:0;}*/ #myLib #searchBookList .listCheck{position:absolute;z-index:10;top: 130px;left: 0;width: 18px;height: 18px;} /*#searchBookList .divList .list{position:relative;padding:10px 0 10px 17px;color:#555;border-bottom:1px solid #eaeaea;background:#fff}*/ #myLib #searchBookList .divList .list{position:relative;padding: 10px 0;color:#555;border-bottom:1px solid #eaeaea;background:#fff; gap:10px;} #myLib #searchBookList .divList .list:hover{background:#f9f9f9} #myLib #searchBookList .divList .list dl{position:relative;padding:0 0 0 85px} #myLib #searchBookList .divList .list dt {position:absolute;top:4px;left:0;border:0px solid #ccc;box-shadow:2px 2px 0px #eee;width: 70px;} #myLib #searchBookList .divList .list dt > img {width: 100%;height: auto;} #myLib #searchBookList .divList .list dt a img{display:block;width:70px;height:100px;border:1px solid #ccc} #myLib #searchBookList .divList .list dt a em{display:block;width:70px;height:100px;border:1px solid #ccc;background:#fff url(../img/no_bk.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-bk{background:#fff url(../img/no_bk.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-eb{background:#fff url(../img/no_eb.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-ab{background:#fff url(../img/no_ab.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-dv{background:#fff url(../img/no_dv.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-se{background:#fff url(../img/no_se.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-cd{background:#fff url(../img/no_cd.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-dd{background:#fff url(../img/no_cd.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt a .no-tp{background:#fff url(../img/no-tp.png) no-repeat 50% 50%;background-size:cover} #myLib #searchBookList .divList .list dt .label{position:absolute;top:-3px;left:5px} #myLib #searchBookList .divList .list dt .label-ab{top:50%;left:50%;display:block;margin:-26px 0 0 -26px;width:52px;height:52px;background:url(../img/label_audio.png) no-repeat} #myLib #searchBookList .divList .list dt .label-ab img{display:none !important} #myLib #searchBookList .divList .list dt .label-dv{top:50%;left:50%;display:block;margin:-26px 0 0 -26px;width:52px;height:52px;background:url(../img/label_dvd.png) no-repeat} #myLib #searchBookList .divList .list dt .label-dv img{display:none !important} #myLib #searchBookList .divList .list dt .loadr{display:none;position:absolute;left:30px;top:50px} #myLib #searchBookList .divList .list dt .label img {height: 30px !important;} #myLib #searchBookList .divList .list dd{padding:0} #myLib #searchBookList .divList .list dd div strong{display:inline-block;position:relative;padding:1px 7px;line-height:13px;font-weight:700;color:#333} #myLib #searchBookList .divList .list dd div *{font-size: 12px;font-weight:700} #myLib #searchBookList .divList .list dd div a span{color:#e35000;font-size: inherit;} #myLib #searchBookList .divList .list dd .ico {/*white-space:nowrap;text-overflow:ellipsis;overflow:hidden*/padding-left: 20px;word-break: keep-all;background-position: -5px 0;} #myLib #searchBookList .divList .list dd .ico a {padding:0;line-height: 1.7em;font-size: 14px;} #myLib #searchBookList .divList .list dd .ico strong{display: none;position:relative;top:-1px;margin-right:3px;font-size:10px;border:1px solid #ccc;background:#fafafa;border-radius:20px/*;background:url('../img/ico_books.png') no-repeat 0 0*/} #myLib #searchBookList .divList .list dd .ico-bk strong{background-position:2px -2px} #myLib #searchBookList .divList .list dd .ico-eb strong{background-position:2px -25px} #myLib #searchBookList .divList .list dd .ico-ab strong{background-position:2px -50px} #myLib #searchBookList .divList .list dd .ico-dv strong{background-position:2px -75px} #myLib #searchBookList .divList .list ul{padding: 5px 0} #myLib #searchBookList .divList .list ul li{display:block;padding: 2px 0;font-size:12px;color:#454545} #myLib #searchBookList .divList .list ul li strong{display:inline-block;padding:0 3px 0 0;line-height:16px;font-weight:400;color:#757575} #myLib #searchBookList .divList .list ul li span{display:inline-block;color:#e35000} #myLib #searchBookList .divList .list ul li em{/*display:inline-block;padding:0 1px;color:#ccc*/display: block;margin: 2px 0;font-size: 0;} #myLib #searchBookList .divList .list ol{overflow:hidden;padding: 0;margin-top: 5px;} #myLib #searchBookList .divList .list ol li{float:left;padding-right:3px} #myLib #searchBookList .divList .list ol li.add_interest {clear: both;float: none;} #myLib #searchBookList .divList .list ol li strong{display:block;margin-bottom:2px;padding:4px 6px;font-size:12px;color:#777;border:1px solid #ccc;background:#fff;font-weight: 400;} #myLib #searchBookList .divList .list ol li strong.using2{color:#2d4594;border:1px solid #8993b3;background:#fff} #myLib #searchBookList .divList .list ol li strong.using1{color:#999;border:1px solid #ccc;background:#f8f8f8} #myLib #searchBookList .divList .list ol li a{display:block;margin-bottom:2px;padding:4px 6px !important;font-size:12px !important;color:#2d4594;border:1px solid #bfc7e3;background:#fff} #myLib #searchBookList .divList .list ol li a:hover{color:#fff;border:1px solid #3d4f8b;background:#465ba1} #myLib #searchBookList .divList .list ol li.add_interest a {display: inline-block;border: 0;color: #757575;font-weight: 700;margin: 0;padding: 8px 0 0 27px;background:url('../img/ico_book_interest.png') no-repeat 2px 12px / auto 14px;} #myLib #searchBookList .divList .list ol li.sec{position:absolute;z-index:10;top:0px;right:0px} #myLib #searchBookList .divList .list ol li.sec strong{font-size:9px} #myLib #searchBookList .divList .list .print a{display:block;padding:0 0 0 27px;height:25px;line-height:25px;font-size:12px;margin-top: 5px;letter-spacing:-1px;color:#757575;background:url('../img/ico_books.png') no-repeat 0 -100px} #myLib #searchBookList .divList .list .print a:hover{color:#777} } @media all and (max-width: 1024px) { /*패싯*/ #design #searchWp .list_left {display:none;} } @media (max-width: 359px) { #design #searchWp .view_info .btn_wrap .mid_btn::before {display: block;margin: 0 auto 7px;} } @media all and (max-width: 319px) { #design #searchWp .best_form .best_period > span .add_form {display: block;margin: 5px 0 0 0;} } @media all and (min-width: 841px) { /**/ #myLib #dataLoanList .settype.long_type h3{float: none;padding: 9px 0;font-size:16px;font-weight: 400;color: #222;} #myLib #dataLoanList .settype.long_type form {float: none;padding:0;overflow:hidden;text-align: left;word-break: keep-all;} #myLib #dataLoanList .settype.long_type form select, #myLib #dataLoanList .settype.long_type form input {margin: 2px 0;vertical-align: middle;} #myLib #dataLoanList .settype.long_type form .line {display: block;} #myLib #dataLoanList .settype.long_type form select {width: 15%;padding: 5px 10px;} #myLib #dataLoanList .settype.long_type form input.datePicker {width: 10%;} #manage_code {min-width: 120px !important;} } /* ========== 부록 목록 (div, a11y) ========== */ #design #searchWp .list_con .appendix-list, .appendix-list { box-sizing: border-box !important; clear: both !important; float: none !important; width: 100% !important; max-width: 100% !important; margin: 12px 0 4px !important; padding: 12px 14px !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; background: #f8fafc !important; overflow: hidden !important; } #design #searchWp .list_con .appendix-list:not(.is-open), .appendix-list:not(.is-open) { display: none !important; } #design #searchWp .list_con .appendix-list.is-open, .appendix-list.is-open { display: block !important; overflow: visible !important; } .appendix-list *, .appendix-list *::before, .appendix-list *::after { box-sizing: border-box; } #design #searchWp .list_con .appendix-list__title, .appendix-list__title { display: block !important; float: none !important; width: auto !important; margin: 0 0 10px !important; padding: 0 !important; font-size: inherit; font-weight: 700 !important; letter-spacing: -0.02em; line-height: 1.4 !important; color: #1a2332 !important; background: none !important; border: 0 !important; } #design #searchWp .list_con .appendix-list__items, .appendix-list__items { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 8px !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #design #searchWp .list_con .appendix-list__item, .appendix-list__item { display: block !important; float: none !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 12px 14px !important; border: 1px solid #e8ecf1 !important; border-radius: 8px !important; background: #fff !important; color: #1a2332 !important; } #design #searchWp .list_con .appendix-list__grid, .appendix-list__grid { display: grid !important; grid-template-columns: repeat(4, minmax(120px, 1fr)) !important; gap: 12px 16px !important; width: 100% !important; align-items: start; } #design #searchWp .list_con .appendix-list__field, .appendix-list__field { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; min-width: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; position: static !important; } #design #searchWp .list_con .appendix-list__label, .appendix-list__label { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; font-size: 1.5rem; font-weight: 500 !important; line-height: 1.3 !important; letter-spacing: -0.01em; white-space: nowrap; } #design #searchWp .list_con .appendix-list__value, .appendix-list__value { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: inherit; line-height: 1.45 !important; word-break: keep-all !important; overflow-wrap: anywhere; white-space: normal !important; } #design #searchWp .list_con .appendix-list__status, .appendix-list__status { display: inline-flex !important; align-items: center; width: auto !important; min-height: 24px; padding: 0 8px !important; border-radius: 999px !important; font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.2 !important; } .appendix-list__status--available { background: #eef7f1 !important; color: #1b6b3a !important; } .appendix-list__status--loan { background: #fff4e8 !important; color: #b45309 !important; } .appendix-list__status--unavailable { background: #f3f4f6 !important; color: #6b7280 !important; } .btn_appendix.on .svg-icon.ico-angle { transform: rotate(90deg); } .btn_appendix .svg-icon.ico-angle { display: inline-block; transition: transform 0.15s ease; } /* 상세페이지 부록 */ #design #searchWp .view_detail .con .con_type > ul > li.appendix-li > span { vertical-align: middle; } #design #searchWp .view_detail .con .con_type > ul > li.appendix-li .appendix-list { margin-top: 10px !important; } @media (max-width: 900px) { #design #searchWp .list_con .appendix-list__grid, .appendix-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .appendix-list__field--status { grid-column: 1 / -1; } } @media (max-width: 480px) { #design #searchWp .list_con .appendix-list__grid, .appendix-list__grid { grid-template-columns: 1fr !important; } }