결원발생 / 마감임박 스티커
<style>
/* 마감 */
.end_soon {
padding: 8px 14px 8px 14px !important;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 88%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-size: 15px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
justify-content:center;
align-items: center;
z-index: 1;
}
/**/
.can_wait {
padding: 8px 14px 8px 14px !important;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 88%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-size: 15px !important; /* 버튼 텍스트 크기 */
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
justify-content:center;
align-items: center;
z-index: 1;
}
.end_soon_txt{
white-space:nowrap;
padding: 0px !important;
margin:0px !important;
line-height: 16px !important;
text-align: center;
justify-content: center;
align-items: center;
}
/* 미디어 쿼리 */
@media screen and (max-width: 800px) {
.end_soon {
padding: 0px 15px 0px 15px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px !important;
font-weight: bold;
text-align: center;
}
.can_wait {
padding: 0px 15px 0px 15px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px !important;
font-weight: bold;
text-align: center;
}
}
@media screen and (max-width: 600px) {
.end_soon {
padding: 0px 12px 0px 12px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#ED5742;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.can_wait {
padding: 0px 12px 0px 12px;
border: 2px solid black;
border-radius: 100px;
position: absolute;
top: 80%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
background-color:#FF9E2D;
font-weight: bold; /* 버튼 텍스트 굵기 */
text-align: center; /* 텍스트 가운데 정렬 */
z-index: 1; /* 이미지 위에 텍스트 표시 */
line-height: 16px;
font-weight: bold;
text-align: center;
z-index: 1;
}
.end_soon_txt{
white-space:nowrap;
padding: 0px !important;
line-height: 16px !important;
font-size: 6px !important; /* 버튼 텍스트 크기 */
}
</style>
HTML
복사
