You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
494 lines
5.9 KiB
494 lines
5.9 KiB
|
|
@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');
|
|
|
|
body {
|
|
|
|
font-family: NanumSquareR;
|
|
background-color: #ffffff;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload {
|
|
|
|
padding: 13% 0;
|
|
|
|
border-radius: 10px;
|
|
|
|
border: solid 1.5px #f6f7fa;
|
|
|
|
background-color: #f6f7fa;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-btn {
|
|
|
|
width: 100%;
|
|
|
|
margin: 0;
|
|
|
|
color: #fff;
|
|
|
|
background: #1FB264;
|
|
|
|
border: none;
|
|
|
|
padding: 10px;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-bottom: 4px solid #15824B;
|
|
|
|
transition: all .2s ease;
|
|
|
|
outline: none;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-btn:hover {
|
|
|
|
background: #1AA059;
|
|
|
|
color: #ffffff;
|
|
|
|
transition: all .2s ease;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-btn:active {
|
|
|
|
border: 0;
|
|
|
|
transition: all .2s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-content {
|
|
|
|
display: none;
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-input {
|
|
position: absolute;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
outline: none;
|
|
|
|
opacity: 0;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-upload-wrap {
|
|
|
|
position: relative;
|
|
|
|
object-fit: contain;
|
|
|
|
border-radius: 10px;
|
|
|
|
border: dashed 1.5px #35465d;
|
|
|
|
background-color: #ffffff;
|
|
|
|
width: 65%;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
/* 업로드 버튼 (수정) */
|
|
.image-dropping,
|
|
|
|
.image-upload-wrap:hover {
|
|
|
|
font-size: 30px;
|
|
|
|
transition: transform 0.5s, background-color 0.3s;
|
|
transform: scale(1.01);
|
|
background-color: beige;
|
|
|
|
|
|
border: 2px solid black;
|
|
|
|
}
|
|
|
|
|
|
|
|
.image-title-wrap {
|
|
|
|
padding: 0 15px 15px 15px;
|
|
|
|
color: #222;
|
|
|
|
}
|
|
|
|
|
|
|
|
.drag-text {
|
|
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
|
|
|
|
.drag-text h3 {
|
|
|
|
font-weight: 100;
|
|
|
|
text-transform: uppercase;
|
|
|
|
color: #15824B;
|
|
|
|
padding: 60px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.file-upload-image {
|
|
|
|
margin: auto;
|
|
|
|
padding: 20px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.remove-image {
|
|
|
|
width: 200px;
|
|
|
|
margin: 0;
|
|
|
|
color: #fff;
|
|
|
|
background: #cd4535;
|
|
|
|
border: none;
|
|
|
|
padding: 10px;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-bottom: 4px solid #b02818;
|
|
|
|
transition: all .2s ease;
|
|
|
|
outline: none;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-weight: 700;
|
|
|
|
}
|
|
|
|
|
|
|
|
.remove-image:hover {
|
|
|
|
background: #c13b2a;
|
|
|
|
color: #ffffff;
|
|
|
|
transition: all .2s ease;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.remove-image:active {
|
|
|
|
border: 0;
|
|
|
|
transition: all .2s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
.nav-distance{
|
|
|
|
|
|
|
|
font-family: 'Courgette', cursive;
|
|
|
|
padding: 2.1% 7.7%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.navbar-light .navbar-brand{
|
|
|
|
|
|
|
|
font-family: 'Courgette', cursive;
|
|
|
|
line-height: 1.70;
|
|
|
|
text-align: left;
|
|
|
|
color: #35465d;
|
|
|
|
font-size: 24px;
|
|
|
|
|
|
}
|
|
|
|
.navbar-light .navbar-toggler{
|
|
|
|
|
|
font-family: 'Courgette', cursive;
|
|
|
|
border-color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
.section {
|
|
|
|
margin-top: 100px;
|
|
|
|
}
|
|
|
|
.result-Message {
|
|
|
|
font-size:20px;
|
|
|
|
}
|
|
|
|
.title {
|
|
|
|
|
|
font-family: 'Courgette', cursive;
|
|
|
|
line-height: 1.50;
|
|
|
|
font-size:90px;
|
|
|
|
text-align: center;
|
|
|
|
color: #35465d;
|
|
|
|
|
|
|
|
}
|
|
|
|
.subtitle {
|
|
|
|
|
|
font-family: 'Courgette', cursive;
|
|
|
|
line-height: 1.4;
|
|
|
|
font-size:34px;
|
|
|
|
text-align: center;
|
|
|
|
color: #35465d;
|
|
|
|
}
|
|
|
|
|
|
.bar-label {
|
|
width: 20%;
|
|
text-align: left;
|
|
height: 2rem;
|
|
}
|
|
/* On screens that are 600px or less, set the background color to olive */
|
|
|
|
@media screen and (max-width: 600px) {
|
|
|
|
html {
|
|
|
|
font-size: 8px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.youtube-link {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
line-height: 1.71;
|
|
|
|
text-align: 1.71;
|
|
|
|
color: #f73737;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.youtube-link:hover {
|
|
|
|
font-size: 1.5rem;
|
|
|
|
line-height: 1.71;
|
|
|
|
text-align: 1.71;
|
|
|
|
color: #f73737;
|
|
|
|
text-decoration: underline;
|
|
|
|
}
|
|
|
|
|
|
|
|
.youtube-icon{
|
|
|
|
width: 8%;
|
|
|
|
}
|
|
|
|
.upload{
|
|
|
|
width: 20%;
|
|
|
|
}
|
|
|
|
.drag-text h3 {
|
|
|
|
width: 50%;
|
|
|
|
font-weight: 100;
|
|
|
|
text-transform: uppercase;
|
|
|
|
font-size: 1.6rem;
|
|
|
|
line-height: 1.53;
|
|
|
|
text-align: center;
|
|
|
|
color: #35465d;
|
|
|
|
margin: 0 auto;
|
|
|
|
}
|
|
|
|
.bar-container {
|
|
height: 2.7rem;
|
|
}
|
|
.Spring-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
background-color: rgba(27, 175, 234, 0.2);
|
|
}
|
|
.Spring-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
background-color: rgba(27, 175, 234, 1);
|
|
}
|
|
.Summer-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
background-color: rgba(251, 176, 59, 0.2);
|
|
}
|
|
.Summer-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
background-color: rgba(251, 176, 59, 1);
|
|
}
|
|
.Autumn-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
background-color: rgba(195, 140, 102, 0.2);
|
|
}
|
|
.Autumn-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
background-color: rgba(195, 140, 102, 1);
|
|
}
|
|
.Winter-box {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
background-color: rgba(49, 132, 155, 0.2);
|
|
}
|
|
.Winter-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 2rem;
|
|
border-radius: 10px;
|
|
background-color: rgba(49, 132, 155, 1);
|
|
}
|
|
|
|
/* 추가부분 */
|
|
.colorWeight {
|
|
display: inline-block;
|
|
clip-path: circle(40%);
|
|
width: 90px;
|
|
height: 90px;
|
|
|
|
}
|
|
.colorWeight:hover {
|
|
|
|
transform: scale(1.15);
|
|
}
|