@charset "utf-8"; /* box */ .content { width: 100%; height: 100%; } .row { padding-top: 5px; padding-bottom: 5px; } .box { background-color: var(--white); height: 100%; padding: 2rem; border-radius: 10px; box-shadow: 0 0 5px var(--light); } .page-title { font-size: 3rem; font-weight: bold; color: var(--green); } .admin-page-title { font-size: 2.4rem; font-weight: bold; color: var(--blue); } .admin-sec-title { font-size: 1.8rem; font-weight: bold; color: var(--blue); } .box-title { font-size: 1.8rem; } .box-inner-title { font-size: 1.8rem; font-weight: bold; padding-bottom: 1rem; border-bottom: 1px solid var(--dark); } .box-content { font-size: 4rem; color: var(--blue); font-family: "GmarketSans-B"; } .chart-title { font-size: 1.4rem; font-weight: bold; } .content-box { height: calc(100% - 48px); /* background-color: aliceblue; */ } .detail-bold { font-size: 1.6rem; font-weight: 700; } .detail-text { font-size: 1.6rem; font-weight: 400; } .date-text { font-size: 1.4rem; font-weight: 400; } /* btn */ .small-btn { width: 120px; padding: 0.7rem 1rem; border-radius: 0.5rem; font-size: 1.5rem; } .large-btn { width: 100%; padding: 0.9rem 0; border-radius: 0.5rem; font-size: 1.5rem; height: 4rem; } .icon-btn { padding: 0.5rem; border-radius: 50%; } .close-btn { font-size: 1.6rem; font-weight: 900; } .logout-btn { padding: 0.5rem 1rem; color: var(--dark); position: relative; font-size: 1.6rem; } .logout-btn::before { content: ""; width: 1px; height: 10px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); background-color: #aaa; } .close-btn { color: #d6def6; } .comment-btn { width: 100%; height: 6.5rem; max-height: 6.5rem } .blue-btn, .blue-border-btn:hover { background-color: var(--blue); color: var(--white); transition: all 0.3s ease-in-out; } .red-btn, .red-border-btn:hover { background-color: var(--red); color: var(--white); transition: all 0.3s ease-in-out; } .green-btn, .green-border-btn:hover { background-color: var(--green); color: var(--white); transition: all 0.3s ease-in-out; } .orange-btn, .orange-border-btn:hover { background-color: var(--orange); color: var(--white); transition: all 0.3s ease-in-out; } .darkg-btn, .darkg-border-btn:hover { background-color: var(--gray-dark); color: var(--white); transition: all 0.3s ease-in-out; } .gray-btn, .gray-border-btn:hover { background-color: #eee; color: #333; transition: all 0.3s ease-in-out; } .blue-border-btn { border: 1px solid var(--blue); color: var(--blue); background-color: var(--white); } .red-border-btn { border: 1px solid var(--red); color: var(--red); background-color: var(--white); } .green-border-btn { border: 1px solid var(--green); color: var(--green); background-color: var(--white); } .orange-border-btn { border: 1px solid var(--orange); color: var(--orange); background-color: var(--white); } .darkg-border-btn { border: 1px solid var(--gray-dark); color: var(--gray-dark); background-color: var(--white); } .gray-border-btn { border: 1px solid #aaa; color: #aaa; background-color: var(--white); } .white-border-btn { border: 1px solid var(--white); color: var(--white); background-color: transparent; } .tp-btn { background-color: transparent; width: 15px; height: 15px; margin-left: 10px; } button:disabled { background-color: #eee; color: #333; } .del-icon-btn { width: 25px; height: 25px; padding: 5px; background-color: var(--red); color: var(--white); border-radius: 50%; } .set-icon-btn { width: 25px; height: 25px; padding: 5px; background-color: var(--darkG); color: var(--white); border-radius: 50%; } /* 모달 */ .modal-wrapper { background-color: rgba(0, 0, 0, 0.5); position: fixed; width: 100%; height: 100%; top: 0; left: 0; display: flex; justify-content: center; align-items: center; z-index: 11000; } .modal-container { background: #fff; min-width: 500px; width: 35%; /* height: 80%; */ border-radius: 5px; display: grid; grid-template-rows: auto 1fr auto; padding: 20px; box-sizing: border-box; max-height: 95%; min-height: 500px; } .modal-title { width: 100%; border-bottom: 1px solid #d4cccc; padding: 10px 0; } .modal-subtitle { font-size: 1.3rem; font-weight: 600; } .modal-content-monthly { width: 100%; padding: 20px 0; overflow-y: auto; } .large-modal { width: 90%; } .medium-modal { width: 60%; } .small-modal { min-width: 200px; min-height: 200px; max-width: 450px; height: auto; max-height: 50%; } .list-modal { width: 80%; height: 80%; } .alert-write { font-size: 1.6rem; line-height: 180%; } .modal-content-monthly::-webkit-scrollbar { width: 10px; } .modal-content-monthly::-webkit-scrollbar-thumb { background-color: #6b6b6b; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } .modal-content-monthly::-webkit-scrollbar-track { background-color: #eee; border-radius: 10px; box-shadow: inset 0px 0px 5px white; } .modal-end { width: 100%; padding: 15px 0; } .alert-modal .modal-end button, .small-modal .modal-end button { margin-left: 0; } .full-input, .full-select { width: 100%; } .half-input, .half-select { width: 50%; } /* table */ .list-table .admin-list.list-table { border-top: 1px solid var(--light); border-bottom: 1px solid var(--light); } .list-table thead th { background-color: var(--teal); padding: 10px 0; font-family: "yungju"; font-size: 1.6rem; } .list-table tbody tr, .admin-list.list-table tbody tr, .form-table2 tr { border-top: 1px solid var(--light); } .list-table tbody td, .admin-list.list-table tbody td { font-size: 1.6rem; padding: 10px 0; } .list-table tbody tr:nth-child(even) { background-color: var(--sky-green); } .admin-list.list-table thead th { background-color: var(--light); padding: 10px 0; font-family: "Pretendard-B"; font-size: 1.6rem; } .admin-list.list-table tbody tr:nth-child(even) { background-color: var(--background-white); } .admin-style .form-table, .content-navigate { border-top: 1px solid var(--gray-dark); border-bottom: 1px solid var(--gray-dark); } .form-table { border-top: 1px solid var(--green); border-bottom: 1px solid var(--green); } .form-table2 { border: 1px solid var(--light); } .form-table th, .form-table td, .form-table2 th, .form-table2 td { padding: 1rem; font-size: 1.6rem; position: relative; } .form-table2 th { background-color: var(--teal); border-right: 1px solid var(--light); } .form-table-adm th { background-color: var(--light); border-right: 1px solid var(--white); } .admin-style .form-table2 th { background-color: var(--light); border-right: 1px solid var(--light); } .form-table-style .form-table { border-top: none; border-bottom: none; } .detail-table { border-top: 2px solid var(--green); border-bottom: 1px solid var(--green); } .cmmn-table tr td:nth-of-type(2) { text-align: left; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } .cmmn-table2 tr td:nth-of-type(2), .cmmn-table2 tr td:nth-of-type(3) { text-align: left; } .admin-list.faq-table tbody tr:nth-child(even), .list-table.faq-table tbody tr:nth-child(even) { background-color: var(--white); } .admin-list.faq-table tbody tr.answer, .list-table.faq-table tbody tr.answer { background-color: var(--sky-green); } .admin-detail { border-top: 2px solid var(--light); border-bottom: 1px solid var(--light); } .detail-table .detail-title{ background-color: var(--white); border-bottom: 1px solid var(--green); } .admin-detail .detail-title { background-color: var(--light); border-bottom: 1px solid var(--blue); } .detail-title td { padding: 2rem 1.5rem; } .detail-table-title { font-size: 1.8rem; } .complex-table th { border: 1px solid var(--white); } .content-navigate tr { border-top: 1px solid var(--gray-dark); } .content-navigate tr td:nth-of-type(1) { border-right: 1px solid var(--light); } /* 파일찾기 및 필수 */ .form-table input[type="file"] { position: absolute; width: 0; height: 0; padding: 0; overflow: hidden; border: 0; } .filebox { height: 4rem; } .filebox .upload-name { display: inline-block; padding: 0.7rem 1rem; vertical-align: middle; border: 1px solid #dddddd; color: #999999; } .form-table label { display: inline-block; } .essential { font-size: 1.3rem; } .essential span { color: var(--red); } .form-table th span, .form-table-style .form-table label.form-title, .form-table label.form-title { position: relative; } .form-table th span::after, .form-table-style .form-table label.form-title::after, .form-table label.form-title::after { content: "*"; color: var(--red); position: absolute; top: 0; right: 0; transform: translate(100%, -50%); } /* 서치 */ .search-bar { position: relative; } .search-input{ border-radius: 1rem 0 1rem 0; } .search-input .search-input::placeholder { font-family: "yungju"; } .search-button { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); } .search-icon { color: var(--light); } .condition-input { border-left: 1px solid var(--dark); } /*PAGINATION*/ .pagination-button-type { display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .pagination-button-type a { display: block; width: 4rem; height: 4rem; text-align: center; cursor: pointer; border: 1px solid var(--dark); padding: 1rem; border-radius: 0.5rem; margin-right: 0.5rem; } /* 정우추가 */ .pagination-button-type a.prev:after { content: "\003C"; font-weight: 900; } .pagination-button-type a.next:after { content: "\003E"; font-weight: 900; } .pagination-button-type a.first-page:after { content: "\003C\003C"; font-weight: 900; } .pagination-button-type a.end-page:after { content: "\003E\003E"; font-weight: 900; } .pagination-button-type a.active { background-color: var(--green); color: white; cursor: default !important; } /* 페이지 템플릿 */ .gall-img { width: 100%; height: 200px } .gall-img>img { width: 100%; height: 100%; object-fit: cover; } /* 댓글 */ .comment-zone { background-color: var(--skyblue); border-radius: 1rem; } .comment-zone2 { background-color: var(--background-white); border-radius: 1rem; } .comment-wrap { padding: 16px; background-color: var(--white); } .comment-item:not(:first-child) { border-top: 1px solid #ddd; } .parents-nodes { padding-left: 8px; } .children-nodes { padding-left: 8px; } .comment-user, .comment-text { font-size: 1.3rem; } .comment-date { color: var(--gray); font-size: 1.2; } .reply-zone { position: relative; margin-bottom: 10px; } .reply-input { border-radius: 50px; } .reply-btn { position: absolute; border-radius: 50px; top: 50%; right: 6px; transform: translateY(-50%); } /* 팝업 */ .popup-wrap { height: 100vh; } .popup-container { width: 100%; height: calc(100vh - 50px); } /* 트리 */ .p-tree { padding: 0.5rem 1rem; } .node-name { width: 100%; font-size: 1.6rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; } .selected { border: 1px solid var(--blue); border-radius: 0.3rem; } .ghost { height: 15px; color: transparent; border: 1px dashed var(--blue); } .ghost * { display: none; } /* 파일 목록 */ .file-wrap p { display: block; width: calc(100% - 15px); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .file-wrap button.del-btn { width: 15px; }