@charset "UTF-8";

@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 500;
    src: url('../../assets/fonts/Pretendard-Medium.otf') format('opentype'),
    url('../../assets/fonts/Pretendard-Medium.woff') format('woff'),
    url('../../assets/fonts/Pretendard-Medium.woff2') format('woff2');
}

body {
    background: #000;
}
.error {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 720px;
    height: 100vh;
    margin: 0 auto;
    background: url("../../assets/images/error/error-bg.png") no-repeat 50% 50%;
    background-size: cover;
    text-align: center;
}
.error img {
    vertical-align: top;
}
.error .white-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:rgba(255, 255, 255, 0.6)
}
.error .contents {
    position: relative;
    z-index: 1;
    width: 100%;
}

.error .contents h1 {
    margin-bottom: clamp(28px, calc(28px + (28 * ((100vw - 320px) / (720 - 320)))), 56px);
}

.error .contents h1 img {
    aspect-ratio: 178 / 78;
    width: clamp(89px, calc(89px + (89 * ((100vw - 320px) / (720 - 320)))), 178px);
    height: auto;
}

.error .contents > p {
    margin-bottom: clamp(35px, calc(35px + (35 * ((100vw - 320px) / (720 - 320)))), 70px);
}
.error .contents > p img {
    aspect-ratio: 495 / 58;
    width: clamp(247.5px, calc(247.5px + (247.5 * ((100vw - 320px) / (720 - 320)))), 495px);
    height: auto;
}
.error .contents > .message {
    padding: clamp(180px, calc(180px + (180 * ((100vw - 320px) / (720 - 320)))), 360px) clamp(52px, calc(52px + (52 * ((100vw - 320px) / (720 - 320)))), 104px) 0;
    background: url("../../assets/images/error/character.png") no-repeat 50% 0;
    background-size: clamp(180px, calc(180px + (180 * ((100vw - 320px) / (720 - 320)))), 360px) auto;
    margin-bottom: clamp(54px, calc(54px + (54 * ((100vw - 320px) / (720 - 320)))), 108px);

}
.error .contents > div > p {
    background: #fff;
    border-radius: clamp(15px, calc(15px + (15 * ((100vw - 320px) / (720 - 320)))), 30px);
    padding: clamp(21px, calc(21px + (21 * ((100vw - 320px) / (720 - 320)))), 42px) clamp(22px, calc(22px + (22 * ((100vw - 320px) / (720 - 320)))), 44px);
}
.error .contents > div > p img {
    aspect-ratio: 422 / 162;
    width: 100%;
    height: auto;
}
.error .contents .button-area {
    padding: 0 clamp(22px, calc(22px + (22 * ((100vw - 320px) / (720 - 320)))), 44px);
}
.error .contents .button-area > a {
    font-family: 'Pretendard', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 clamp(5px, calc(5px + (5 * ((100vw - 360px) / (720 - 360)))), 10px);
    text-align: center;
    aspect-ratio: 630 / 130;
    background: url("../../assets/images/shoot-button.png") no-repeat center center;
    background-size: 100% 100%;
    color: #fff;
    font-weight: 500;
    font-size: clamp(25px, calc(25px + (25 * ((100vw - 360px) / (720 - 360)))), 50px);
    width: 100%;
    height: auto;
    max-width: clamp(315px, calc(315px + (315 * ((100vw - 360px) / (720 - 360)))), 630px);
    border: 0;
    text-decoration: none;
}