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;
}
}
.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;
font-family: "Pretendard-SB";
color: #000;
}
}
form {
margin: 0 auto;
border: 1px solid #dddddd;
border-radius: 20px;
input {
padding: 15px;
border: 1px solid #dddddd;
border-radius: 5px;
font-size: 16px;
}
}
/* 로그인 */
.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 {
dd {
display: flex;
align-items: center;
}
padding: 30px 50px;
label {
position: relative;
width: 200px;
display: block;
font-size: 18px;
&.require::after {
position: absolute;
top: 5px;
padding-left: 3px;
content: "*";
color: #df2d2d;
}
}
.hr {
background-color: #eeeeee;
margin: 10px 0;
width: 100%;
height: 1px;
}
}
.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";
}
}
.btn-group {
gap: 10px;
}
/* 통합검색 */
.search-form {
dl{
padding: 35px 75px;
dd{
display: flex;
align-items: center;
p {
font-size: 18px;
font-family: "Pretendard-SB";
width: 180px;
}
}
.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;
width: 84%;
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;
/* Optional: cursor pointer to indicate it is clickable */
}
/* 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{
.resultext{
.main-img{
width: 320px;
height: 220px;
border-radius: 24px;
}
display: flex;
p{
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;
}
.category {
margin-bottom: 20px;
ul{
display: flex;
gap: 5px;
}
li{
width: fit-content;
border-radius: 3px;
padding: 5px 10px;
font-family: "Pretendard-SB";
font-size: 14px;
&.category1{
color: #a5067b;
border: 1px solid #a5067b;
}
&.category2{
color: #007ac3;
border: 1px solid #007ac3;
}
}
}
.date{
ul{display: flex; gap: 20px;}
li{font-size: 17px;
b{margin-left: 5px;}
}
}
}
}
}