@charset "utf-8";
/* Default */
img {border:0px;}
img.m {width:100%}

html , body { width:100%; height:100%;}
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{
	margin:0;padding:0; font-size:10pt; font-family:"나눔고딕","돋움", "굴림","Nanum gothic","Verdana", "Helvetica"; color:#5a5d5c; letter-spacing:-0.05em;
}
ul { list-style:none; margin:0; padding:0; }

/* Link */
a { text-decoration:none; font-family:'나눔 고딕','Nanum Gothic','나눔바른고딕','NanumBarunGothic','맑은 고딕','Malgun Gothic','dotum'; /* 링크클릭시 생기는 점선없애기*/ outline: none;} 
a:link, a:visited { text-decoration:none;}
a:hover, a:active { text-decoration:none;}

label * { vertical-align:middle;}

/* 테이블 배경색관련 */
.TB00 {background-color: #FFFFFF;}
.TB01 {background-color: #F9F9F9;}

table { width:100%; border:0; border-spacing:0;}
table td,
table th { border:0;}
table td:after,
table th:after { display:block; content:""; clear:both;}
table th { }
caption { visibility:hidden; overflow:hidden; width:1px; height:1px; font-size:0; line-height:0;}

/*Input 및 위젯 스타일*/
.input { height:32px; font-size:12px; color:#585858; line-height:28px; padding:0 8px; background-color:#fff; border:#ddd 1px solid; border-radius:4px; vertical-align:middle;}
.textarea { width:100%; height:100%; font-size:12px; color:#585858; padding:5px; background-color: #fff; border:#ddd 1px solid; border-radius:4px;}
.select { height:32px; font-size:12px; color:#585858; padding-left:5px; background-color: #fff; border:#ddd 1px solid; border-radius:4px;}
.checkbox {vertical-align: middle; display:inline-block;}

.w100 { position:relative; box-sizing:border-box; width:100%; padding:0 20px; float:left;}
.w50 { position:relative; box-sizing:border-box; width:50%; padding:0 20px; float:left;}

/* float  */
.f_left { float:left;}
.f_right { float:right;}
.clear { clear:both; display:block; float: none; font-size:0 !important; height:0; line-height:0 !important; margin:0 !important; overflow:hidden; padding:0 !important; width:100%;}

/*리스트에 내용 길때 뒷부분 자르고 점찍어 주는거*/
.ellipsize { display:inline-block; overflow:hidden; width:95%; text-overflow:ellipsis; white-space:nowrap }

/*점선*/
.dotted {width:100%; height:5px; background:url(images/dotted_line.png)}

/* 폰트 사이즈 */
.f12 { font-size:12px !important;}
.f14 { font-size:14px !important;}
.f18 { font-size:18px !important;}
.f22 { font-size:22px !important;}

/* 폰트 컬러 */
.f_red { color:#fe0000 !important;}
.f_orange { color:#fc7400 !important;}
.f_gray { color:#a4a4a4 !important;}
.f_blue { color:#3ea3dc !important;}
.f_ok { color:#4caf50 !important;}
.f_no { color:#2196f3 !important;}
.f_wait { color:#f44336 !important;}

/* align */
.left { text-align:left !important;}
.center { text-align:center !important;}
.right { text-align:right !important;}

.bg-blue {background:#3ea3dc !important;}
.bg-yellow {background:#ffcc00 !important;}

/* after clear */
.beforeClear:before { clear:both; display:block; content:"";}
.afterClear:after { clear:both; display:block; content:"";}

/**/
.view800 { display:none !important;}
h2 span { vertical-align:middle;}

/* margin */
.mt10 { margin-top:10px !important;}
.mt15 { margin-top:15px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt35 { margin-top:35px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}

.mr0 { margin-right:0 !important;}
.mr5 { margin-right:5px !important;}
.mr10 { margin-right:10px !important;}
.mr15 { margin-right:15px !important;}
.mr20 { margin-right:20px !important;}
.mr30 { margin-right:30px !important;}
.mr35 { margin-right:35px !important;}
.mr40 { margin-right:40px !important;}
.mr50 { margin-right:50px !important;}
.mr60 { margin-right:60px !important;}

.mb10 { margin-bottom:10px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}

.ml0 { margin-left:0 !important;}
.ml10 { margin-left:10px !important;}
.ml30 { margin-left:30px !important;}

.pt20 { padding-top:20px !important;}
.pr10 { padding-right:10px !important;}
.pl10 { padding-left:10px !important;}
.pl20 { padding-left:20px !important;}
.pl55 { padding-left:55px !important;}

.cataxI { color:#ffcc00;}
/* btn 
.btn { -webkit-display:inline-block; display:inline-block; -webkit-border-radius:4px; border-radius:4px; text-align:center; cursor:pointer;}
.btn * { vertical-align:bottom;}
.btn img { height:17px; width:auto;}
.btn .on { display:block;}


.btnGroup { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:240ms; -o-transition:240ms; transition:240ms; -webkit-display:inline-block; display:inline-block; -webkit-border-radius:4px; border-radius:4px; text-align:center; cursor:pointer; font-size:0;}

.btn_disable { -webkit-display:inline-block; display:inline-block; cursor:default;}
.btn_pop { -webkit-display:inline-block; display:inline-block; padding:8px 15px; font-size:16px;}
.btn_min { -webkit-display:inline-block; display:inline-block; padding:2px 5px; font-size:11px;}
.btn_small { -webkit-display:inline-block; display:inline-block; padding:7px 12px; font-size:13px;}
.btn_medium { -webkit-display:inline-block; display:inline-block; padding:7px 15px; font-size:16px;}
.btn_big { -webkit-display:inline-block; display:inline-block; padding:15px 60px; font-size:15px;}

.btn_white a:first-child { border-left:1px solid #959595;}
.btn_white a { background:#fff; border:1px solid #959595; border-left:none;}

.btn_red { background:#df2428; background:linear-gradient( to bottom, #df2428, #c12a25); border:1px solid #3e4149; box-shadow:1px 1px 0px 0px #d3615d inset;}
.btn_gray { background:#3e4149; background:linear-gradient( to bottom, #3e4149, #656871); border:1px solid #3e4149; box-shadow:1px 1px 0px 0px #656871 inset;}
.btn_white { background:#fff; border:1px solid #959595;}
.btn_blue { background:#3ea3dc; border:1px solid #3ea3dc;}
.btn_yellow { background:#ffcc00; border:1px solid #ffa800;}
.btn_trance { background:none; border:1px solid #fff;}
.btn_red { color:#fff;}
.btn_gray { color:#fff;}
.btn_white i,
.btn_white { color:#666;}
.btn_blue { color:#fff;}
.btn_yellow { color:#444;}
.btn_trance { color:#fff;}
*/
.btn_event { font-size:0; width:340px; height:80px; margin:20px auto 0; text-align:center; background:url(images/btn_event.png) no-repeat 50% 50%; overflow:hidden; border-radius:4px;}
.btn_event a { display:block; -webkit-transition:all .2s linear; -ms-transition:all .2s linear; -o-transition:all .2s linear; transition:all .2s linear;}
.btn_event a:hover { background:rgba(62, 163, 220, 0.7);}


#login_wrap h1 { width:35%; margin:0 auto;}
#login_wrap h1 img { max-width:80%;}

#login_wrap .btn_guide { position:static; margin:10px auto 0; border-radius:13px; width:55%; padding:7px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-transition:240ms; -o-transition:240ms; transition:240ms;}
#login_wrap .device { width:55%;}

/*    slideMenu icon
--------------------------*/

.slideBtn { position:absolute; top:18px; right:85px; display:inline-block; transition:all 0.3s ease-in-out 0s; width:37px; z-index:999;}

.slideBtn .line { background-color:#666; display:block; height:3px; margin:4px auto; width:22px; -webkit-transition:all 0.3s ease-in-out; -o-transition:all 0.3s ease-in-out; transition:all 0.3s ease-in-out;}

.slideBtn:hover { cursor:pointer;}

/*
.slideBtn.is-active { left:65px;}
*/

.slideBtn.is-active .line:nth-child(1),
.slideBtn.is-active .line:nth-child(3) { width:10px; height:3px;}

.slideBtn.is-active .line:nth-child(2) { transform:translateX(5px); width:20px; height:3px;}

.slideBtn.is-active .line:nth-child(1) { -webkit-transform:translateY(3px) rotate(-45deg); -ms-transform:translateY(3px) rotate(-45deg); -o-transform:translateY(3px) rotate(-45deg); transform:translateY(3px) rotate(-45deg);}

.slideBtn.is-active .line:nth-child(3) { -webkit-transform:translateY(-3px) rotate(45deg); -ms-transform:translateY(-3px) rotate(45deg); -o-transform:translateY(-3px) rotate(45deg); transform:translateY(-3px) rotate(45deg);}


.slideMenu { position:absolute; width:300px; top:0; bottom:0; right:-300px; overflow:auto; background:#444; z-index:10;}
.gnb_navi { padding:80px 20px 0 20px;}
.gnb_navi:after { content:""; display:block; clear:both;}
.gnb_nav_dep1 { padding-bottom:20px;}
.gnb_nav_dep1 a,
.gnb_nav_dep1 span { display:block; padding:14px 0 14px 30px; margin-bottom:7px; font-size:16px; font-weight:bold; background:#fff; color:#444; letter-spacing:-0.05em;}
.gnb_dep2 li a { display:block; padding:10px 0 10px 30px; margin-bottom:3px; margin-left:20px; border:solid 1px #eee; font-size:14px; background:#666; color:#fff; letter-spacing:-0.05em;}


@media only screen and (max-width:1100px) {
.w100 { padding:0 !important;}
.w50 { padding:0 !important;}
}

@media only screen and (max-width:800px) {
.view800 { display:block !important;}
}

@media only screen and (max-width:600px) {
.mobile_block { display:block !important;}
.mobile_mt10 { margin-top:10px !important;}
.mobile_clear { clear:both !important;}
}

@media only screen and (max-width:480px) {
#login_wrap { padding:5px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
#login_wrap .device { width:90%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.is_act { -webkit-transition-duration:.3s; -moz-transition-duration:.3s; -ms-transition-duration:.3s; -o-transition-duration:.3s; transition-duration:.3s; -webkit-animation:addAction 1.2s 0.5s infinite; -moz-animation:addAction 1.2s 0.5s infinite; -o-animation:addAction 1.2s 0.5s infinite; animation:addAction 1.2s 0.5s infinite;}

#login_wrap h1 { width:80%; margin:0 auto;}
#login_wrap h1 img { max-width:80%;}

#login_wrap .btn_guide { width:90%; height:auto; padding:5px 25px;}
#login_wrap .btn_guide a { display:block; padding:10px 0; border-top:1px solid #ccc;}
#login_wrap .btn_guide a:first-child { border-top:none;}
#login_wrap .btn_guide span { display:none;}
}


@-webkit-keyframes addAction {
	0% { width:15px; margin-top:0; margin-left:0;}
	50% { width:21px; margin-top:-3px; margin-left:-3px;}
	100% { width:15px; margin-top:0; margin-left:0;}
}
@-moz-keyframes addAction {
	0% { width:15px; margin-top:0; margin-left:0;}
	50% { width:21px; margin-top:-3px; margin-left:-3px;}
	100% { width:15px; margin-top:0; margin-left:0;}
}
@-o-keyframes addAction {
	0% { width:15px; margin-top:0; margin-left:0;}
	50% { width:21px; margin-top:-3px; margin-left:-3px;}
	100% { width:15px; margin-top:0; margin-left:0;}
}
@keyframes addAction {
	0% { width:90%; padding:15px 0; margin-top:0;}
	50% { width:95%; padding:25px 0; margin-top:-5px;}
	100% { width:90%; padding:15px 0; margin-top:0;}
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color:#bbb; text-align:left;}
::-moz-placeholder { /* Firefox 19+ */ color:#bbb; text-align:left;}
:-ms-input-placeholder { /* IE 10+ */ color:#bbb; text-align:left;}
:-moz-placeholder { /* Firefox 18- */ color:#bbb; text-align:left;}

/* 2017-05-29 리뉴얼 */
#contents { background:#f3f3f3;}
.card { border-radius:2px; border-top:4px solid #ffcc00; box-shadow:0 2px 1px rgba(0, 0, 0, 0.05); border-left:none; border-right:none; border-bottom:none; margin-bottom:30px; background:#fff;}
.card:after { content:""; clear:both; display:block;}
.card .cardTitle { position:relative; padding:20px; border-bottom:1px solid #dfdfdf;}
.card .cardTitle:after { display:block; content:""; clear:both;}
.card .cardTitle .titCard { display:block; color:#444; font-size:16px; font-weight:600;}
.card .cardTitle .txtCard { display:block; margin-top:15px; color:#666; font-size:14px;}
.card .cardTitle .btnCard { float:right;}
.card .cardTitle .dateArrow { padding:0 10px; font-size:11px; color:#444;}
.card .cardSearch { padding:20px; background:#f9f9f9;}
.card .cardSearch:after { display:block; content:""; clear:both;}
.card .cardCont { position:relative; padding:20px; background:#fff;}
.card .cardCont:after { display:block; content:""; clear:both;}
.card .cardCont .blockGroup { padding:20px 0;}
.card .cardFoot { padding:20px; border-top:1px solid #dfdfdf; background:#f9f9f9;}
.card .logView { position:relative; border-bottom:1px solid #666;}
.card .logView:after { content:""; clear:both; display:block;}
.card .cardTime { color:#444; font-size:12px;}
.card .cardAddress { color:#3ea3dc; font-size:14px;}
.card .carArrow { position:absolute; top:28px; width:100%; height:20px; text-align:center;}

.mainChart { margin-bottom:30px;}
.mainChart .mainChartBlock { position:relative; padding:30px 20px 30px 20px; background:#ffcc00; border-right:1px solid #f3f3f3; border-top:1px solid #f3f3f3; box-shadow:0 2px 1px rgba(0, 0, 0, 0.05);}
.mainChart .mainChartBlock i { position:absolute; top:50%; margin-top:-17px; left:20px; color:#444; font-size:35px;}
.mainChart .mainChartBlock .mainChartTitle { text-align:right; color:#444; font-size:15px;}
.mainChart .mainChartBlock .mainChartNum { text-align:right; color:#444; font-size:15px;}
.mainChart .mainChartBlock .mainChartNum strong { display:inline-block; padding-right:5px; font-size:35px;}

.tblBasic { border-top:1px solid #eceeef; border-left:1px solid #eceeef;}
.tblBasic th { padding:7px; border-right:1px solid #eceeef; border-bottom:2px solid #ccc; color:#222; font-size:12px; font-weight:600; background:#fff;}
.tblBasic td { position:relative; padding:7px; border-right:1px solid #eceeef; border-bottom:1px solid #eceeef; color:#666; font-size:12px; background:#fff;}
.tblBasic tfoot td { background:#eceeef;}
.tblBasic .bgAdd tr:nth-child(odd) td { background:#f8f8f8;}
.tblBasic .bgToday { background:#eceeef;}
.addHover tr:hover td { background:#f8f8f8;}

.tblDepart { margin-top:-1px; border:none;}
.tblDepart th { padding:7px; border-right:1px solid #eceeef; border-bottom:2px solid #ccc; color:#222; font-size:12px; font-weight:600;}
.tblDepart td { position:relative; padding:0; cursor:pointer; color:#666; font-size:12px; border:none; border-top:1px solid #eceeef;}
.tblDepart tr:first-child td { border-top:none;}
.tblDepart td a { color:#444; display:block; padding:7px;}
.tblDepart .active { background:#eceeef;}

#map { height:400px; width:100%;}

.tblListNone { border:none; margin-left:10px;}
.tblListNone th { border-left:1px solid #ddd; width:20px;}
.tblListNone td { position:relative; padding:10px 0;}
.tblListNone td:after { position:absolute; content:""; width:14px; height:14px; border-radius:50%; background:#ddd; top:50%; left:-27px; margin-top:-7px;}
.tblListNone .spec:after { background:#fabc37;}
.tblListNone .txtTbl1 { font-size:14px; font-weight:600; color:#444;}
.tblListNone .txtTbl2 { font-size:12px; font-weight:400; color:#666;}
.tblListNone .txtTbl3 { font-size:14px; font-weight:600; color:#3ea3dc;}