@charset "utf-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/* 사이트 공통 스타일 */
*,*:after,*:before { box-sizing: border-box; }
html { text-shadow: 1px 1px 1px rgba(0,0,0,0.004); }
html, body { width:100%; height:100%; color:#222; }
body { font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#2d2d2d; 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; }
a { text-decoration:none; color:#2d2d2d; }
::selection {background:#2932cb; color:#FFF; text-shadow:none;}
::-moz-selection {background:#2932cb; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#2932cb; color:#FFF; text-shadow:none;}

/*폼 요소*/
input, textarea,option, button { font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#2d2d2d; letter-spacing:-1px; }
input[type=text],input[type=password],textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select { font-family: 'Noto Sans KR','Sans-serif'; font-size: 13px; color:#2d2d2d; letter-spacing: -1px; width: 150px; height: 30px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border-color: #dcdcdc; padding-left: 5px; padding-right: 5px; }
input::-ms-input-placeholder { color: #ccc; }
input::-webkit-input-placeholder { color: #ccc; } 
input::-moz-placeholder { color: #ccc; }

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

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

/*테스트*/
.testBorder { border:1px solid red !important; }
.testBg { background-color:yellow !important; }

/*클리어픽스*/
.clearFix { display:block; clear:both; font-size:0; height:0; }

/* 헤더 */
#header-wrap { height: 120px; background: #2932cb; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1); position: fixed; width: 100%; top: 0; left: 0; z-index: 10; transition: height 0.25s ease; }
#header-wrap .header { width: 1200px; margin: 0 auto; height: 100%; position: relative; }
#header-wrap .header .logo { width: 123px; height: 20px; display: block; position: absolute; z-index: 1; left: 0; top: 50%; margin-top: -10px; }
#header-wrap .header .logo h1 { display: block; width: 100%; height: 100%; background: url(../../img/common/logo_w.png); }

#header-wrap .header .gnb { display: inline-block; height: 100%; position: absolute; top: 0; left: 50%; margin-left: -385px; z-index: 1; }
#header-wrap .header .gnb ul { overflow: hidden; display: inline-block; }
#header-wrap .header .gnb ul li { display: inline-block; float: left; }
#header-wrap .header .gnb ul li a { font-size: 15px; color: #fff; font-family: 'nk-b','Noto Sans KR'; font-weight: 700; padding: 0 20px; line-height: 120px; height: 100%; display: block; transition: background 0.25s ease, line-height 0.25s ease; }
#header-wrap .header .gnb ul li a:hover { background: #1921B3; }

#header-wrap .header .user-tool { position: absolute; top: 50%; right: 0; margin-top: -10px; }
#header-wrap .header .user-tool ul li { display: inline-block; margin-right: 20px; }
#header-wrap .header .user-tool ul li:last-child { margin-right: 0; }
#header-wrap .header .user-tool ul li a { color: #fff; font-size: 13px; font-family: 'nk-b','Noto Sans KR'; font-weight: 700; }
.scroll { height: 100px!important; }
.scroll .header .gnb ul li a { line-height: 100px!important; }

#header-wrap .sub-gnb-area { min-width: 1200px; overflow: hidden; background: #2932cb; border-top: 1px solid #262DAA; height: 0px; transition: height 0.3s ease; }
#header-wrap .sub-gnb-area .sub-gnb { width: 1200px; margin: 0 auto; overflow: hidden; height: 250px; }
#header-wrap .sub-gnb-area .sub-gnb>ul { display: block; height: 100%; overflow: hidden; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li { float: left; display: block; padding: 20px 0 30px; width: 12.5%; border-right: 1px solid #262DAA; height: 100%; padding-left: 18px; transition: background .25s ease; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li:hover { background: #1921B3; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li:last-child { border-right: none; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li .gnb-name { font-family: 'nk-b','Noto Sans KR'; font-weight: 700; color: #fff; font-size: 16.5px; cursor: default; margin-bottom: 10px; display: block; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li { display: block; margin-bottom: 5px; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li:last-child { margin-bottom: 0; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li a { font-size: 14px; color: #fff; position: relative; display: inline-block; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li a:hover { font-family: 'nk-r','Noto Sans KR'; font-weight: 500; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li a:hover { font-family: 'nk-r','Noto Sans KR'; font-weight: 500; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li a:after { width: 0%; position: absolute; z-index: 1; content: ''; left: 0; bottom: -4px; background: #fff; height: 3px; transition: width 0.15s ease; }
#header-wrap .sub-gnb-area .sub-gnb>ul>li>ul>li a:hover:after { width: 100%; }

#header-wrap .header:hover ~ .sub-gnb-area { height: 250px; }
#header-wrap .sub-gnb-area:hover { height: 250px; }

/*버튼효과*/
.bttn-fill { padding: 0; border-width: 0; border-color: transparent; background: transparent; font-weight: 400; cursor: pointer; position: relative; font-family: inherit; z-index: 0; border: none; background-color: #fff; color: #1d89ff; -webkit-transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1); font-family: 'nk-r','Noto Sans KR'; font-weight: 400; }
.bttn-fill { font-size: 15px; height: 47px; display: block; width: 160px; line-height: 45px; border-width: 1px; border-style: solid; border-color: #fff; color: #fff; text-align: center; background-color: transparent; border-radius: 23.5px; overflow: hidden; margin: 15px auto 0; }
.bttn-fill:before { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: #2932cb; content: ''; opacity: 0; -webkit-transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out; transition: transform 0.15s ease-out, opacity 0.15s ease-out, -webkit-transform 0.15s ease-out; z-index: -1; -webkit-transform: scaleX(0); transform: scaleX(0); }
.bttn-fill:hover,
.bttn-fill:focus { color: #fff; -webkit-transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); transition: all 0.5s cubic-bezier(0.02, 0.01, 0.47, 1); border-color: #2932cb; }
.bttn-fill:hover:before,
.bttn-fill:focus:before { opacity: 1; -webkit-transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; transition: transform 0.2s ease-in, opacity 0.2s ease-in;
  transition: transform 0.2s ease-in, opacity 0.2s ease-in, -webkit-transform 0.2s ease-in; -webkit-transform: scaleX(1); transform: scaleX(1); }

.trs-btn { border-color: #2d2d2d; color: #fff; background-color: transparent; color: #2d2d2d; }
.trs-btn:hover { border-color: #2932cb; background-color: #2932cb; }
.trs-btn:before { background-color: #2932cb; }
.trs-btn:hover:after { background: url(../../img/common/detail_arrow_ico.png); }

/* 푸터 */
#footer-wrap { background: #1b2637; min-width: 1200px }
#footer-wrap .footer-navi-wrap { border-bottom: 1px solid #445267; height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi { width: 1200px; margin: 0 auto; overflow: hidden; height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-l { float: left; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-r { float: right; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-l ul li { margin-right: 30px; }
#footer-wrap .footer-navi-wrap .footer-navi .navi-r ul li { margin-left: 30px; }
#footer-wrap .footer-navi-wrap .footer-navi ul { display: inline-block; }
#footer-wrap .footer-navi-wrap .footer-navi ul li { display: inline-block; line-height: 60px; }
#footer-wrap .footer-navi-wrap .footer-navi ul li a { color: #8996aa; font-size: 13px; font-family: 'nk-r','Noto Sans KR'; font-weight: 500; transition: color 0.2s ease; letter-spacing: 0; }
#footer-wrap .footer-navi-wrap .footer-navi ul li a:hover { color: #A1ACBC; }
#footer-wrap .info { width: 1200px; margin: 0 auto; padding: 35px 0; color: #8996aa; font-size: 13px; font-family: 'nk-r','Noto Sans KR'; font-weight: 300;  }
#footer-wrap .info>.box { display: inline-block; margin-right: 30px; }
#footer-wrap .info>.box span,
#footer-wrap .info>.box a { color: #8996aa; letter-spacing: 0; }
#footer-wrap .info>.box .head { display: inline-block; margin-right: 15px; position: relative; }
#footer-wrap .info>.box .head:after { position: absolute; content: ''; width: 1px; height: 11px; background: #8996aa; right: -10px; top: 5px; z-index: 1; }
#footer-wrap .info>.contact { display: block; margin-top: 10px; letter-spacing: 0; }
#footer-wrap .info>.contact address { margin-right: 30px; display: inline-block; }
#footer-wrap .info>.contact .tel { color: #8996aa; display: inline-block; position: relative; padding-left: 20px; }
#footer-wrap .info>.contact .tel:before { position: absolute; content: ''; width: 13px; height: 10px; background: url(../../img/common/tel_ico.png); left: 0; top: 5px; z-index: 1; }
#footer-wrap .copyright-wrap { background: #121b28; height: 42px; }
#footer-wrap .copyright-wrap .copyright { height: 42px; font-size: 12px; color: #48576b; letter-spacing: 0; font-family: 'nk-r','Noto Sans KR'; font-weight: 300; width: 1200px; margin: 0 auto; line-height: 42px; }


/* 기존 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; }

/* 버튼 */
.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:#2932cb; border-top: 1px solid #2932cb; border-bottom: 1px solid #2932cb; }
div.s-paging-area ul a:first-child li:hover { border-left: 1px solid #2932cb; }
div.s-paging-area ul a:last-child li:hover { border-right: 1px solid #2932cb; }
div.s-paging-area ul li.current {color:#FFF; background:#2932cb; border-color: #2932cb; 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; }