@charset "utf-8";
/* 사이트 공통 */
*,*:after,*:before { box-sizing: border-box; }
html { overflow-x: hidden; min-width: 1200px; scroll-behavior: smooth; }
body { overflow-x: auto; position: relative; font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#222; letter-spacing: -0.5px; background-color: #fff; text-rendering: auto; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
input,label,textarea,button { font-family: 'Noto Sans KR','Sans-serif'; letter-spacing: -0.5px; outline: 0; }
.raj { font-family: 'Rajdhani','Noto Sans KR','Sans-serif';; }
button { cursor: pointer; }
a { text-decoration:none; color:#222; }
::selection {background:#0084ff; color:#FFF; text-shadow:none;}
::-moz-selection {background:#0084ff; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#0084ff; color:#FFF; text-shadow:none;}
.selectbox {  position: relative; display: inline-block; cursor: pointer; }
.selectbox:hover { background: #F2F5F7; }
.selectbox:after { position: absolute; content: ''; width: 20px; height: 20px; background: url("../../img/common/arrow_down_b.svg"); z-index: 2; opacity: 0.3; right: 0; top: 50%; margin-top: -10px; }
.selectbox select { border: none; color: #999; font-size: 1.2rem; background: none; cursor: pointer; height: 30px; line-height: 30px; padding-right: 25px; padding-left: 10px; max-width: 180px; }
.selectbox:hover select { color: #555; }
.selectbox select option { font-size: 1.2rem; }

/*숨김처리*/
.blind { position:absolute; font-size:0; line-height:0; height:0; }
.temp-display-none { display:none; }

/*노스크롤*/
.no-scroll { overflow: hidden; }

/* 헤더 */
#header_container { height: 135px; background: #fff; box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); }
#header_container .header { width: 1200px; height: 100px; margin: 0 auto; }
#header_container .header .logo { float: left; display: block; height: 100%; width: 108px; margin-right: 10px; margin-top: 0; }
#header_container .header .logo a { display: block; height: 100%; position: relative; padding: 5px 0; overflow: hidden; }
#header_container .header .logo a img { max-height: calc(100% - 15px); max-width: 100%; min-width: 108px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: block; }
#header_container .header .menu-wrap { float: left; height: 100%; }
#header_container .header .menu-wrap ul { height: 100%; }
#header_container .header .menu-wrap ul li { float: left; height: 100%; }
#header_container .header .menu-wrap ul li a { height: 100%; font-size: 1.5rem; font-weight: 700; display: block; line-height: 105px; padding: 0 17px; }
#header_container .header .menu-wrap ul li a:hover { color: #0084ff; text-decoration: none; }

#header_container .header .search-area { float: right; }
#header_container .header .search-input { height: 36px; width: 110px; position: relative; margin-top: 35px; }
#header_container .header .search-input input[type=text] { border-radius: 18px; border: 1px solid #dee3eb; background: #f1f1f1; font-size: 1.2rem; padding-left: 20px; transition: background .25s ease; height: 100%; width: 100%; font-weight: 300; letter-spacing: -1px; }
#header_container .header .search-input input[type=text]:hover,
#header_container .header .search-input input[type=text]:active,
#header_container .header .search-input input[type=text]:focus { background: #fff; border-color: #C7CFDC; }
#header_container .header .search-input .search-btn { background: none; border: none; outline: 0; width: 34px; position: absolute; top: 0; right: 5px; width: 30px; cursor: pointer; }
#header_container .header .search-input .search-btn img { opacity: .5; width: 18px; height: 16px; margin-top: 10px; }

#header_container .user-tool-container { height: 35px; background: #fff; border-bottom: 1px solid #edf0f5; }
#header_container .user-tool-container .user-tool { width: 1200px; margin: 0 auto; }
#header_container .user-tool-container .user-tool .visit-count-area { float: left; }
#header_container .user-tool-container .user-tool .visit-count-area>img { float: left; width: 15px; height: 15px; opacity: 0.7; margin-top: 10px; margin-right: 8px; }
#header_container .user-tool-container .user-tool .visit-count-area>div { float: left; margin-right: 15px; }
#header_container .user-tool-container .user-tool .visit-count-area>div span { line-height: 34px; font-size: 1.2rem; color: #777; font-weight: 400; }
#header_container .user-tool-container .user-tool .visit-count-area>div span.raj { font-size: 1.3rem; letter-spacing: 0; font-weight: 500; }
#header_container .user-tool-container .user-tool .visit-count-area>div span.visit-text { margin-right: 3px; font-weight: 500; }

#header_container .user-tool-container .user-tool .user-tool-area { float: right; }
#header_container .user-tool-container .user-tool .user-tool-area a { line-height: 34px; font-size: 1.2rem; color: #999; font-weight: 400; margin-left: 20px; }
#header_container .user-tool-container .user-tool .user-tool-area a.login-btn { position: relative; }
#header_container .user-tool-container .user-tool .user-tool-area a.login-btn:after { position: absolute; content: ''; width: 1px; height: 10px; background: #dcdcdc; right: -11px; top: 5px; }
/* 푸터 */
#footer_container { background: #fff; border-top: 1px solid #dee3eb; }
#footer_container .footer-gnb-container { border-bottom: 1px solid #dee3eb; height: 60px; }
#footer_container .footer-gnb-container .footer-gnb { width: 1200px; margin: 0 auto; height: 100%; }
#footer_container .footer-gnb-container .footer-gnb ul { height: 100%; }
#footer_container .footer-gnb-container .footer-gnb ul li { float: left; height: 100%; margin-right: 30px; }
#footer_container .footer-gnb-container .footer-gnb ul li a { display: block; height: 100%; line-height: 59px; font-size: 1.2rem; color: #999; font-weight: 500; }
#footer_container .footer-gnb-container .footer-gnb ul li a:hover { color: #555; }
#footer_container .footer { width: 1200px; margin: 0 auto;  padding: 20px 0 50px; }
#footer_container .footer .info-wrap { margin-bottom: 10px; }
#footer_container .footer .info-wrap .info { display: inline-block; margin-right: 30px; margin-bottom: 8px; }
#footer_container .footer .info-wrap .info p { font-size: 1.2rem; color: #999;  }
#footer_container .footer .info-wrap .info p.department { margin-right: 18px; position: relative; display: inline-block; }
#footer_container .footer .info-wrap .info p.content { display: inline-block; }
#footer_container .footer .info-wrap .info p.department:after { height: 10px; width: 1px; background: #dcdcdc; position: absolute; content: ''; right: -10px; top: 5px; }

#footer_container .footer p { font-size: 1.2rem; color: #999; white-space: pre-line; }
#footer_container .footer p.copy { letter-spacing: 0; }

/* 기존 CSS 추가 */

/* 커서 */
.pointer { cursor: pointer !important; }
.hover-underline:HOVER { text-decoration: underline; }

/* 정렬 */
.right { float: right; }
.text-left { text-align: left; }

/* font */
.bold { font-weight: bold;  }

/* font color */
.red { color: red; }
.yellow { color: #e8c533; }

/* 링크 */
.lnk-type-01 { color: #56b651; text-decoration: underline; }

/* 라벨 */
span.label-new { background-color: #e79b23; font-size: 10px; color: #FFFFFF; font-weight: bold; font-style: italic; padding: 1px 6px 1px 4px; border-radius: 2px; }
span.recent-label { background: red; padding: 0px 5px 0px 4px; border-radius: 50%; color: #fff; font-size: 0.7rem; margin-left: 5px;}
span.new-post { display: inline-block; vertical-align: middle; background: #ff2828; padding: 2px 8px; font-size: 11px; color: #fff; border-radius: 3px;}

/* 버튼 */
.btn-type-01 { border: 1px solid #d5dde9; border-radius: 3px; color: #FFFFFF; padding: 1px 10px; }
.btn-type-02 { background-color: #8a8a8a; color: #FFFFFF; font-weight: bold; padding: 2px 10px; border-radius: 3px; }
.btn-type-03 { 
	font-weight: bold;
	font-size: 11px;
	color: #a7b8ce;
	border: 1px solid #031831;
	background-color: #072243;
	border-radius: 3px;
	padding: 5px 10px;
	margin-left: 15px;
	box-shadow: inset 0px 1px 2px 0px #1c3c62, inset -1px 0px 3px 0px #08203d, inset 0px -1px 3px 0px #021226, inset 1px 0px 2px 0px #102f55;
}
.btn-type-04 { display: block; text-align: center; color: #e7eef6; background-color: #324662; font-size: 15px; font-weight: bold; padding: 7px 0; border-radius: 2px; }
.btn-type-05 { border-radius: 3px; padding: 4px 15px; font-size: 12px; color: #FFF; background-color: #324661; margin-left: 5px; border: 1px solid #324661; }
.btn-type-06 { border-radius: 3px; padding: 4px 15px; font-size: 12px; color: #FFF; background-color: #969696; margin-left: 5px; border: 1px solid #969696; }
.btn-type-07 { background-color: #426e97; color: #FFFFFF; padding: 5px 10px 7px 10px; border-radius: 3px; font-family: 'Noto Sans KR',Nanum; }
.btn-type-08 { background-color: #f5f5f5; border: 1px solid #dcdcdc; color: #595959; border-radius: 1px; padding: 2px 10px; }
.btn-type-09 { font-weight: bold;font-size: 11px;color: #fff;border: 1px solid #076ab5;background-color: #076ab5;border-radius: 3px;padding: 5px 10px;margin-left:5px;}

/* 텍스트 관련 */
.search-result-count {font-weight:bold;text-align:right; vertical-align: top; }

/* 페이징 영역 */
div.s-paging-area { margin: 30px 0; text-align: right; overflow: hidden; }
div.s-paging-area ul { overflow: hidden; float: right; }
div.s-paging-area ul a { display: block; height: 100%; float: left; }
div.s-paging-area ul li { display: inline-block; padding: 11px 12px; font-size: 12px; font-weight: normal; color: #aaa; text-align: center; line-height: 12px; border: 1px solid #dcdcdc; cursor: pointer; border-right: none; min-width: 35px; }
div.s-paging-area ul a:last-child li { border-right: 1px solid #dcdcdc; width: 35px; }
div.s-paging-area ul li:hover {color:#FFF; background-color:#0084ff; border-top: 1px solid #0084ff; border-bottom: 1px solid #0084ff; }
div.s-paging-area ul a:first-child li:hover { border-left: 1px solid #0084ff; }
div.s-paging-area ul a:last-child li:hover { border-right: 1px solid #0084ff; }
div.s-paging-area ul li.current {color:#FFF; background:#0084ff; border-color: #0084ff; border-left: 1px solid #dcdcdc; }

/**************** 글자수 줄임 *********************/
.ellipsis_50 { width:50px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_70 { width:70px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_80 { width:80px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_100 { width:100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_120 { width:120px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_130 { width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_150 { width:150px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_200 { width:200px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_220 { width:220px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_250 { width:250px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_300 { width:300px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_350 { width:350px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_370 { width:370px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_400 { width:400px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_450 { width:450px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_500 { width:500px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_590 { width:590px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_600 { width:600px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.ellipsis_650 { width:650px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 체크박스 */
input[type=checkbox] { display: none; }
input[type=checkbox] + label { padding-left: 20px; position: relative; padding-right: 5px; cursor: pointer; font-size: 12px; color: #989899; margin:0 3px; }
input[type=checkbox] + label:before { width: 15px; height: 15px; background: url("../../img/common/check.png"); background-size: 15px 30px; background-position: 0 0; position: absolute; content: ''; left: 0; top: 2px; }
input[type=checkbox]:checked + label:before { background: url("../../img/common/check.png"); background-size: 15px 30px; background-position: 0 -15px; }

/* 로딩창 */
.loading-pop-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.2);
}
/*loading-pop-wrap을 이미지 업로드 팝업과 게시판 파일 업로드 동시에 쓰기위해 min-width를 분리*/
.loading-pop-wrap.width-960 {
  min-width: 960px;
}
.loading-pop-wrap .loading-pop-area {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 도넛 */
.loading-pop-wrap .loading-pop-area > .loading {
  width: 45px;
  height: 45px;
  position: absolute;
  left: 50%;
  margin-left: -22.5px;
  top: 50%;
  margin-top: -22.5px;
}
.loading-pop-wrap .loading-pop-area > .loading .loading-bar {
  border-top: 6px solid transparent;
  border-bottom: 6px solid #2ea7e0;
  border-left: 6px solid #2ea7e0;
  border-right: 6px solid transparent;
  animation: loading 0.8s cubic-bezier(0.4, 0.18, 0.63, 0.86) 0.2s infinite;
  border-radius: 80px;
  width: 45px;
  height: 45px;
  display: block;
}
@keyframes loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/**************** 너비 컴포넌트 percentage width *********************/
.w-40pct { width: 40% !important; }
.w-50pct { width: 50% !important; }
.w-100pct { width: 100% !important; }


/**************** 너비 컴포넌트 px width *********************/
.w-40px { width: 40px !important; }
.w-50px { width: 50px !important; }
.w-60px { width: 60px !important; }
.w-70px { width: 70px !important; }
.w-80px { width: 80px !important; }
.w-90px { width: 90px !important; }
.w-100px { width: 100px !important; }
.w-200px { width: 200px !important; }
.w-300px { width: 300px !important; }
.w-400px { width: 400px !important; }



/* 테이블 */
.normal-table { position: relative; margin-top: 10px;}
.normal-table table { width: 100%; font-size: 13px; border-top: 2px solid #3d5a7c; table-layout: fixed; text-align: center; border-right: 1px solid #dee3eb; }
.normal-table table tr {border-bottom: 1px solid #dee3eb;}
.normal-table table tr th { vertical-align: middle; padding: 8px; font-weight: bold; text-align: center; background: #f2f2f2;  }
.normal-table table tr td { vertical-align: middle;  padding: 8px; border-left: 1px solid #dee3eb; }
.normal-table table tr td.txt-left { text-align: left; }
.normal-table table tr td .a-link {text-decoration: underline; color: #4679c9;}
.normal-table table thead tr { background: #ECECEC; border-top: 2px solid #3d5a7c; }

/* 코멘트 */
div.contents div.page-contents div.s-page-content div.comment-area div.comment-input-area.disabled { padding: 0;}
div.contents div.page-contents div.s-page-content div.comment-area div.comment-input-area.disabled .comment-disabled-area { width: 100%; position: relative; left: 0; top: 0px; z-index: 1; background: rgb(240 240 240 / 20%); text-align: center; font-size: 13px; font-weight: 500; color: #363636; padding: 30px 0; letter-spacing: 0.5px; }
div.contents div.page-contents div.s-page-content div.comment-area div.comment-input-area.disabled .comment-disabled-area a {  color: #f41414; font-weight: 600; padding: 0 4px 0 4px; text-decoration: underline; }

/* 토글 버튼 */
.toggle-switch { display: inline-block; vertical-align: middle; }
.toggle-switch .switch { width: 35px; height: 18px; display: inline-block; position: relative; border-radius: 30px; background-color: #b7b7b7; cursor: pointer; }
.toggle-switch .switch .button { width: 12px; height: 12px; position: absolute; top: 50%; left: 5px; transform: translateY(-50%); border-radius: 50%; background: #fff; }
.toggle-switch .label { display: inline-block; font-size: 14px; font-weight: 800; padding: 0 3px; color: #999; position: relative; top: -3px; }
.toggle-switch input[type=checkbox] { display: none; }
.toggle-switch input[type=checkbox]:checked ~ .label { color: #4265ED; }
.toggle-switch input[type=checkbox]:checked ~ .switch { background: #4265ED; }
.toggle-switch input[type=checkbox]:checked ~ .switch .button { left: calc(100% - 17px); background: #fff; }
.toggle-switch .label,
.toggle-switch .switch,
.toggle-switch .button { transition: color 0.2s ease-in, background 0.2s ease-in, left 0.2s ease-in; }
.toggle-switch input[type=checkbox]:disabled ~ .label,
.toggle-switch input[type=checkbox]:disabled ~ label { cursor: no-drop; opacity: .5; }
.toggle-switch input[type=checkbox] + label:before { width: 15px; height: 15px; background: none; background-size: 15px 30px; background-position: 0 0; position: absolute; content: ''; left: 0; top: 2px; }
.toggle-switch input[type=checkbox]:checked + label:before { background: none; background-size: 15px 30px; background-position: 0 -15px; }