/**로그인**/
.swal-button--confirm,.swal-button--confirm:hover{background:#252E59; !important;color:#FFF !important}

.mbskin{font-size:1em; padding:20px;}
.mbskin header .hd_icon{font-size: 2em; margin-bottom: 20px;}
.mbskin header h1{margin: 20px 0;}
#mblogin{width:100%; position: relative; padding: 20px;}
#mblogin .tab_menu{ display: flex; justify-content: flex-start; align-items: center; margin-bottom: 10px;}
#mblogin .tab_menu a{ display: inline-block; padding:4px 10px; background:#c3c6d3;
    color: #fff; border-radius: 5px; font-size: 1.10em; margin-right: 3px; line-height: 1.5em;}
#mblogin .tab_menu a.on{ background: #0e8de5;}

#mblogin .frm_input{position: relative; width: 100%; height:70px; padding:30px 20px 10px;
    box-shadow: 3px 0px 10px rgb(0 0 0 / 15%);
    background: #fff; border-radius:7px; margin-bottom: 10px; overflow: hidden;
    display: flex; justify-content: space-between; align-items: center;}
#mblogin .frm_input i{ color: #838da1; display: inline-block; width: 25px; margin-right: 5px;}
#mblogin .frm_input label{font-size:0.85em; line-height:1.2em;margin:10px 0; color: #D2D3DB;
    position: absolute; top:3px; left: 20px; display:block !important}
#mblogin .frm_input input{width:100%; border: 0; background: #fff!important; line-height: 1.4em;}
#mblogin .frm_input input::placeholder{color: #576178; font-size: 0.9em;}
#mblogin .auto_login{ margin: 10px 0}
#mblogin .auto_login label{font-size: 0.95em;}

#mblogin .refer{ margin-top: 20px;}


/**메인**/
/*메인 상단*/
#idx header{ height: 65px;}
#idx #hd_wrapper{ position: fixed; padding: 20px 5%; background: #fff;}
#idx #hd_wrapper .logo{width: 100%; max-width: 900px; margin: 0 auto;}
#idx .logo img{height: 23px;}
#idx .swiper-slide img{ width: 100%;}

/*메인- m_bg*/
#m_bg{background:linear-gradient(#fff, 90%, #999); background-size:100%; position:relative; margin:0; z-index: 0;}
#m_bg:after{content: ""; display: block; background:#fff; border-radius:20px 20px 0 0; padding:10px 0}

.m_roll{ min-height:100%;}
.m_roll #main_bnr{ height:100%}
#main_bnr{overflow: hidden;}
#main_bnr .swiper-pagination{ bottom: 85px; left: 5%; text-align: left;}
#main_bnr .swiper-pagination-bullet{ width: 15px; height: 5px; border-radius: 5px; margin: 0 1px;}
#main_bnr .swiper-pagination-bullet-active{ background: #252e58;}

#m_content{z-index: 1; padding:30px 5%; position:relative;}
#m_content .area_my{margin:0; width:100%; padding:20px; margin-top:-75px; background:#fff; border-radius:7px;
    box-sizing:border-box; box-shadow:0px 0px 15px rgba(0,0,0,.25);}
#m_content .area_my > .area_user{}
#m_content .area_my > .area_user .name{position:relative; color:#3d465c; margin-bottom: 5px; font-weight: normal;}
#m_content .area_my > .area_user .name strong{font-size:18px; font-weight:bold; margin-right: 5px; font-weight: 600}
#m_content .area_my > .area_user .date span{font-size: 1.2em; margin-left:5px; vertical-align:middle;}
#m_content .area_my > .area_user .edit{position:relative; top:1px; margin:0 0 0 4px; display:inline-block; width:16px; height:16px; background:url(../img/main/icon_edit.png)no-repeat center; background-size:contain;}
#m_content .area_my > .area_user .account{ justify-content: space-between;}
#m_content em a{ color: #fff; }
/*메인컨텐츠-공지*/
.m_noti{ background:#101f40; padding:5px; border-radius:7px; margin:15px 0; overflow: hidden; height: 52px;}

.m_noti .notice_wrap{
    display: flex;
}

.m_noti .notice_wrap .em{
    width: 50px;    
    text-align: center;
    padding-top: 10px;
    color: #fff;
}

.m_noti .swiper{
    width: calc(100% - 50px);
    padding-left: 15px;
    color: #fff;
}

.m_noti .swiper .tit{
    color: #fff;
    padding-top: 10px;
	word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	height: 30px; 
	overflow: hidden;
}


/*메인컨텐츠*/
#m_content h3{ font-size:1.37em; font-weight:bold; color:#101f40}
#m_content h3 > span{ opacity:.8; font-size:.75em; font-weight:400; padding:0 0 0 7px}
#m_content .area_title{ margin:20px 0 17px 0; display: flex; justify-content: space-between; align-items: center;}

/*최근계량내역*/
.idx_account .area_title h3{display: flex; align-items: center;}
.idx_account .area_title .box_in{display: flex; margin-left:5px; }
.idx_account .account_list li{ border-radius: 7px; background: #e8eefb; padding: 15px;
                            display: flex; align-items: flex-start; align-items: center; margin-bottom: 10px;}
.idx_account .account_list li a{display: block; width: 100%; }
.idx_account .account_list li:nth-child(even){background:#F4F7FC; }
.idx_account .account_list li .left{    position: relative;
    width: 25%;
    height: 70px;
    background: #0e8de5;
    margin-right: 10px;
    border-radius: 4px;
    overflow: hidden;
    display: inline-block;
	vertical-align:top;
}
.idx_account .account_list li .right{ width: 70%; display: inline-block; }

.idx_account .account_list li .left p{position: absolute; left:0; width: 100%; text-align:center ; top: 50%; transform: translateY(-50%);
color: #fff; font-size: 18px;}
.idx_account .account_list li .right p{ color:#252e58; margin: 2px 0;}
.idx_account .account_list li .right p span{ font-size:1.40em; vertical-align:middle;}
.idx_account .account_list li .right p span.won{ font-size:1.15em; margin:0 0 0 2px}
.idx_account .account_list li .right em{margin-right: 3px;}

/*스케쥴안내*/
.idx_schedule{}

/*배차안내*/
.idx_carSetting .area_title{margin-bottom:0!important; }
.idx_carSetting .epx{ display: block; font-size: 1em; margin-top: 5px; margin-bottom: 17px; opacity: 0.8;}

ul.box_list{display: flex; flex-wrap: wrap; align-items:center; justify-content: flex-start;}
ul.box_list li{
	width: calc((100% / 2) - 6px); 
	display: inline-block; 
	margin:3px;
    background-color: #fff; 
	border-radius: 4px; 
	text-align: center; 
	padding: 8px 5px; 
	font-size: 1.15em;
    white-space: nowrap;
	overflow: hidden; 
	text-overflow: ellipsis; 
	vertical-align:middle;
	color: #101f40;
	border: 1px solid #8b96af;
	font-weight:500;
	}
ul.box_list li.on{ background: #252e58; color: #fff; border: 1px solid #252e58;}



/**마이스케쥴 배차확인**/
.mypage_calendar{ font-size: 0.9em;}
.area_calendar{overflow-x:hidden; margin:20px 0; background:#fff; border-radius:10px; min-height:200px; box-shadow:3px 0px 10px rgb(0 0 0 / 15%);}
.area_calendar .buttons-container{margin-bottom:0; padding:20px 10px;}
.area_calendar .buttons-container button{width:30px; height:30px; background:#f4f4f4 url(../img/icon_arrow.svg)no-repeat center; background-size:10px 10px; border-radius:50px; text-indent:-9999px;}
.area_calendar .buttons-container button.prev-button{transform:rotate(180deg);}
.area_calendar .label-container span{font-size:25px; font-weight:bold; color:#404c66;}
.area_calendar .special-buttons{display:none;}
.area_calendar .weeks-wrapper.header{padding:0;}
.area_calendar .weeks-wrapper{padding:0 0 20px;}
.area_calendar .week .day.header{ font-size: 12px;}
.area_calendar .week .day span{font-size:14px; font-weight:500;}
.area_calendar .week .day.selected span{background:#5689f5; font-size:17px;}
.area_calendar .day.today span::after{display:none;}
.area_data{display:block; width:100%; margin:30px 0 35px;}
.area_data:after{content:""; display:block; clear:both;}
.area_data .data{float:left; text-align:center; width:50px;}
.area_data .data h3{display:block; font-size:40px; font-weight:bold; color:#101f40; line-height:1em;}
.area_data .data span{display:block; font-size:16px; font-weight:400; color:#101f40; letter-spacing:5px; line-height:1em;}
.area_data .txt{float:left; margin:0 0 0 20px; width:calc(100% - 70px);}
.area_data .txt h4{display:block; margin:5px 0 0; font-size:25px; font-weight:bolder; color:#101f40;}
.area_data .txt span{display:block; margin:3px 0 0; font-size:16px; font-weight:500; color:#92949f; line-height:1em;}
.area_data .txt span.blue{display:inline-block; color:#101f40; font-weight:600;}

.area_calendar .week .day.active span{background:#252e58; width: 35px; height: 35px; line-height: 35px; color:#fff;}
.calendar .area_name em{ border-radius: 10px; vertical-align: bottom; padding: 0 7px; font-size: 12.5px; margin-right: 2px;}
.calendar .sch_check{ float: right; color: #252e58}
#carModal .epx{ display: block; font-size: 0.9em; line-height: 1.4em; margin-top: 5px; opacity: 0.8; font-weight: normal;}


/**알림내역**/
#push_list li{margin:0; width:100%; padding:15px 20px; background:#fff; border-radius:7px;
    box-sizing:border-box; box-shadow:0px 0px 5px rgb(0 0 0 / 15%); margin-bottom: 10px;}
#push_list li em{all:unset; margin-bottom: 5px; font-size: 1em; color: #768093;}
#push_list li p{font-size: 1.15em; font-weight: 500; margin-bottom: 0; margin-top: 3px; color: #252e58;}
#push_list li span{opacity: 0.8; font-size: 0.95em; font-weight: 300;}

/*계량내역*/
#account .area_top{margin:0; width:100%; padding:0px 0px 15px; background:#fff; border-radius:7px;
    box-sizing:border-box; /*box-shadow:3px 0px 10px rgb(0 0 0 / 15%)*/; margin-bottom: 10px;}
#account .area_top h3{font-size:1.37em; font-weight:bold; color:#101f40}#account .area_top .box_in{font-size: 1.2em; margin-bottom: 5px; display: flex;}
#account .area_top .box_in input[type=radio] + label{ width: 100%; margin-right: 2.5px;}
#account .area_top .box_in input[type=radio] + label:last-child{margin-right: 0;}

#account .search_wrap {display: flex;align-items: center; margin: 7px 0 0;}

#account .search_wrap select,
#account .search_wrap input[type="search"]{background-color: #fff;color: #000;font-weight: 400; width:auto; padding: 0 20px 0 10px;height: 30px;display: flex;align-items: center;justify-content: center;border: 1px solid #cdd0d2;}
#account .search_wrap input[type="search"]{width: calc(100%)}
#account .search_wrap .search_bar{position: relative; width: 100%;}
#account .search_wrap .search_bar > button{position: absolute;top: 50%;right: 0;transform: translateY(-50%);border: none;background: transparent;color: #000;font-weight: 400;padding: 0 10px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;}
#account .search_wrap i {font-size: 1em;color: #000;}
#account .select_box > p {min-width: 50px;font-weight: 700;color: #000;}
#account .search_wrap > input[type=date] {width: 100%;height: 30px;margin: 0 5px;padding: 0 5px;border: 1px solid #cdd0d2;}
#account .search_wrap > input[type=text] {width: 100%;height: 30px;margin: 0 5px;padding: 0 5px;border: 1px solid #cdd0d2;border-radius: 0;
    font-size: 1em;}
#account .search_wrap > button {border: 1px solid #cdd0d2;background: transparent;border-radius: 0;color: #000;font-weight: 400;padding: 0 10px;height: 30px;display: flex;align-items: center;justify-content: center;cursor: pointer;;}


#account .account_list li{ border-radius: 7px; background: #e8eefb; padding: 15px; margin-bottom: 10px;}
#account .account_list li:nth-child(even){background:#F4F7FC; }
#account .account_list li .title{ border-bottom: 1px solid rgba(0,0,0,0.05); padding-bottom: 5px; margin-bottom: 5px}
#account .account_list li .date{font-size: 1.2em;}
#account .account_list li .left{position: relative; width: 25%; height: 70px; background:#0e8de5; margin-right: 10px; border-radius: 4px; overflow: hidden; align-self: flex-start;}
#account .account_list li .left p{position: absolute; left:0; width: 100%; text-align:center ; top: 50%; transform: translateY(-50%);
    color: #fff; font-size: 18px;}
#account .account_list li .right p{ color:#252e58; margin: 2px 0;}
#account .account_list li .right p span{ font-size:1.40em; vertical-align:middle;}
#account .account_list li .right p span.won{ font-size:1.15em; margin:0 0 0 2px}
#account .account_list li .right em{margin-right: 3px;}

#account .account_list.v2 li .left{position: relative; width: 25%;   background: none;    height: fit-content; margin-right: 10px;  overflow: unset!important; align-self: flex-start;}
#account .account_list.v2 li .left h2{position: relative; left:unset!important; width: 100%; height: fit-content; margin-bottom: 5px; background:#0e8de5; border-radius: 4px; text-align:center ; top: unset!important; transform: unset!important;    line-height: 25px;    color: #fff; font-size: 18px; padding: 15px 0}
#account .account_list.v2 li .left h2:nth-child(2){background:#1d429a;cursor: pointer; font-size: 13.5px;padding: 10px 0}}

#account .account_list li.more{text-align: center;}

#admComment textarea { width: 100%;    min-height: 200px;    border: 1px solid #aeaeae;    padding: 10px;}
#admComment .modal-header {  padding-bottom: 15px!important;}

/*상세*/

#account  .detail_view{border-top: 1px solid rgba(0,0,0,0.1);}
#account  .detail_view dl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px;
    font-weight: 700;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 0;
}

#account .detail_view dl:nth-child(2n) {
    background: #F4F7FC;
}

#account .detail_view dt {
    width: 100px;
}

#account .detail_view dd {
    width: calc(100% - 100px);
    display: flex;
    align-items: center;
    font-size: 1.1em;
}
#account .detail_view dd span{ font-size:1.60em; color:#1a202c}
#account .detail_view dd input,
#account .detail_view dd select{width: 100%; all:unset;}


/*알림내역*/
#myallim{ padding:20px}
#myallim > dl{ background:#fff; padding:15px; margin:0 0 12px}
#myallim > dl > dt{font-size: 1.22em; margin: 0 0 3px;}
#myallim > dl > dd{opacity: .6;}
#myallim > dl > dd span{ text-align:right; display:block}

/*알림설정*/
.pushList{ margin:15px 0 0}
.pushList hr{border-top: 4px solid #eeeff0; display:block}
.pushList > dl{ position:relative; margin:0 20px 25px}
.pushList > dl div.btn_switch{ position:absolute; right:0}
.pushList > dl > dt{ font-size:1.22em; margin:0 0 3px}
.pushList > dl > dd{ opacity:.6}
.switch-button { position: relative; display: inline-block; width: 55px; height: 30px; } 
.switch-button input { opacity: 0; width: 0; height: 0; } 
.onoff-switch { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius:20px; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.onoff-switch:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px; bottom: 4px; background: #fff; -webkit-transition: .5s; transition: .4s; border-radius:20px; } 
.switch-button input:checked + .onoff-switch { background: #0e8de5; } 
.switch-button input:checked + .onoff-switch:before { -webkit-transform: translateX(26px); -ms-transform: translateX(26px); transform: translateX(26px); }


/*모달내용*/
#accountM .modal-header {padding-bottom: 15px; }
.modal-content .modal-body {border-top: 1px solid #e5e5e5;}
.modal-content .modal-body > div {overflow: auto;}
.modal-content table{/*margin: 25px 0;*/width: 100%;font-size: 1em;text-align: center;border-top: 1px solid #252e58;border-bottom: 1px solid #d5d7e2;}
.modal-content table th{text-align: center;height: 43px;background: #fff;font-weight: 400;border-bottom: 1px solid #d5d7e2;}
.modal-content table tr{background: #fff;border-bottom: 1px solid #d5d7e2;}
.modal-content table tr.tot{background: #252e58 !important;/*border: 1px solid #252e58*/;border-top: 2px solid #252e58 !important;border-bottom: 1px solid #252e58 !important;font-weight:500;color:#fff;}
.modal-content table tr.highlight{background: #252e58 !important;color: #fff !important;}
.modal-content table tr:nth-child(2n-1){background: #eef0f1;}
.modal-content table td{height: 38px;    padding: 0 10px;}
.modal-content table td a.pop02{display: inline-block;padding: 0 12px;height: 24px;line-height: 24px;background: #fff;border: 1px solid #cdd0d2;color: #000;font-size: 13px;font-weight: 500;box-sizing: border-box;cursor: pointer;}
.modal-content table td a.pop02.st2{background: #141620;color: #fff;border: 1px solid #141620;}
.modal-content .table_bottom{justify-content: center;}
.modal-content .table_bottom .total{position: absolute;left: 0;bottom: 0;}
.modal-footer .btn_color{font-size: 0.8em;color: #fff;background: #0e9ce5;border-radius: 3px;padding: 0 10px;height: 35px;line-height: 35px;}
.modal-footer .btn_cancel{font-size: 0.8em;color: #fff;background: #a8aaaf;border-radius: 3px;padding: 0 10px;height: 35px;line-height: 35px;}