@charset "utf-8";
/*	
	-----------------------------------------------
	* error.css (오류페이지 전용)
	-----------------------------------------------
*/

@import url('https://fonts.googleapis.com/css?family=Black+Han+Sans|Noto+Sans+KR:100,400,500&display=swap&subset=korean');
body {background: linear-gradient(104deg, #FFEFEF 0.25%, #F3E3FF 100.79%); position: relative;min-height: 100vh;height: 100%; padding:5em;}
/* body:before, body:after {content: '';position: absolute;z-index: -1;}
body:before {width: 436px;height: 152px;background:url('../img/error/bg_shape_01.png') 0 0 no-repeat;left: 0;top: 0;}
body:after {width: 742px;height: 472px;background:url('../img/error/bg_shape_02.png') 100% 0 no-repeat;right: 0;bottom: 0;} */
* {font-family:'Noto Sans KR', sans-serif;font-size:20px; line-height:1.3;}

#wrap {position:relative; width:30em; min-width:auto; min-height:auto; margin:0 auto; text-align:center; padding:5em 2.5em; background:#fff; border-radius:1em; word-break:keep-all; }
#wrap .txt {position:relative; margin-bottom:2em; padding-top:17em; }
#wrap .txt:before {content:''; position:absolute; width:15em; height:15em; top:0; left:50%; transform:translateX(-50%); background:url(../img/error/error_img01.svg) no-repeat top center; background-size:100% auto;}
#wrap .txt h1 {font-size:2em; font-weight:700; margin-bottom:.5em; color:#222;}
#wrap .txt p {font-size:.9em;}
#wrap .txt ul {position:relative; margin-top:1em;}
#wrap .txt ul li {margin:.25em 0; font-size:1em;}
#wrap .txt ul li span {display:inline-block; padding:.25em .5em; background:#f8f8f8; font-size:.9em; border-radius:.25em; margin-right:.5em;}
#wrap .txt ul li br {display:none;}
#wrap .txt ul li a {color:#D22259; text-decoration:underline;}
#wrap a.button {background:#4C257E; color:#fff; font-size:.8em; padding:.5em 1em; border-radius:.25em;}
#wrap a.button:hover {text-decoration:underline;}	

@media all and (max-width:768px) {
	body {padding:3em;}
	#wrap {width:100%; padding:3em 2em;}
	#wrap .txt {padding-top:12em;}
	#wrap .txt:before {width:10em; height:10em;}
	#wrap .txt h1 {font-size:1.75em;}
}

@media all and (max-width:640px) {
	#wrap .txt ul li span {margin-bottom:.25em;}
	#wrap .txt ul li br {display:block;}
	
	#wrap .txt ul li + li {margin-top:.5em;}
}

@media all and (max-width:390px) {
	* {font-size:16px;}
	#wrap {width:100%;}
	#wrap .txt {padding-top:12em;}
	#wrap .txt:before {width:10em; height:10em;}
	#wrap .txt h1 {font-size:1.75em;}
}

@media all and (max-width:320px) {
	body {padding:3em 1.5em;}
	#wrap {padding:2em 1.5em;}
	#wrap .txt {padding-top:8em;}
	#wrap .txt:before {width:8em; height:8em;}
	#wrap .txt h1 {font-size:1.75em;}
}