.div_error {
padding: 7rem 2rem 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
width: 100%;
}
.div_error_content {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
gap: 2rem;
padding: 1rem;
}
.div_error_content .logo {
display: flex;
justify-content: center;
}
.div_error_content .logo a {
max-width: 200px;
}
.div_error_text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 1rem;
}
.p_error {
font-size: 2rem;
}
.a_error_back {
text-align: left;
}
.a_error_back:hover span {
opacity: .5;
}
.span_error_back {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: var(--main-gold);
} @media screen and (max-width: 900px) {
.div_error {
padding: 6rem 2rem 2rem;
}
}
@media screen and (max-width: 750px) {
.div_error_content .logo,
.div_error_text {
width: 100%;
}
.div_error_text {
text-align: center;
padding: 0;
}
.p_error {
font-size: 1.8rem;
}
.a_error_back {
text-align: center;
}
}
@media screen and (max-width: 480px) {
.p_error {
font-size: 1.5rem;
}
}
@media screen and (max-width: 380px) {
.p_error {
font-size: 1.2rem;
}
.p_not_exist,
.p_error_back {
font-size: 1rem;
}
}
@media screen and (max-width: 300px) {
.div_error {
padding: 6rem 1.2rem 1rem;
}
}
@media screen and (max-width: 280px) {
.p_error {
font-size: 1rem;
}
.p_not_exist,
.p_error_back {
font-size: .8rem;
}
}