@charset "utf-8";
/*
CDN사용을 위해 include jsp 로 옮김.
@font-face {
  font-family: 'Nanum Square';
  font-style: normal;
  font-weight: 400;
  src: url(./fonts/NanumSquareR.eot);
  src: local('Nanum Square Regular'),
       local('NanumSquareR'),
       url('../css/fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'),
       url('../css/fonts/NanumSquareR.woff2') format('woff2'),
       url('../css/fonts/NanumSquareR.woff') format('woff'),
       url('../css/fonts/NanumSquareR.ttf') format('truetype');
}

@font-face {
  font-family: 'Nanum Square';
  font-style: bold;
  font-weight: 700;
  src: url(./fonts/NanumSquareB.eot);
  src: local('Nanum Square Bold'),
       local('NanumSquareB'),
       url('../css/fonts/NanumSquareB.eot?#iefix') format('embedded-opentype'),
       url('../css/fonts/NanumSquareB.woff2') format('woff2'),
       url('../css/fonts/NanumSquareB.woff') format('woff'),
       url('../css/fonts/NanumSquareB.ttf') format('truetype');
}

@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 400;
	src: url('../css/fonts/NanumGothic-Regular.eot');
	src: url('../css/fonts/NanumGothic-Regular.eot?#iefix') format('embedded-opentype'),
		 url('../css/fonts/NanumGothic-Regular.woff2') format('woff2'),
		 url('../css/fonts/NanumGothic-Regular.woff') format('woff'),
		 url('../css/fonts/NanumGothic-Regular.ttf') format('truetype');
  }
  @font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 700;
	src: url('../css/fonts/NanumGothic-Bold.eot');
	src: url('../css/fonts/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),
		 url('../css/fonts/NanumGothic-Bold.woff2') format('woff2'),
		 url('../css/fonts/NanumGothic-Bold.woff') format('woff'),
		 url('../css/fonts/NanumGothic-Bold.ttf') format('truetype');
  }
  @font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 800;
	src: url('../css/fonts/NanumGothic-ExtraBold.eot');
	src: url('../css/fonts/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype'),
		 url('../css/fonts/NanumGothic-ExtraBold.woff2') format('woff2'),
		 url('../css/fonts/NanumGothic-ExtraBold.woff') format('woff'),
		 url('../css/fonts/NanumGothic-ExtraBold.ttf') format('truetype');

  }

  @font-face {
	 font-family: 's-core_dream';
	 font-weight: 400;
	 font-style: normal;
	 src: url('../css/fonts/scdream4.woff2') format('woff2'),
		  url('../css/fonts/scdream4.woff') format('woff');
	}

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

	@font-face {
	 font-family: 's-core_dream';
	 font-weight: 700;
	 font-style: normal;
	 src: url('../css/fonts/scdream6.woff2') format('woff2'),
		  url('../css/fonts/scdream6.woff') format('woff');
	}
*/


/* ======================================== Reset ======================================== */

*{-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(255,255,255,0);box-sizing:border-box;}
html,body{width:100%;height:100%;-webkit-font-smoothing:antialiased;font-size:1rem;}
body,p,h1,h2,h2,h3,h4,h6,ul,ol,li,div,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select,pre{margin:0;padding:0;letter-spacing:-1px;font-family:"Nanum Square","Malgun Gothic",sans-serif;}
h1{    font-size: 0;
    margin-block-start:0;
    margin-block-end: 0;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
	}
body{color:#0c0c0c;}
ul,ol,li{display:block;list-style:none;list-style-type:none;}
fieldset, button,img, input[type='submit']{border:0px none;}
fieldset{margin-inline-start:0;margin-inline-end:0;padding-block-start:0;padding-inline-start:0;padding-inline-end:0;padding-block-end:0;min-inline-size:inherit;}
button,input[type='submit']{background:none;}
img,input,button,label,select{vertical-align:middle;}
b{font-weight:800;}
i,em,address{font-style:normal;}
a{text-decoration:none;color:#0c0c0c;}
a:hover{text-decoration:none;}
table{border-spacing:0;table-layout:fixed;width:100%;}
article,aside,hgroup,header,footer,figure,figcaption,nav,section{display:block;}
legend,caption,.soundOnly{ position:absolute; overflow:hidden; clip:rect(0,0,0,0); border:0; width:1px; height:1px; padding:0; margin:-1px; text-indent:-10000px;}
input::-webkit-input-placeholder { color:#a0a0a0 !important; font-size:100%;}
textarea::-webkit-input-placeholder { color:#a0a0a0 !important;font-size:100%;}
.inner{position:relative;width:1280px;margin:0 auto;}

.webOnly{display:block !important;}
.mobileOnly{display:none !important;}

/* ==============================================================================================================
= 너비, 높이 사이즈를 공통으로 사용하기 위한 클래스 부여
============================================================================================================== */
.w5p{width:5%}.w8p{width:8%}.w10p{width:10% !important}.w12p{width:12%}.w15p{width:15%}.w18p{width:18%}.w20p{width:20% !important}.w25p{width:25%}.w30p{width:30%}
.w35p{width:38%}.w35p{width:38%}.w40p{width:40% !important}.w45p{width:45%}.w48p{width:48%}.w49p{width:49%}.w50p{width:50% !important}.w55p{width:55%}.w60p{width:60%}
.w65p{width:65%}.w70p{width:70%}.w75p{width:75%}.w80p{width:80% !important}.w85p{width:85%}.w86p{width:86%}.w87p{width:87%}.w88p{width:88%}.w90p{width:90%}.w95p{width:95%}.w100p{width:99.9%}

.f_l{float:left;}
.f_r{float:right;}

/* 그리드 영역 */
[class*="col-"] {float: left;}
.row{position:relative;}
.row::after {content: "";clear: both;display:table;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* ==============================================================================================================
= Div Group
= 화면 분할을 위해서 사용함
= 사용방법 : cols2(개수) 클래스를 통해서 개수만큼 균등분할하거나 w20(%)p 클래스를 통해서 분할 사이즈 조정
============================================================================================================== */
.divGroup{margin:0 -10px;}
.divGroup:after{display:block;content:'';clear:both;}
.divGroup > div{float:left;padding:0 10px;}
.divGroup.cols2 > div{width:50%;}
.divGroup.cols3 > div{width:33.3333%;}
.divGroup.cols4 > div{width:25%;}
.divGroup.cols5 > div{width:20%;}


/* ==============================================================================================================
= 폼 아이템별 기본스타일 지정
============================================================================================================== */
input[type='text'],input[type='password'],input[type='number']{
padding:0 5px;border:1px #c3c3c3 solid;-webkit-appearance: none;-webkit-border-radius: 0;}
select{padding:0 36px 0 5px;background:#fff url("../images/select_bg.png") right 50% no-repeat;-webkit-appearance:none;}
select::-ms-expand { display:none; }
textarea{padding:5px;border:1px #ddd solid;resize:vertical;font-size:100%;}
input[readonly],
input[readonly="readonly"],
input[disabled],
input[disabled="disabled"] { background:#f5f5f5; color:#000;}
input[type='checkbox'],input[type='radio']{margin-right:5px;}


/* ==============================================================================================================
= Paging 기본스타일 지정
============================================================================================================== */
.paging{text-align:center;}
.paging a{border:solid 1px #d1d1d1;border-radius:.25rem;width:1.8rem;height:1.8rem;line-height:1.8rem;text-align:center;display:inline-block;vertical-align:middle;}
.paging a.on{color:#fff;background:#282828;border:solid 1px #282828;}
.paging button{border:solid 1px #d1d1d1;border-radius:.25rem;width:1.8rem;height:1.8rem;line-height:1.8rem;text-align:center;display:inline-block;vertical-align:middle;}
.paging button.first{background:#ebebeb url("../images/btn_paging_first.png") 50% 50% no-repeat;text-indent:-99999px;}
.paging button.prev{background:#ebebeb url("../images/btn_paging_prev.png") 50% 50% no-repeat;text-indent:-99999px;}
.paging button.next{background:#ebebeb url("../images/btn_paging_next.png") 50% 50% no-repeat;text-indent:-99999px;}
.paging button.last{background:#ebebeb url("../images/btn_paging_last.png") 50% 50% no-repeat;text-indent:-99999px;}


/* ==============================================================================================================
= Tab 기본스타일 지정
============================================================================================================== */
.tabBar{text-align:left;margin-bottom:1.25rem}
.tabBar:after{display:block;content:"";clear:both;}
.tabBar > li{position:relative;display:inline-block;}
.tabBar > li.active{z-index:2;}
.tabBar.cols2 li{width:50%;}
.tabBar.cols3 li{width:33.33%;}
.tabPage{display:none;}
.tabPage.active{display:block;}


/* ==============================================================================================================
= Button 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.btnArea{margin:2rem 0;text-align:center;}
.btnArea:after{display:block;clear:both;content:'';}


/* ==============================================================================================================
= Modal 기본스타일 지정
= 사이즈 : btn_ss < btn_s < btn_inline < btn_m < btn_l
============================================================================================================== */
.modalWrap{position:fixed;top:0;left:-100%;bottom:0;width:100%;background:#fff;opacity:0;z-index:-1;transition-duration:0.5s;}
.modalWrap.active{opacity:1;z-index:101;}
.modalWrap.small{margin-left:-250px;width:500px;}
.modalWrap.wide{width:100%;left:0;}
.modalWrap .modalTitle{position:relative;padding:0 0.9375rem;height:2.5rem;background:#484c51;}
.modalWrap .modalTitle h2{display:block;font-size:16px;font-weight:bold;color:#fff;line-height:46px;}
.modalWrap .modalTitle .btn_modalClose{display:block;position:absolute;top:0;right:0;width:46px;height:46px;text-indent:-9999em;background:url("../images/btn_modalClose.png") no-repeat center center;}
.modalWrap .modalContent{overflow-y:auto;height:100%;padding:20px;}
.modalWrap .modalContent .btnArea{margin:0;}
.modalWrap .modalContent .btnArea + *{margin-top:20px;}

/* ==============================================================================================================
= Datepicker를 사용중인 입력박스, 달력형태 스타일 지정
= 사용방법 : 입력박스에 useDatepicker / useMonthpicker 클래스를 추가하여 사용함
============================================================================================================== */
input.useDatepicker{background:#fff url("../images/caleandar_icon.png") no-repeat 95% center;background-size:auto 60%;font-size:90%;}
input.useMonthpicker{background:#fff url("../images/caleandar_icon.png") no-repeat 95% center;background-size:auto 60%;font-size:90%;}
#ui-datepicker-div{display:none;width:180px;background:#fff;border:1px #ccc solid;z-index:102 !important;}
.ui-datepicker{position:relative;padding:5px;}
.ui-datepicker table{width:100%;font-size:12px;}
.ui-datepicker table thead th{height:24px;color:#777;line-height:24px;text-align:center;}
.ui-datepicker table tbody td{width:14.2857%;text-align:center;height:22px;}
.ui-datepicker table tbody td a{display:block;height:22px;color:#4b4b4b;line-height:22px;text-align:center;}
.ui-datepicker table tbody td span{color:#aaa;}
.ui-datepicker table tbody td.date-holiday a{color:#eb3c3c;}
.ui-datepicker tr td:first-child *{color:#eb3c3c;}
.ui-datepicker tr td:last-child *{color:#4084d2;}
.ui-datepicker th{padding:0;}
.ui-datepicker td a.ui-state-active{color:#fff;background:#4b4b4b;}
.ui-datepicker td a.ui-state-highlight{color:#4b4b4b;background:#dfdfdf;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:0;}
.ui-datepicker .ui-datepicker-title{margin:0;height:30px;line-height:30px;font-size:14px;font-weight:normal;color:#242424;letter-spacing:-1px;text-align:center;}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{position:absolute;left:50%;top:5px;width:20px;height:20px;line-height:26px;border-radius:2px;border:1px solid #d9d9d9;text-indent:-9999em;cursor:pointer;}
.ui-datepicker .ui-datepicker-prev{margin-left:-66px;background:url("../images/btn_calendarPrev.png") no-repeat center center;}
.ui-datepicker .ui-datepicker-next{margin-left:44px;background:url("../images/btn_calendarNext.png") no-repeat center center;}
#ui-monthpicker-div.ui-datepicker{display:none;width:200px;background:#fff;border:1px #ccc solid;z-index:10 !important;box-sizing:border-box;}
#ui-monthpicker-div.ui-datepicker td{height:28px;}
#ui-monthpicker-div.ui-datepicker td a{cursor:pointer;}
#ui-monthpicker-div.ui-datepicker td a.ui-state-active{background:#4b4b4b;color:#fff;}
#ui-monthpicker-div.ui-datepicker tr td:first-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker tr td:last-child *{color:#4b4b4b;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-header{margin-bottom:8px;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title select::-ms-expand{display:none;}
#ui-monthpicker-div.ui-datepicker .ui-datepicker-title .ui-datepicker-year{min-width:75px;padding:0 0 0 10px;}


/* ==============================================================================================================
= Slider 기본스타일 지정
============================================================================================================== */
.bx-wrapper{position:relative;}
.bx-wrapper .bx-viewport img{width:100%;height:385px;}

.useBx{position:absolute;top:0;left:0;right:0;z-index:1;height:385px;overflow:hidden;}

.useBx .bx-controls{position:absolute;bottom:40px;left:50%;width:130px;margin-left:510px;z-index:11;}
.useBx .bx-controls-auto{position:absolute;top:0;right:0;}
.useBx .bx-default-pager{position:absolute;top:1px;left:31px;}

.useBx .bx-controls-direction{position:absolute;top:4px;}
.useBx .bx-prev{position:absolute;left:0;width:10px;height:16px;background:url("../images/usebx_slide_prev.png") 50% 50% no-repeat;text-indent:-99999px;}
.useBx .bx-next{position:absolute;left:85px;;width:10px;height:16px;background:url("../images/usebx_slide_next.png") 50% 50% no-repeat;text-indent:-99999px;}

.useBx .bx-start{display:inline-block;width:25px;height:25px;background:url("../images/n_main_slide2_start.png") 50% 50% no-repeat;text-indent:-99999px;background-size:100%;}
.useBx .bx-stop{display:inline-block;width:25px;height:25px;background:url("../images/n_main_slide2_stop.png") 50% 50% no-repeat;text-indent:-99999px;background-size:100%;}
.useBx .bx-wrapper .bx-pager-item a{display:inline-block;width:11px;height:11px;text-indent:-9999em;border-radius:50%;background:#fff;}
.useBx .bx-wrapper .bx-pager-item a.active{background:blue;}

.useBx2{display:inline-block;vertical-align:middle;height:44px;line-height:44px;width:85%;}
.useBx2 li>{color:#45444f;display:block;}
.useBx2 li> em{color:#584fd2;display:inline-block;margin-left:10px;font-weight:700;}
.useBx2 .bx-prev{position:absolute;top:0;right:0;width:22px;height:22px;z-index:1;background:url("../images/btn_election_up.png") 50% 50% no-repeat;text-indent:-99999px;}
.useBx2 .bx-next{position:absolute;top:22px;right:0;width:22px;height:22px;z-index:1;background:url("../images/btn_election_down.png") 50% 50% no-repeat;text-indent:-99999px;}

.useBx3{display:inline-block;vertical-align:top;margin-left:37px;width:86%;}
.useBx3 li>a{display:inline-block;width:76%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;vertical-align:middle;}
.useBx3 li>span{display:inline-block;}
.useBx3 .bx-wrapper .bx-controls{position:absolute;top:0;bottom:0;right:0;width:150px;}
.useBx3 .bx-prev{position:absolute;top:50%;left:0;width:44px;height:44px;margin-top:-22px;z-index:1;background:url("../images/n_main_slide3_prev.png") 0 50% no-repeat;text-indent:-99999px;}
.useBx3 .bx-next{position:absolute;top:50%;right:0;width:44px;height:44px;margin-top:-22px;z-index:1;background:url("../images/n_main_slide3_next.png") 100% 50% no-repeat;text-indent:-99999px;}
.useBx3 .bx-pager{text-align:center;position:absolute;width:150px;}
.useBx3 .bx-pager-link{display:none;}
.useBx3 .bx-pager-link.active{display:block;}

.main_useBx1{width:290px;float:right;margin-right:69px;overflow:hidden;}
.main_useBx1 .bx-controls{position:absolute;top:50%;right:0;margin-top:-12px;width:11px;display:inline-block;}
.main_useBx1 .bx-prev{position:absolute;top:0;width:11px;height:8px;z-index:1;background:url("../images/n_main_slide1_up.png") 50% 50% no-repeat;text-indent:-99999px;}
.main_useBx1 .bx-next{position:absolute;bottom:0;width:11px;height:8px;z-index:1;background:url("../images/n_main_slide1_down.png") 50% 50% no-repeat;text-indent:-99999px;}
.main_useBx1 li{font-size:16px;color:#fff;height:107px;line-height:107px;}
.main_useBx1 .bx-controls-direction{display:inline-block;}


.slick-slider{position:relative;display:block;-moz--webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-list:focus{outline:none;}
.slick-list.dragging{cursor:pointer;}
.slick-slider .slick-track,
.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
.slick-track{position:relative;top:0;left:0;display:block;}
.slick-track:before,.slick-track:after{display:table;content:'';}
.slick-track:after{clear:both;}
.slick-loading .slick-track{visibility:hidden;}
.slick-slide{display:none;float:left;height:100%;min-height:1px;}
.slick-slide img{display:block;width:100%;}
.slick-slide.slick-loading img{display:none;}
.slick-initialized .slick-slide{display:block;}
.slick-loading .slick-slide{visibility:hidden;}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent;}
.slick-arrow.slick-hidden{display:none;}
.slick-prev{position:absolute;top:-27px;right:25px;width:14px;height:14px;background:#fff;z-index:1;background:url("../images/btn_prev_related.png") 50% 50% no-repeat;text-indent:-99999px;}
.slick-next{position:absolute;top:-27px;right:0;width:14px;height:14px;background:#fff;z-index:1;background:url("../images/btn_next_related.png") 50% 50% no-repeat;text-indent:-99999px;}
.slick-dots{display:block;position:absolute;bottom:10px;left:0;right:0;text-align:center;}
.slick-dots li{display:inline-block;}
.slick-dots li button{display:inline-block;margin:0 5px;width:0.9375rem;height:0.9375rem;background:none;border:1px #111 solid;text-indent:-9999em;border-radius:50%;}
.slick-dots li.slick-active button{background:#111;}


/* ==============================================================================================================
= Overlay 효과 배경 기본스타일 지정
============================================================================================================== */
#overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1;}
#overlay.active{display:block;}

/* ==============================================================================================================
= 반응형
============================================================================================================== */
/*Mobile*/