File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.content {
width: 1500px;
margin: 0 auto;
padding-top: 56px;
h2 {
font-family: "HAPPINESSSANSVF";
font-size: 40px;
}
h3 {
font-family: "Pretendard-B";
font-size: 25px;
position: relative;
padding-left: 20px;
margin-bottom: 20px;
&::before {
content: '';
background: url(../../images/icon/subtitle.png);
width: 7px;
top: 11px;
left: 0;
height: 17px;
display: block;
position: absolute;
}
}
.gopage {
font-family: "Pretendard-L";
font-size: 17px;
text-align: right;
}
.gopage::after {
content: '\2192';
font-size: 18px;
}
.pagination {
margin-top: 20px;
display: flex;
align-items: center;
}
.pagination select {
margin-right: 10px;
}
.pagination button {
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
}
.pagination button:disabled {
background-color: #ccc;
cursor: not-allowed;
}
}
.sub-title-area {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.breadcrumb-list {
ul {
display: flex;
align-items: center;
gap: 15px;
}
li {
font-size: 16px;
p {
font-size: 16px;
color: #000;
font-family: "Pretendard-L";
}
&:first-child {
display: flex;
align-items: center;
}
&:last-child {
font-family: "Pretendard-SB";
}
}
}
.btn-group {
gap: 10px;
button.cancel{
width: 130px;
background-color: #f9f9f9;
border: 1px solid #636364;
}
button.register{
width: 130px;
background-color: #ce3e48;
color: #fff;
}
}
form {
margin: 0 auto;
border: 1px solid #dddddd;
border-radius: 20px;
input {
padding: 15px;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
width: inherit;
}
dd {
display: flex;
align-items: center;
}
label {
position: relative;
width: 200px;
display: block;
font-size: 18px;
flex-shrink: 0;
&.require::after {
position: absolute;
top: 5px;
padding-left: 3px;
content: "*";
color: #df2d2d;
}
}
.hr {
background-color: #eeeeee;
margin: 10px 0;
width: 100%;
height: 1px;
}
}
/* 카테고리 */
.category {
display: flex;
gap: 5px;
li {
width: fit-content;
border-radius: 3px;
padding: 5px 10px;
font-family: "Pretendard-SB" !important;
font-size: 14px;
&.category1 {
color: #a5067b;
border: 1px solid #a5067b;
}
&.category2 {
color: #007ac3;
border: 1px solid #007ac3;
}
button {
margin-left: 15px;
}
}
}
/* 로그인 */
.login-form {
width: 600px;
padding: 50px 60px;
label {
color: #666;
font-size: 16px;
display: block;
margin-bottom: 6px;
}
button {
font-size: 22px;
font-family: "Pretendard-B";
background: linear-gradient(132deg, #3e355c, #763954);
width: 100%;
padding: 19px 0;
border-radius: 15px;
margin-top: 10px;
img {
margin: 0 12px 0 0;
}
span {
color: #fff;
}
}
.check-area {
input {
margin-right: 5px;
}
}
}
/* 내정보 */
.info-form,
.pwchange-form {
padding: 30px 50px;
}
.pwchange-form {
input {
width: 40%;
}
}
.invalid-feedback {
display: flex;
align-items: center;
gap: 4px;
background-color: #fbf1f2;
border: 1px solid #ce3e48;
border-radius: 20px;
padding: 8px 24px;
margin-left: 20px;
span {
font-size: 14px;
color: #e22d2d;
font-family: "Pretendard-EL";
}
}
/* 통합검색 */
.search-form {
dl {
padding: 35px 75px;
dd {
display: flex;
align-items: center;
p {
font-size: 18px;
font-family: "Pretendard-SB";
width: 180px;
flex-shrink: 0;
}
}
.mark {
width: fit-content;
margin: 0 11px;
}
}
background-image: linear-gradient(#fff, #fff),
linear-gradient(-45deg, #ca3e49, #3f355c);
background-origin: border-box;
background-clip: content-box,
border-box;
border: 3px solid transparent;
border-radius: 32px;
.btn-group {
display: flex;
justify-content: center;
button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 140px;
font-family: "Pretendard-B";
font-size: 16px;
border-radius: 30px;
&.reset {
border: 1px solid #ccc;
}
&.search {
background: linear-gradient(132deg, #3e355c, #763954);
p {
color: #fff;
}
}
}
}
ul {
display: flex;
gap: 15px;
}
li {
display: flex;
align-items: center;
width: 125px;
gap: 12px;
}
input[type="text"] {
background-color: #f6f6f6;
border: 0;
}
input[type="date"] {
position: relative;
width: 158px;
border-radius: 8px;
background: url(../../images/icon/calendar.png) no-repeat right 10px center / auto;
}
input[type="date"]::placeholder {
color: #fff;
;
}
input[type='date']::-webkit-calendar-picker-indicator {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: transparent;
color: transparent;
cursor: pointer;
}
input[type="checkbox"] {
position: relative;
width: 22px;
height: 22px;
padding: 0;
accent-color: #544483;
/* This will change the checkbox color when checked */
border: 1px solid #cccccc;
/* This controls the border color */
border-radius: 4px;
/* Optional: rounded corners */
background-color: #fff;
/* Default background */
appearance: none;
/* Remove the default checkbox appearance */
cursor: pointer;
}
/* Checked state of the checkbox */
input[type="checkbox"]:checked {
background-color: #544483;
/* Custom background when checked */
border-color: #544483;
/* Custom border color when checked */
}
input[type="checkbox"]:checked::before {
content: '';
background-image: url(../../images/check.png);
background-repeat: no-repeat;
position: absolute;
left: 2px;
top: 5px;
width: 15px;
height: 11px;
}
input[type="checkbox"]:checked+label {
color: rgba(0, 0, 0, 0.12);
/* Change the label color when checkbox is checked */
}
label {
font-size: 17px;
font-family: "Pretendard-L";
}
/* 기본스타일 제거, 버튼 모양 재설정 */
input[type='radio'] {
flex-shrink: 0;
-webkit-appearance: none;
/* 웹킷 브라우저에서 기본 스타일 제거*/
-moz-appearance: none;
/* 모질라 브라우저에서 기본 스타일 제거*/
appearance: none;
/*기본 브라우저에서 기본 스타일 제거*/
width: 22px;
height: 22px;
padding: 0;
border: 1px solid #ccc;
/*체크되지 않았을 때의 테두리 색상*/
border-radius: 50%;
outline: none;
/*focus 시에 나타나는 기본 스타일 제거*/
cursor: pointer;
}
/* 체크 시 버튼 모양 스타일*/
input[type='radio']:checked {
background-color: #544483;
/*체크 시 내부 원 색상*/
border: 4px solid #fff;
/*라인이 아닌, 라인과 원 사이 색상*/
box-shadow: 0 0 0 1px #ccc;
/*라인*/
}
}
.search-result {
select {
width: 72px;
}
.resultext {
.main-img {
width: 320px;
height: 220px;
border-radius: 24px;
}
display: flex;
p {
width: max-content;
font-family: "Pretendard-L";
font-size: 17px;
b {
color: #ce3e48;
}
}
img {
object-fit: contain;
}
}
.result-box {
display: flex;
justify-content: space-between;
border: 1px solid #ddd;
border-radius: 24px;
padding: 30px;
.text-box {
p,
li {
font-family: "Pretendard-L";
}
.text {
width: 1048px;
font-size: 16px;
color: #555555;
overflow: hidden;
/* Hide any overflow */
text-overflow: ellipsis;
/* Add an ellipsis at the end */
display: -webkit-box;
-webkit-line-clamp: 2;
/* Limit to 2 lines */
-webkit-box-orient: vertical;
margin-bottom: 20px;
}
h5 {
font-family: "Pretendard-B";
font-size: 25px;
margin-bottom: 20px;
}
.address {
font-size: 20px;
margin-bottom: 18px;
}
.date {
ul {
display: flex;
gap: 20px;
}
li {
font-size: 17px;
b {
margin-left: 5px;
}
}
}
}
}
}
/* 등록페이지 */
.insert-form {
padding: 10px 0;
border-top: 2px solid #000;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #eee;
border-radius: 0;
dl {
dd {
padding: 0 24px;
li {
p {
font-family: "Pretendard-L";
font-size: 16px;
}
}
}
textarea {
min-height: 425px;
width: 100%;
}
.category-add {
width: 72px;
height: 29px;
color: #fff;
background-color: #000;
border-radius: 15px;
margin-left: 10px;
}
}
.invalid-feedback {
border: 0;
background-color: transparent;
margin-left: 0;
}
}
.file-input {
display: none;
}
/* Style the custom label (the clickable button) */
.file-label {
display: inline-block;
padding: 25px 0px;
width: 100%;
background-color: #f6f6f6;
border: 2px dashed #dadada;
color: white;
font-size: 16px;
border-radius: 10px;
cursor: pointer;
text-align: center;
transition: background-color 0.3s ease;
}
.file-label > div p {
font-family: "Pretendard-B" !important;
font-size: 20px !important;
}
/* Style the label on hover */
.file-label:hover {}
/* Style for the file names display */
.file-names {
display: block; /* Make each file name appear on a new line */
font-size: 16px;
color: #333;
span{color: #dadada;}
.file-wrap{
border: 1px solid #dadada;
border-radius: 10px;
padding: 12px;
.file-name{
display: flex;
align-items: center;
img{margin-right: 10px;}
}
}
}
/* 모달 */
/* 모달 배경 스타일 */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 배경 어두운 투명도 */
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
}
/* 모달 콘텐츠 스타일 */
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 8px;
max-width: 400px;
width: 100%;
text-align: center;
h2{
}
/* 닫기 버튼 스타일 */
button {
padding: 10px;
margin-top: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
}