@charset "utf-8";
/*-------------------------------------------------------------------
	분류그룹 : font
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* 창원단감아삭체 */
@font-face {
    font-family: 'CWDangamAsac-Bold';
    src: url('../fonts/CWDangamAsac-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Pretendard */
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Regular.woff2') format('woff2'),
    url('../fonts/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Medium.woff2') format('woff2'),
    url('../fonts/Pretendard-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
    url('../fonts/Pretendard-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Pretendard';
    src: url('../fonts/Pretendard-Bold.woff2') format('woff2'),
    url('../fonts/Pretendard-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}


/*-------------------------------------------------------------------
	분류그룹 : 초기화
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
/* all style */
* {margin:0px; padding:0px;}
* {box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;}
* {-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;}
* {max-height: 1000000px;}
html, body{height: 100%; color:#000; font-size:16px;font-family: 'Pretendard','Noto Sans KR', sans-serif;}

form, div, p, span, ul, li, dl, dt, textarea, h1, h2, h3, h4 {margin:0px; padding:0px; word-break:keep-all;}
ul, ol, dl, li, dt, dd {list-style:none;}
header, nav, aside, section, address, article, main, footer, hgroup, div {display:block;}
/* link style */
a:link    {color:#424242; text-decoration:none;}
a:visited {color:#424242; text-decoration:none;}
a:active  {color:#424242; text-decoration:none;}
a:hover   {color:#424242; text-decoration:none;}
a:focus    {}


body {overflow-x: auto;}
#wrap{overflow:hidden;position:relative; min-width: 1024px; min-height:100%;background: #fff;}
.con-area {width:100%; max-width:1440px; margin:0 auto;}
/*-------------------------------------------------------------------
	분류그룹 : header
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#header {display: block;}
#header .header-wrap {position: absolute; top: 0; left: 0; min-width: 1024px; width: 100%; z-index: 500; background-color: #fff;}
#header .header-wrap::before {content:""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #232323;}
#header .header-wrap .header-top {display: block; padding: 0 70px; background-color: #232323;}
#header .header-wrap .header-top .relate {display: flex;}
#header .header-wrap .header-top .relate > li {display: block; position: relative; padding-right: 24px;}
#header .header-wrap .header-top .relate > li::before {content:""; position: absolute; top: calc(50% - 2px); right: 10px; width: 4px; height: 4px; border-radius: 50%; background-color: #ffffff;}
#header .header-wrap .header-top .relate > li:last-child {padding-right: 0;}
#header .header-wrap .header-top .relate > li:last-child::before {display: none;}
#header .header-wrap .header-top .relate > li .btn-site {display: block; line-height: 40px; font-weight: 500; font-size: 0.9375rem; color: #ffffff;}

#header .header-wrap .header-area {display: block; position: relative; height: 100px;}
#header .header-wrap .header-area #logo {display: block; position: absolute; top: 50%; left: 50%; padding-bottom: 10px; transform: translate(-50%, -50%);}
#header .header-wrap .header-area #logo > img {display: block; height: 50px;}

@media screen and (max-width: 1600px) {
	#header .header-wrap .header-top {padding-left: 20px;}
}


/*-------------------------------------------------------------------
	분류그룹 : container
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
#container {display: block; position: absolute; top: 0; left: 0; padding-top: 140px; width: 100%; height: 100%; background-color: #ffffff;}
#container .error-page {display: flex; position: relative; height: 100%; flex-direction: column;}
#container .error-page .con-body {display: flex; overflow-x: hidden; overflow-y: auto; flex-grow: 1;}
#container .error-page .con-body::-webkit-scrollbar {width: 8px; height: 8px; box-sizing: content-box;}
#container .error-page .con-body::-webkit-scrollbar-thumb {height: 30%; border-radius: 8px; background: #01ab29;}
#container .error-page .con-body::-webkit-scrollbar-track {padding: 0 5px; border-radius: 8px; background: #e4e4e4;}

#container .error-page .con-body .error-box {display: block; width: 100%; margin: auto 0; padding: 20px; text-align: center;}
#container .error-page .con-body .error-box .tit {display: block; margin-bottom: 24px; line-height: 1; font-weight: 700; font-size: 180px; color: #111; font-family: 'CWDangamAsac-Bold', 'Pretendard','Noto Sans KR', sans-serif;}
#container .error-page .con-body .error-box > img {margin-bottom: 16px;}
#container .error-page .con-body .error-box .txt {display: block; margin-bottom: 35px; line-height: 1.6; font-weight: 600; font-size: 19px; color: #111;}
#container .error-page .con-body .error-box .btn-wrap {display: flex; justify-content: center;}
#container .error-page .con-body .error-box .btn-wrap .btn {margin-right: 20px;}
#container .error-page .con-body .error-box .btn-wrap .btn:last-child {margin-right: 0;}

#container .error-page .con-foot {display: block; padding: 20px 0 40px;}
#container .error-page .con-foot .info {display: flex; margin-bottom: 10px; justify-content: center;}
#container .error-page .con-foot .info > li {display: block; position: relative; margin-right: 10px; padding-right: 11px; line-height: 20px; font-weight: 500; font-size: 0.9375rem;}
#container .error-page .con-foot .info > li::before {content:""; position: absolute; top: calc(50% - 6px); right: 0; width: 1px; height: 12px; background-color: #dddddd;}
#container .error-page .con-foot .copy {display: block; text-transform: uppercase; line-height: 20px; font-weight: 300; font-size: 0.9375rem; color: #bbb; text-align: center;}


/*-------------------------------------------------------------------
	분류그룹 : Form > Buttons
	속성순서 : 레이아웃, 박스 모델, 배경, 폰트/정렬, 기타
-------------------------------------------------------------------*/
.btn {display: inline-block; min-width: 154px; min-height: 47px; padding: 4px 20px; background-color: #f0f0f0; line-height: 39px; font-weight: 500; font-size: 1.25rem; color: #111111; text-align: center; cursor: pointer;}
.btn > span {display: inline-block; line-height: 1;}
/* outline */
.btn.outline {padding: 3px 22px; border: 1px solid #222222; background-color: #ffffff; color: #222222;}
/* colors */
.btn[data-color="bk"] {background-color: #111111; color: #ffffff;}
/* outline - colors */
.btn.outline[data-color="bk"] {border-color: #111111; background-color: #ffffff; color: #111111;}

/*-------------------------------------------------------------------
	@interaction
-------------------------------------------------------------------*/
.btn {box-shadow: 0 0 6px 0 rgba(0,0,0,0); transition: border 0.3s, background 0.3s, color 0.3s, box-shadow 0.3s;}
.btn:hover,
.btn:focus {color:#ffffff; background-color: #01ab29; box-shadow: 0 0 6px 0 rgba(0,0,0,0.2);}
.btn:focus:not(:focus-visible) {outline: none;}
.btn:focus-visible {outline: 2px solid #000000;}
.btn[data-color="bk"]:hover,
.btn[data-color="bk"]:focus {background-color: #333333; color:#ffffff;}
.btn[data-color="bk"]:focus-visible {outline: 2px solid #01ab29;}

.btn.outline:hover,
.btn.outline:focus {border-color: #01ab29; background-color: #ffffff; color:#01ab29;}
.btn.outline[data-color="bk"]:hover,
.btn.outline[data-color="bk"]:focus {border-color: #333333; background-color: #ffffff; color:#333333;}

.btn.outline.active {border-color: #01ab29; background-color: #01ab29; color: #ffffff;}
.btn.outline.active[data-color="a"] {border-color: #01ab29; background-color: #01ab29; color: #ffffff;}