html, body {width: 100%; height: 100%; position: relative; display: block; font-family: 'Noto Sans KR'; margin: 0; padding: 0;}

.wrap{ width: 100%; height: 100%; overflow: hidden;}
.bg-wrap{ background: url("../images/bg/404.png") no-repeat 0 0; background-size: cover; position: relative;}
.con-box{position: relative; top: 30%; width: 850px; margin: 0 auto; }
.con-box a{ color: #ffffff; font-size: 14px; display: block; padding: 20px 73px; text-align: center; border: 2px solid #ffffff; border-radius: 50px;
    margin: 34px auto; width: 100px; background: #587dbc; font-family: 'Noto Sans KR';}
.txt_box {float: right; font-size: 25px; margin-top: -70px; margin-left: 20px; text-align: center;}
.txt_box span {display: block; font-size: 220px; text-transform: uppercase;
    background: linear-gradient(to right, #567cbc 0%, #594cab 100%);
    background: -webkit-linear-gradient(to right, #567cbc 0%, #594cab 100%);
    background: -moz-linear-gradient(to right, #567cbc 0%, #594cab 100%);
    /* Opera */
    background: -o-linear-gradient(to right, #567cbc 0%, #594cab 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; color: #567cbc;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#567cbc', endColorstr='#594cab', GradientType=1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.t_text {font-family: 'NanumGothic'; font-size: 25px; color: #627299; line-height: 34px;}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    /* IE10+ CSS styles go here */
    .txt_box span {
        color: #567cbc;
        background: transparent;
    }
}


/* Tablet Device */
@media screen and (max-width : 768px){
    .con-box{top: 0;	width: 50%;}
    .txt_box {float: left; margin-top: -30px;}
    .txt_box span {font-size: 150px;}
    .t_text {font-size: 20px;}
}

/* Desktop Device */
@media screen and (min-width : 992px) {

}