﻿@charset "utf-8";

/* 서브페이지 */
#subWrap {display:block;width:100%;padding:0px 0 0px;/*background:#fff;border:1px solid #ededed;*/}
/* #subWrap h2 {font-size:1.8em;} */
.sub_contentWrap {box-sizing:border-box;}
/* 옴니추어 */
.location {float:right;margin:10px 0;}
.location li {display:inline-block;padding-left:5px;color:#999;}
.location span {color:#333;}

/* align */
.fl {/*overflow:hidden;*/width:100%;position:relative;}
.fl .left {float:left;width:50%;}
.fl .right {float:right;width:50%;/*text-align:right;*/}
.fl:after {display:block;content:"";clear:both;}
.fl_lr {overflow:hidden;width:100%;position:relative;}
.fl_lr .fl_left {width:49%;float:left;border-right:1px solid #ccc;padding-right:2px;}
.fl_lr .fl_right {width:49%;position:absolute;top:0;right:0;}
.fl_lr:after {display:block;content:"";clear:both;}
ul.fl {display:block;}
ul.fl li {display:inline-block;}
dl.fl {display:block;}
dl.fl dt {display:inline-block;}

/* 주요 아이콘 */
.i-report {display:block;width:100px;height:100px;background:url(../images/_common/i_report.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-search {display:block;width:100px;height:100px;background:url(../images/_common/i_search.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-car {display:block;width:100px;height:100px;background:url(../images/_common/i_car.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-card {display:block;width:100px;height:100px;background:url(../images/_common/i_card.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-monitor {display:block;width:100px;height:100px;background:url(../images/_common/i_monitor.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-warning {display:block;width:100px;height:100px;background:url(../images/_common/i_warning.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-phone {display:block;width:100px;height:100px;background:url(../images/_common/i_phone.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-report {display:block;width:100px;height:100px;background:url(../images/_common/i_m_report.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-search {display:block;width:100px;height:100px;background:url(../images/_common/i_m_search.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-car {display:block;width:100px;height:100px;background:url(../images/_common/i_m_car.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-card {display:block;width:100px;height:100px;background:url(../images/_common/i_m_card.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-monitor {display:block;width:100px;height:100px;background:url(../images/_common/i_m_monitor.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-warning {display:block;width:100px;height:100px;background:url(../images/_common/i_m_warning.png) center center no-repeat;background-size:cover;vertical-align:middle;}
.i-m-phone {display:block;width:100px;height:100px;background:url(../images/_common/i_m_phone.png) center center no-repeat;background-size:cover;vertical-align:middle;}

/* 레이아웃 */
/* .ui-datepicker-trigger {display:inline-block;position:absolute;top:10px;left:50%;margin-left:105px;cursor:pointer;} */
.ui-datepicker-trigger {display:inline-block;position:relative;margin-left:6px;cursor:pointer;}
.ui-datepicker-calendar  td {font-size:12px !important;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {margin-left:-5px;}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {margin-top:-5px;}
.ui-datepicker .ui-datepicker-next span {margin-left:-3px;margin-top:-5px;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, 
.ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus {border:1px solid #000;background:#676767;font-weight:normal;color:#fff;}
.ui-state-hover a, .ui-state-hover a:hover,.ui-state-hover a:link, .ui-state-hover a:visited, .ui-state-focus a,
.ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, a.ui-button:hover, a.ui-button:focus {color:#2b2b2b;text-decoration:none;}
.ui-datepicker .ui-datepicker-title {color:#fff;}

.download-box {position:absolute;top:225px;left:50%;width:1000px;margin-left:-500px;text-align:right;}
.download-box .btn-print {margin-left:12px;}

.official-time {position:absolute;top:245px;left:50%;width:1000px;margin-left:-500px;text-align:left;}

.data-box {width:1000px;margin:0 auto;background:#fff;border-top:1px solid #5d5f61;border-bottom:1px solid #5d5f61;}

.select-area {position:relative;width:1000px;margin:60px auto 10px;text-align:right;}
.select-area select {height:38px;line-height:38px;font-size:14px;color:#696969;vertical-align:middle;}
.select-area .total-user {position:absolute;top:11px;left:0;font-size:14px;color:#696969;}
.select-area .total-user .num {color:#0c1c3d;}
.select-area .search .ipt {width:170px;height:38px;line-height:38px;padding:0 10px;border:1px solid #cbcdce;border-radius:2px;box-sizing:border-box;}
.select-area .search a.btn-search {display:inline-block;height:38px;margin-left:5px;padding:0 1.5em;line-height:38px;background:#0c1c3d;color:#fff;border-radius:2px;vertical-align:middle;}
.select-area .radio-area {position:absolute;bottom:0;left:0;font-size:14px;}
.select-area.faq {text-align:center;}

/* 마이페이지 대시보드 */
.user-info {width:100%;border-top:0px solid #ddd;border-bottom:1px solid #ddd;padding:0px 0 0px;background:#fff;}
.user-info .user-name {width:100%;text-align:center;}
.user-info .user-name > div {width:100%;}
.user-info .user-name > div:first-child {font-size:1.4em;padding-bottom:20px;}
.user-info .user-name > div > span {vertical-align:middle;}
.user-info .user-name > div .user-image {position:relative;display:inline-block;width:50px;height:50px;border-radius:100%;margin-top:-3px;margin-right:10px;}
.user-info .user-name > div > span:nth-child(2) > span {font-size:1.4em;}
.user-info .user-name > div:nth-child(2) a {margin-right:10px;}
.user-info .user-name > div:nth-child(2) a:last-child {margin-right:0px;}
.user-info .user-name > span {width:100%;margin-top:20px;}
.user-info ul {display:table;margin-top:30px;border-top:1px solid #ddd;}
.user-info ul li {display:table-cell;padding:20px 0;width:200px;text-align:center;vertical-align:top;border-right:1px solid #ddd;}
.user-info ul li:last-child {margin-right:0px;border-right:none;}
.user-info ul li > span {display:block;width:100%;line-height:2em;}
.user-info ul li .arrow {width:0;height:0;border-right:5px solid transparent;border-left:5px solid transparent;border-top:9px solid darkorange;margin:0 auto;line-height:2.6em;}
.user-info.usr-comp ul li {width:240px;}

/* dashboard */
.dashboard {display:block;width:100%;margin-top:0px;font-weight:300;background:#f5f5f5;}
.dashboard .dashboard-row {display:table;width:100%;border-bottom:1px solid #ddd;}
.dashboard .dashboard-row:last-child {border-bottom:1px solid #ddd;}
.dashboard .dashboard-row > div {display:table-cell;position:relative;padding:30px 0;text-align:center;border-right:1px solid #ddd;}
.dashboard .dashboard-row > div:last-child {border-right:none;}
.dashboard .dashboard-row > .dashboard-50 {width:50%;}
.dashboard .dashboard-row > .dashboard-50:nth-child(1) {background:#95c474;background:#f5f5f5;}
.dashboard .dashboard-row > .dashboard-50:nth-child(2) {background:#639640;background:#f5f5f5;}
.dashboard .dashboard-row > .dashboard-50:nth-child(2) .btn-round {background:#95c474;background:#555;color:#fff;}
.dashboard .dashboard-row > .dashboard-33 {width:33%;}
.dashboard .dashboard-row > .dashboard-33:nth-child(1) {background:#abb3b0;background:#f5f5f5;}
.dashboard .dashboard-row > .dashboard-33:nth-child(1) .btn-round {background:#404040;background:#555;color:#fff;}
.dashboard .dashboard-row > .dashboard-33:nth-child(2) {width:34%;background:#5676b6;background:#f5f5f5;}
.dashboard .dashboard-row > .dashboard-33:nth-child(2) .btn-round {background:#5b9bd5;background:#555;color:#fff;}
.dashboard .dashboard-row > .dashboard-33:nth-child(3) {background:#21304d;background:#f5f5f5;}
.dashboard .dashboard-row > .dashboard-33:nth-child(3) .btn-round {background:#555;color:#fff;}
.dashboard .dashboard-row > div > span {display:block;width:100%;color:#fff;color:#444;}
.dashboard .dashboard-row .title {font-size:1.3em;}
.dashboard .dashboard-row .dot-line {position:relative;display:block;height:35px;width:100%;text-align:center;}
.dashboard .dashboard-row .dot-line:before {content: ". . .";display: block;position: absolute;top:-10px;left: 0px;width: 100%;font-size:3em;color:rgba(0,0,0,0.55)}
.dashboard .dashboard-row .val {font-size:1.57em;padding-bottom:0.5em;}
.dashboard .dashboard-row .val span {font-size:1.2em;font-weight:400;margin-left:5px;}
.dashboard .dashboard-row .val span:nth-child(2) {margin-left:5px;}
.dashboard .dashboard-row > .dashboard-33:nth-child(3) .val span:nth-child(1) {font-size:1.14em;letter-spacing:-0.04em;}
.dashboard .dashboard-row > .dashboard-50:nth-child(1) .val {color:#111;}
.dashboard .dashboard-row > .dashboard-33:nth-child(1) .val {color:#111;}
.dashboard .dashboard-row > .dashboard-50:nth-child(2) .val span:nth-child(2) {color:darkorange;}
.dashboard .dashboard-row i {font-size:5.7em;font-weight:200;color:#ccc;}

.dashboard .dashboard-row > .dashboard-20 {width:25%;}
.dashboard .dashboard-row > div > span {display:block;width:100%;color:#fff;color:#444;}
.dashboard .dashboard-row .dashboard-20 .title {font-size:1.135em;color:#333;font-weight:normal;}
/* 
.dashboard .dashboard-row .dashboard-20 .dot-line {position:relative;display:block;height:30px;width:100%;text-align:center;}
.dashboard .dashboard-row .dashboard-20 .dot-line:before {content: ". . .";display:block;position:absolute;width:100%;height:20px;top:-8px;left:0px;font-size:33px;letter-spacing:-0.02em;color:#cecece;}
 */
.dashboard .dashboard-row .dashboard-20 .dot-line {position:relative;display:block;height:10px;width:100%;text-align:center;}
.dashboard .dashboard-row .dashboard-20 .dot-line:before {content:"";display: block;position:absolute;width:100%;height:10px;top:0px;left:0px;}
.dashboard .dashboard-row .dashboard-20:hover .dot-line:before {color:#999;}
.dashboard .dashboard-row .dashboard-20 .val {font-size:1.27em;padding-bottom:0.5em;}
.dashboard .dashboard-row .dashboard-20 .val span {font-size:1.05em;font-weight:400;margin-left:5px;}
.dashboard .dashboard-row .dashboard-20 .val span:nth-child(2) {margin-left:5px;}
.dashboard .dashboard-row .dashboard-20 i {width:40px;height:40px;display:block;margin:0 auto 15px;}

.type-1 .user-info ul {background:#f5f5f5;}
.type-1 .dashboard {background:transparent;}
.type-1 .dashboard-20 {cursor:pointer;-moz-transition:background-color .4s ease;-o-transition:background-color .4s ease;-ms-transition:background-color .4s ease;-webkit-transition:background-color .4s ease;transition:background-color .4s ease;}
.type-1 .dashboard-20 i {width:60px;height:60px;display:block;margin:0 auto 15px;}
.type-1 .dashboard-20 .i-report {background:url(../images/_common/i_m_report.png) center center no-repeat;background-size:cover;-moz-transition:background-image .4s ease;-o-transition:background-image .4s ease;-ms-transition:background-image .4s ease;-webkit-transition:background-image .4s ease;transition:background-image .4s ease;}
.type-1 .dashboard-20 .i-search {background:url(../images/_common/i_m_search.png) center center no-repeat;background-size:cover;-moz-transition:background-image .4s ease;-o-transition:background-image .4s ease;-ms-transition:background-image .4s ease;-webkit-transition:background-image .4s ease;transition:background-image .4s ease;}
.type-1 .dashboard-20 .i-car {background:url(../images/_common/i_m_car.png) center center no-repeat;background-size:cover;-moz-transition:background-image .4s ease;-o-transition:background-image .4s ease;-ms-transition:background-image .4s ease;-webkit-transition:background-image .4s ease;transition:background-image .4s ease;}
.type-1 .dashboard-20 .i-card {background:url(../images/_common/i_m_card.png) center center no-repeat;background-size:cover;-moz-transition:background-image .4s ease;-o-transition:background-image .4s ease;-ms-transition:background-image .4s ease;-webkit-transition:background-image .4s ease;transition:background-image .4s ease;}
.type-1 .dashboard-20 .i-monitor {background:url(../images/_common/i_m_monitor.png) center center no-repeat;background-size:cover;-moz-transition:background-image .4s ease;-o-transition:background-image .4s ease;-ms-transition:background-image .4s ease;-webkit-transition:background-image .4s ease;transition:background-image .4s ease;}
.type-1 .dashboard-20:hover {background:#f5f5f5;}
.type-1 .dashboard-20:hover .i-report {background:url(../images/_common/i_report.png) center center no-repeat;background-size:cover;}
.type-1 .dashboard-20:hover .i-search {background:url(../images/_common/i_search.png) center center no-repeat;background-size:cover;}
.type-1 .dashboard-20:hover .i-car {background:url(../images/_common/i_car.png) center center no-repeat;background-size:cover;}
.type-1 .dashboard-20:hover .i-card {background:url(../images/_common/i_card.png) center center no-repeat;background-size:cover;}
.type-1 .dashboard-20:hover .i-monitor {background:url(../images/_common/i_monitor.png) center center no-repeat;background-size:cover;}
.type-1 .dashboard-20:hover .btn-m {background:darkorange;}

.processTab {border-top:none;margin-top:30px;}

/* 자주 찾는 질문 */
article.faq .panel .panel-heading { padding: 0; }
article.faq .panel .panel-heading a { color: #333; text-decoration: none; }
article.faq .panel .panel-title { padding: 10px 15px; line-height: 1.5; }
article.faq .panel .panel-title .label-q {
	font-weight: bold;
	padding: .3em .6em .3em;
    margin-right: 5px;
    position: relative;
    top: -2px;
}
article.faq .panel .panel-body { position: relative; }
article.faq .panel .panel-body .label-ans {
	position: absolute;
	left: 17px;
	top: 16px;
	font-weight: bold;
}
article.faq .panel .panel-body .faq-content {
    padding-left:0px;
    overflow: auto;
	min-height: 100px;
	line-height: 1.7em;
}
article.faq .panel .panel-body .faq-content p { margin: 0; }
.acc-sec-con > table {width:100% !important;}
article.faq .pages {
    text-align: center;
    padding: 0 0 15px;
}
article.faq .search {
    text-align: center;
    padding: 0 0 15px;
}

.sub_contentWrap > h3 {display:block;width:100%;padding-left:36px;background:url(../images/_common/bullet_ptitle1.png) left center no-repeat;}
h3.p-title, h3.s_title {padding-left:36px;background:url(../images/_common/bullet_ptitle1.png) left center no-repeat;}

/* 약정서비스 신청 */
.agree {width:80%;margin:40px auto 10px;font-size:1.1em;}
.agree .title {display:block;width:100%;font-size:1.5em;}
.agree article .list-row {vertical-align:top;}

.policy {width:100%;margin-top:10px;}
.privacy {width:100%;margin-top:10px;}
.field_txt {line-height:2em;}
.process {position:relative;display:block;width:690px;height:100px;margin:40px auto 100px;text-align:center;}
.process:before {content: "";display:block;position:absolute;top:50px;left:7%;width:86%;border-top:1px solid #222;z-index:-2;}
.process > span {display:inline-block;width:120px;height:120px;margin-right:67px;line-height:20px;font-size:1.2em;z-index:2;vertical-align:top;}
.process > span:last-child {margin-right:-3px;}
.process > span .circle {display:block;width:100px;height:100px;font-size:1.7em;color:#111;background:#eee;line-height:98px;text-align:center;border-radius:100%;margin:0 auto 10px;}
.process > span.on .circle {color:#fff;background:#111;}

.agree .form-ul {display:block;width:100%;margin-top:0px;}
.agree .form-ul li label {margin-bottom:0.3em;}
.agree .form-ul li input[type=text] {margin-bottom:1.1em;line-height:1.8em;border:none;border-bottom:1px solid #ccc;width:100%;background:transparent;}
.agree .form-ul li input::placeholder {color:#aaa;font-weight:300;}
.agree .form-ul li > span {display:inline-block;text-align:center;color:#888;line-height:1.8em;vertical-align:bottom;}
.agree .form-ul li .inner-list {border-bottom:1px solid #ccc;line-height:1.8em;}
.agree .form-ul li .inner-list > a, 
.agree .form-ul li .inner-list > span {display:inline-block;text-align:center;margin-top:1.1em; margin-right: 5px;}
.agree .form-ul li .inner-list > a {position: absolute;right: 5px;margin-right: 0x;}
/* .agree .form-ul li .inner-list > span:nth-child(1) {width:45px;} */
/* .agree .form-ul li .inner-list > span:nth-child(2) {width:100px;} */
/* .agree .form-ul li .inner-list > span:nth-child(3) {width:90px;} */
/* .agree .form-ul li .inner-list > span:nth-child(4) {width:40px;text-align:right;} */
.brd-box {display:block;width:calc(100% - 33px);margin-top:1.2em;padding:0px 15px 0;background:#efefef;border:1px solid #ddd;}
.brd-box .list-row {margin-bottom:20px;}
.brd-box .form-ul {margin-top:0px;}
.brd-box .form-ul li {line-height:3em;}
.agree .form-ul li .brd-box input::placeholder {color:#666;}
i.fas {font-size:1.25em;}

/* 통행료조회 화살표 */
.arrow_map {display:inline-block;width:30px;height:16px;background:url('../images/_common/arrow_map.png') center center no-repeat;vertical-align:middle;}

/* progress bar */
.bs-wizard {margin-top: 40px;}
.bs-wizard {border-bottom: solid 1px #e0e0e0; padding: 0 0 10px 0;}
.bs-wizard > .bs-wizard-step {padding: 0; position: relative;}
.bs-wizard > .bs-wizard-step + .bs-wizard-step {}
.bs-wizard > .bs-wizard-step .bs-wizard-stepnum {color:#787878;font-size:1.1em;margin-bottom:12px;}
.bs-wizard > .bs-wizard-step .bs-wizard-info {color:#888;font-size:1.2em;margin-bottom:15px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot {position: absolute; width: 30px; height: 30px; display: block; background: #fbe8aa; top: 45px; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%;} 
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background: #fbbd19; border-radius: 50px; position: absolute; top: 8px; left: 8px;}
.bs-wizard > .bs-wizard-step > .bs-wizard-dot:hover {-moz-transform:scale(1.2) .4s ease;-o-transform:scale(1.2) .4s ease;-ms-transform:scale(1.2) .4s ease;-webkit-transform:scale(1.2) .4s ease;transform:scale(1.2) .4s ease;} 
.bs-wizard > .bs-wizard-step > .progress {position: relative; border-radius: 0px; height: 8px; box-shadow: none; margin: 20px 0;}
.bs-wizard > .bs-wizard-step > .progress > .progress-bar {width:0px; box-shadow: none; background: #fbe8aa;}
.bs-wizard > .bs-wizard-step.complete > .progress > .progress-bar {width:100%;}
.bs-wizard > .bs-wizard-step.active > .progress > .progress-bar {width:50%;}
.bs-wizard > .bs-wizard-step.active > .bs-wizard-dot {background:#ffcf44; }
.bs-wizard > .bs-wizard-step.active > .bs-wizard-dot:after {content: ' '; width: 14px; height: 14px; background:darkorange; border-radius: 50px; position: absolute; top: 8px; left: 8px; }
.bs-wizard > .bs-wizard-step.active > .bs-wizard-info {color:#333;}
.bs-wizard > .bs-wizard-step:first-child.active > .progress > .progress-bar {width:0%;}
.bs-wizard > .bs-wizard-step:last-child.active > .progress > .progress-bar {width: 100%;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot {background-color: #f5f5f5;}
.bs-wizard > .bs-wizard-step.disabled > .bs-wizard-dot:after {opacity: 0;}
.bs-wizard > .bs-wizard-step:first-child  > .progress {left: 50%; width: 50%;}
.bs-wizard > .bs-wizard-step:last-child  > .progress {width: 50%;}
.bs-wizard > .bs-wizard-step.disabled a.bs-wizard-dot{ pointer-events: none; }

/* 단말기 등록 */
.m_box01		{width:100%; color:#666; background:#fff; padding:10px 20px 20px; border:3px solid #cecece;}
.m_box02		{width:100%; height:140px; background:#fff; line-height:140%; margin:10px 0; padding-right:10px;  overflow-y:scroll; overflow-x:hidden; }
.m_box02 em		{display:block; font-size:16px; color:#333; font-weight:bold; padding:10px 0 20px 0; }
.m_box02 b	 		{display:block; font-size:13px; font-weight:normal; color:#404040; padding-bottom:2px; }
.m_box02 span 	{display:block; font-size:12px; padding-bottom:26px; }
.m_box03			{width:100%; text-align:right; line-height:140%; padding:10px 0 0 0; border-top:1px solid #d6d6d6; overflow:hidden; }
.m_box03 em		{ float:left; padding-right:10px; color:#404040; background:url('../images/common/bullet_square.gif') no-repeat left 50%; padding-left:10px;}
.m_box03 em.left { color:#404040; float:left;}
.m_box03 .agree_txt {padding:0 0 5px 0; text-align:left; color:#404040; overflow:hidden;}
.m_box03 .agree_txt em {background:url('../images/common/bullet_square.gif') no-repeat left 50%; padding-left:10px; }
.m_box03 .option_one {padding:5px 0 5px 0px; border-top:1px dotted #999;}
.m_box03 .option_one em { color:#979797; font-size:0.95em; background:none;}
.m_box03 .option_two {padding:5px 0 0 0px; border-top:1px dotted #999;}
.m_box03 .option_two em { color:#979797; font-size:0.95em; background:none;}
.m_box04        {width:100%; height:40px; background:#fff; line-height:140%; margin:10px 0; padding-right:10px;  overflow-y:scroll; overflow-x:hidden; }
.m_box04 em     {display:block; font-size:16px; color:#333; font-weight:bold; padding:10px 0 20px 0; }
.m_box04 b          {display:block; font-size:13px; font-weight:normal; color:#404040; padding-bottom:2px; }
.m_box04 span   {display:block; font-size:12px; padding-bottom:26px; }
.agree_end_left_txt {float:left; margin-top:13px; font-weight:bold; font-size:1.0em; letter-spacing:-1px;}

