@charset "utf-8";
@import url("/font/NanumSquareNeo.css");
@import url("/font/titillium_web.css");
@import url("/font/remixicon.css");

*{margin:0px; padding:0px; font-family:"NanumSquareNeo", "Malgun Gothic","맑은고딕",dotum,tahoma,verdana,sans-serif; color:#333;}

/* 기존 스타일 (404, 500 외 다른 error 페이지) */
.topLogo {margin:20px}
.errorWrap {background:url('/error/img/icon_error.gif') no-repeat center top; padding:130px 25px 35px; margin:150px auto 0; text-align:center; width:530px;  position:relative; overflow:hidden}
.topText {color:#333; font-size:25px; font-weight:normal; display:block; padding:0 0 30px; letter-spacing:-1px; line-height:1.3;}
.topText strong {display:block; font-size:60px}
.top_tt02 strong {display:block; font-size:35px !important; margin-bottom:10px}
.conText {border-top:1px solid #e0e0e0; padding:30px 0 40px; text-align:center; font-size:14px; color:#666; line-height:22px; letter-spacing:-1px}
.btnBox {text-align:center}
.bottom {width:650px; height:10px; margin:0 auto; background-position: 0 -350px;}


/* logo 스타일 (404, 500에 적용) */
.errorWrap.logo {display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100vh; margin:0; padding:0; padding-bottom:150px; box-sizing:border-box; background:url("../img/symbol.png") no-repeat right -10% bottom -25%;}
.errorWrap.logo .num {margin-bottom:40px;}
.errorWrap.logo .num span {font-family:"titillium"; font-size:170px; font-weight:700; padding:0 10px; line-height:1;}
.errorWrap.logo .num span:nth-child(1) {color:#96C84B;}
.errorWrap.logo .num span:nth-child(2) {color:#51BBBD;}
.errorWrap.logo .num span:nth-child(3) {color:#38A4CE;}
.errorWrap.logo .big {margin-bottom:24px; font-size:30px; font-weight:700;}
.errorWrap.logo .txt {margin-bottom:40px; font-size:16px; word-break:keep-all; width:440px; color:#555; line-height:1.3; text-align:center;}
.errorWrap.logo .btn_box { display: flex; flex-direction: row; justify-content: center; align-items: center; gap:16px; }
.errorWrap.logo .btn_box .btn { display: flex; flex-direction: row; justify-content:center; align-items: center; width:200px; height:60px; padding:5px 10px; border: 1px solid #999; background: #fff; font-size:15px; font-weight: 600; border-radius:4px; transition: 0.3s; position: relative; box-sizing: border-box; text-decoration:none; transition:0.3s;}
.errorWrap.logo .btn_box .btn::after { content:"\ea6e";font-family: "remixicon"; margin-left: auto;}


@media screen and (min-width:1025px) {
	.errorWrap.logo .btn_box .btn:hover {background:#1B2539; color:#fff;}
}

@media screen and (max-width:1440px) {
	.errorWrap.logo {background-size:700px; background-position:right -70px bottom -90px;}
}

@media screen and (max-width:1024px) {
	.errorWrap.logo {background-size:70%; background-position:right -60px bottom -60px;}
	.errorWrap.logo .num span {font-size:110px;}
	.errorWrap.logo .big {font-size:24px;}
	.errorWrap.logo .txt {font-size:14px;}
	.errorWrap.logo .btn_box .btn {width:130px; height:50px;}
}

@media screen and (max-width:480px) {
	.errorWrap.logo {background-size:90%; background-position:right -30px bottom -40px;}
	.errorWrap.logo .num span {font-size:70px; padding:0 5px;}
	.errorWrap.logo .big {font-size:22px;}
	.errorWrap.logo .txt {width:100%; padding:0 20px; box-sizing:border-box;}
	.errorWrap.logo .btn_box .btn {width:130px;}
}