@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* default */
html {overflow-y:scroll;}
html {-webkit-text-size-adjust:none;} 
body {font-family:'Noto Sans KR',sans-serif; /*font-size:1.4em;*/ font-size:14px; color:#333; letter-spacing:-0.050em;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,form,fieldset,p,button {margin:0;padding:0; font-family:'Noto Sans KR',sans-serif; color:#333;}
a {text-decoration:none; font-family:'Noto Sans KR',sans-serif; color:#333; border:0;}
a:hover {text-decoration:none; font-family:'Noto Sans KR',sans-serif; color:#333;}
img {border:0;margin:0;padding:0;}

/*input, select{outline-style:none; -webkit-border-radius:0;  -webkit-appearance:none;}*/
select {font-size:14px; /*border:2px solid #444;*/}
table {
border-spacing:0;
border-collapse:collapse;
}

caption {
	display:none;
}

input{margin:0; padding:0;}

ul,li, ol,li {list-style:none; border:0;}

hr {display:none;}

h1 {border:0;}

/*html5 ie 에 적용*/
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption
{ 
    display: block 
}



.wrap {position:absolute; width:500px; top:50%; left:50%; margin-left:-250px; margin-top:-230px; box-sizing: border-box; background:url(/images/404/404_img.png) no-repeat 50% 0; padding-top:256px; text-align:center;}
.wrap_host {background:none; height:500px; margin-top:-255px; padding-top:0; }
.wrap_error {background:none; height:376px; margin-top:-188px;   padding-top:0px;}
.wrap h1 {font-size:20px; color:#355b8c; font-weight:400;}
.wrap p {font-size:15px; color:#555555; line-height:26px; padding-top:20px;}
.wrap p .bar {display:inline-block; margin:0 10px; font-size:12px; vertical-align:top;}
.wrap a {display:inline-block; line-height:40px; border:1px solid #444; font-size:15px; color:#555; padding:0 15px; transition:all 0.5s ease-in; margin-top:25px;}
.wrap a:hover {background:#ef215b; color:#fff; border:1px solid #d1164b; }


/*animation*/
@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}



@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }


@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;
  }

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;
  }
}





.host_img {position:relative; width:274px; height:289px; padding-bottom:30px; margin:0 auto; }
.host_img01 {position:absolute; z-index:9; left:20px;}
.host_img02 {position:absolute; z-index:1; left:20px; animation-name: bounceIn; animation-duration: 1s; animation-iteration-count:infinite;}


.error_img {position:relative; width:196px; height:261px; padding-bottom:30px; margin:0 auto;}
.error_img01 {position:absolute; left:0; z-index:2;}
.error_img02 {position:absolute; left:52px; top:0; z-index:1;}




.error_img03 {position:absolute; left:49px; top:94px; z-index:9;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;

}
.error_img04 {position:absolute; left:111px; top:76px; z-index:9;
-webkit-animation:spin 1s linear infinite;
-moz-animation:spin 1s linear infinite;
animation:spin 1s linear infinite;
}