편집 요약 없음 |
편집 요약 없음 |
||
| 175번째 줄: | 175번째 줄: | ||
.content-width { | .content-width { | ||
display: inline; | display: inline; | ||
user-select: none; | user-select: none; | ||
} | } | ||
2023년 9월 3일 (일) 19:54 판
/* 테스트에요 여러분 테스트 */
.ageofchange {
margin-top: 10px;
line-height: 80px;
width: 100%;
animation-name: ageofchange;
font-size: 24pt;
background-color:#580009;
color:#CFA547;
font-family: KoPubDotumMedium;
font-weight: bold;
text-align: center;
animation-duration: 4s;
animation-iteration-count: 1;
}
@keyframes ageofchange {
0% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
50% {background-color:#00F1BA; color:#252525; left:20px; top:10px;}
100% {background-color:#580009; color:#CFA547; left:20px; top:10px;}
}
/* 테스트에요 여러분 테스트 2 */
.animation6 {
margin-top: 10px;
height: 100px;
width: 100%;
border: 1px solid #000000;
overflow: visible;
font-size: 24pt;
text-align: center;
}
.text-animation {
overflow: hidden;
padding-top: 15px;
text-align: center;
font-size: 20pt;
letter-spacing: -0.5px;
animation: text-animation 1s ease;
animation-iteration-count: 1;
transform: translateY(calc(100% - 50%));
}
@keyframes text-animation {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(calc(100% - 50%));
}
}
/* 테스트에요 여러분 테스트 3 */
.header {
display: inline-block;
overflow: hidden;
margin: 10px 10px 10px;
margin-right: -10px;
width: 180px;
height: 300px;
border-radius: 15px;
transform: scale(0.85);
transition: .2s ease-out;
}
.header:hover{
transition: .2s ease-in;
transform: scale(0.9);
z-index:3;
}
.header img {
position: relative;
background-position: top;
background-size: cover;
background-repeat: no-repeat;
height: 100%;
overflow: visible;
}
/* 테스트에요 여러분 테스트 4 */
.progress-bar-body {
margin-top: 10px;
margin-bottom: 10px;
height: 20px;
width: 100%;
overflow: hidden;
border-radius: 20px;
}
.progress-bar {
width: 100%;
height: 30px;
background: #dedede;
font-weight: 600;
font-size: .8rem;
}
.progress-bar .progress1 {
width: 75%;
height: 30px;
padding: 0;
text-align: center;
background: #880E4F;
animation: progress 1s ease-in-out 1;
}
@keyframes progress {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
.progress-bar .progress2 {
width: 30%;
height: 30px;
padding: 0;
text-align: center;
background: #880E4F;
animation: progress2 1s ease-in-out 1;
}
@keyframes progress2 {
from {
margin-left: -100%;
}
to {
margin-left: 0%;
}
}
/* WSP */
@media screen and (min-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
margin-left: auto; margin-right: auto;
margin-top: 10px;
line-height: 100px;
text-align: center;
font-size: 24pt;
color: #191919;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
@media screen and (max-width: 768px) {
.wsp-name {
border: 2px solid #EF426F;
margin-left: auto; margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
line-height: 80px;
text-align: center;
font-size: 20pt;
color: #191919;
max-width: 768px;
width: 100%;
font-family: Noto Serif KR;
letter-spacing: -0.05em;
}
}
/* ㅁㄴㅇㄹ */
@media screen and (max-width: 768px) {
body {
font-family: "Pretendard JP Variable", "Pretendard"
}
.content-width {
display: inline;
user-select: none;
}
.section-name {
display: inline-block;
font-size: 18px;
margin-bottom: 14px;
width: 80%;
color: black;
font-weight: 600;
font-family: "Pretendard JP Variable";
}
.section-seealso {
display: inline-block;
text-align: right;
font-size: 13px;
margin-bottom: 14px;
width: 20%;
color: #666;
font-family: "Pretendard JP Variable";
}
.contentbox {
display: inline-block;
background: #EFEFEF;
border-radius: 1em;
max-width: 768px;
width: 100%;
padding: 10px 10px 10px 14px;
margin: -5px 0px -20px 0px;
line-height: 20px;
color: #787878;
font-size: 12px;
font-family: "Pretendard JP Variable";
}
.contentbox b {
font-family: "Pretendard JP Variable";
}
.contentbox b:hover {
font-family: "Pretendard JP Variable";
}
.contentbox b:active {
font-family: "Pretendard JP Variable";
}
.contentbox b:link {
font-family: "Pretendard JP Variable";
}
.contentbox:nth-child(4) {
visibility: collapse;
display: inline;
}
.contentbox:nth-child(5) {
display: inline-block;
margin-top: -90%;
margin-bottom: 2px;
}
}