@charset "utf-8";

.errorW{text-align: center;}
.error{width: 638px; margin: 0 auto; background-color: #f1f4fa; padding: 34px 0; border-radius: 30px; margin-bottom: 15px;}
.error > img{margin-bottom: 30px; width: 97px;}
.error h3{font-size: 23px; font-family: PretendardB, sans-serif; color: #3e3e3e; margin-bottom: 3px;}
.error p{font-size: 17px; font-family: Pretendard, sans-serif; color: #1b1b1b;}
.error ul{width: 390px; margin: 30px auto; text-align: left; padding: 0 3px; box-sizing: border-box;}
.error ul li{margin-bottom: 8px;}
.error ul li{font-size: 14px; font-family: PretendardM, sans-serif; color: #6b6b6b; line-height: 1.2em;}
.errorW .btnW a{display: inline-block; font-size: 12px; font-family: PretendardB, sans-serif; color: #757577; text-align: center; min-width: 98px; padding: 8px 15px; border-radius: 12px; border: 1px solid #aaa; box-sizing: border-box; margin: 0 4px;}
.errorW .btnW a.colorBtn{background-color: #3a36db; border-color: #3a36db; color: #ffffff;}


html[data-dark=true] .error{background-color: #384455;}
html[data-dark=true] .error h3{color: #f2f2f2;}
html[data-dark=true] .error p{color: #ffffff;}
html[data-dark=true] .error ul li{color: #c8c8c8;}
html[data-dark=true] .errorW .btnW a{border-color: #384455; background-color: #2b3441; color: #99b2c6;}
html[data-dark=true] .errorW .btnW a.colorBtn{background-color: #3a36db; color: #ffffff;}

@media (max-width: 680px) {
    .error{
        width: 80vw;
    }
}
@media (max-width: 530px) {
    .error{
        width: 70vw;
    }
    .error h3 {
        font-size: 1.5rem !important;
    }
    p{
        font-size: 0.8rem !important;
    }
    .error ul{
        width: 80%;
    }
    .error ul li{
        font-size: 12px;
        word-break: auto-phrase;
    }
}