@charset "utf-8";

/* webfont setup */
.ng{font-family: 'NanumGothic';}
.ngBold{font-family: 'NanumGothic';font-weight: 700;}
.ngBBold{font-family: 'NanumGothic';font-weight: 800;}
.ngLight{font-family: 'NanumGothic';font-weight: 300;}



/* Default Setup */
.fixed{position: relative;overflow: hidden;width: 100%;height: 100%}
/* Start of "Micro clearfix" */
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* End of "Micro clearfix" */

/* flex */
.flex { display: -moz-flex; display: -webkit-flex; display: -ms-flex; display: flex; -moz-justify-content: center; -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; }

/* css motion */
.motion { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }


.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* skip navigation */
#skiptoContent { position: absolute; width: auto; top: 0; margin: 0 auto }
#skiptoContent dd { display: inline }
#skiptoContent a { display: inline-block; height: 0; overflow: hidden; text-align: center }
#skiptoContent a:hover, #skiptoContent a:focus, #skiptoContent a:active { position: relative; height: auto; z-index: 99999999; }

/* text hidden */
.invisible { position: absolute; left: -5000px; height: 0; line-height: 0; width: 0; font-size: 0; margin: 0; padding: 0; overflow: hidden }

/* text-align */
.textAlign_left{text-align: left !important}
.textAlign_center{text-align: center !important}
.textAlign_right{text-align: right !important}

/* btn */
.btnWrap{padding: 60px 0;}
.btn{display:inline-block;height:60px;line-height: 60px; padding:0 60px;letter-spacing:-.2px; font-size:16px;text-align:center;box-sizing:border-box;background: #4c4c4c; color: #fff;}
.btn~.btn{margin-left: 10px;}

.btn_tblBlock{margin: 30px 0; text-align: center; font-weight: 700; font-size: 17px; height: 60px; line-height: 60px;}
.btn01,.btn02{display: inline-block; width: 230px; background: #00ae8e; color: #fff;}

/* slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; 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; cursor: hand }
.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; margin-left: auto; margin-right: auto }
.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; }
[dir='rtl'] .slick-slide { float: right }
.slick-slide img { }
.slick-slide.slick-loading img { display: none }
.slick-slide.dragging img { pointer-events: 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-arrow { }

/* modal popup */
.popupWrap{z-index:999999;position:fixed;top:0;left:0;width:100%;height:100%; overflow: auto;}
.popupWrap:before{content:"modal_bg";position:fixed;top:0;left:0;width:100%;height:100%;background:#000;opacity:.6; text-indent: -9999em; font-size: 0;}
.popupWrap .popup{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;width:550px;background:#fff}

/* Jquery Ui datepicker */
.ui-datepicker{width:300px;padding:0;display:none;box-sizing:border-box;}
.ui-datepicker .ui-datepicker-header{position:relative;padding:8px 0;border-bottom:0 !important}
.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute}
.ui-datepicker .ui-datepicker-prev{left:15px;top:28px}
.ui-datepicker .ui-datepicker-next{right:15px;top:28px}
.ui-datepicker .ui-datepicker-prev-hover{width:49px !important;height:12px !important;background:url(../images/common/ui-datepicker-prev.png) no-repeat 0 0!important;border:0!important}
.ui-datepicker .ui-datepicker-next-hover{width:49px !important;height:12px !important;background:url(../images/common/ui-datepicker-next.png) no-repeat 0 0!important;border:0!important}
.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px;font-size:0}
.ui-datepicker-prev{width:49px !important;height:12px !important;background:url(../images/common/ui-datepicker-prev.png) no-repeat 0 0}
.ui-datepicker-next{width:49px !important;height:12px !important;background:url(../images/common/ui-datepicker-next.png) no-repeat 0 0}
.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center;font-size:15px;color:#fff;}
.ui-datepicker .ui-datepicker-title select{font-size:15px;color:#222;margin:1px 0}
.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:50px;background:transparent;}
.ui-datepicker .ui-datepicker-month,.ui-datepicker .ui-datepicker-year{font-size:15px;color:#fff;font-family:'arial';}
.ui-datepicker .ui-datepicker-month{display:block;display:block;font-size:25px}
.ui-datepicker table{width:100%;border-collapse:collapse}
.ui-datepicker th{text-align:center;height:35px;}
.ui-datepicker td{height:30px;text-align:center;font-family:'arial';}
.ui-datepicker td span,.ui-datepicker td a{display:inline-block;text-align:center;text-decoration:none;width:30px;height:30px;line-height:30px;color:#222;font-size:15px}
.ui-datepicker th span{color:#222;font-size:17px;}
.ui-datepicker .ui-datepicker-buttonpane{display:none}
.ui-datepicker .ui-datepicker-buttonpane button{float:right;cursor:pointer;width:auto;overflow:visible}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left;display:none}
.ui-widget.ui-widget-content{padding:0 0 30px 0;border:1px solid #535353;border-radius:3px;box-shadow:5px 10px 10px rgba(00, 00, 00, .2)}
.ui-widget-content{background:#fff;color:#333}
.ui-widget-content a{font-size:15px;color:#333}
.ui-widget-header{border:0;background:#222;color:#fff;}
.ui-widget-header a{color:#333}
.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default,.ui-button,.ui-button.ui-state-disabled:hover,.ui-button.ui-state-disabled:active{font-weight: 500; color:#222}
.ui-datepicker-close{display:none}
.ui-datepicker-today a{background:#222 !important;color:#fff !important; border-radius:100%}
.ui-datepicker-calendar a:hover{}

/* table =========================================================================================================*/
.tbWrap_col{border-top:2px solid #222}
.tbWrap_col table{table-layout:fixed;}
.tbWrap_col table thead th{line-height:18px;height:44px;padding:8px 5px;vertical-align:middle;color:#222;  font-size: 18px; border-bottom:1px solid #e1e1e1;background:#f9fafa;word-break:normal;}
.tbWrap_col table thead th~th{border-left:1px solid #e1e1e1;}
.tbWrap_col table tbody th{height:54px;line-height:19px;padding:8px 5px;vertical-align:middle;color:#222;  border-right:1px solid #e1e1e1;border-bottom:1px solid #e1e1e1;background:#fbfdfd;word-break:normal;}
.tbWrap_col table td{height:43px;padding:8px 5px;line-height:20px;vertical-align:middle;border-bottom:1px solid #e1e1e1;text-align:center;word-break:normal;}
.tbWrap_col table td.txtLeft {text-align: left; }
.tbWrap_col table td.num {padding-right: 30px; text-align: right; font-family:"arial"; font-size: 20px; }
.tbWrap_col table td~td{border-left:1px solid #e1e1e1;}
.tbWrap_col table th + td{border-right:1px solid #e1e1e1;}
.tbWrap_col td:last-child {border-right: 0 none; }

.tbWrap_row table{table-layout:fixed;}
.tbWrap_row thead th{line-height:19px;height:54px;padding:8px 5px;vertical-align:middle;color:#222;   border:1px solid #e1e1e1;background:#f9fafa;word-break:normal;}
.tbWrap_row thead th~th{border-left:1px solid #e1e1e1;}
.tbWrap_row tbody th{height:40px;line-height:20px;padding:8px 5px;vertical-align:middle;color:#222;  border:1px solid #e1e1e1;background:#f9fafa;word-break:normal;}
.tbWrap_row table td.txtLeft {text-align: left; }
.tbWrap_row table td.num {padding-right: 30px; text-align: right; font-family:"arial"; font-size: 20px; }
.tbWrap_row td{height:54px;padding:8px 20px;line-height:19px;vertical-align:middle;border:1px solid #e1e1e1;text-align:center;word-break:normal;}



/*======================================================================================================================*/
/*======         Resposible Media Query CSS                =============================================================*/
/*======================================================================================================================*/
/*======================================================================================================================*/


/*  1300px~ 1500px*/
@media only screen and (max-width: 1500px) {

}
/*  961px～ 1300px*/
@media only screen and (max-width: 1300px) {

}
/*  태블릿 레이아웃 : 769px～960px */
@media only screen and (max-width: 900px) {
  .btnWrap{padding:30px 0;}
  .btn{display: block; width: auto;}
  .btnWrap .btn~.btn{margin-left: 5px;}
  .btnWrap.two .btn{display: inline-block; width: calc(50% - 5px);}

  .btn_tblBlock{margin: 15px 0; font-size: 15px; font-family: 'NanumGothic'; height: 40px; line-height: 40px;}
  .btn02{width: 100%;}
}
/* 모바일 레이아웃 L：481px ～ 768px */
@media only screen and (max-width: 768px) {

}
/* 모바일 레이아웃 S：361px ～ 480px */
@media only screen and (max-width: 480px) {

}