@charset "utf-8";
@import url('fonts.css');
@import url('reset.css');

/* Layout */
#wrap{ position: relative; min-width:1183px;}
.nav_header{ display: flex; position: fixed; width:210px; height:50px; top:0; padding-left:20px; border-right: 1px solid #3a4d85; background-color: var(--header); align-items: center; z-index: 5;}
.comp_sel{ position: absolute; left:220px; display: flex; align-items: center;}
.comp_sel button{ opacity: 0.5;}
.comp_sel button:hover{ opacity: 1;}
.header{ display: flex; position: fixed; top:0; width:100%; height:50px; padding-left:210px; background: var(--header); z-index:3;}
.header .nav_gnb{ display: flex; margin-left:auto;}
.header .nav_gnb li{ display: flex; align-items: center; justify-content: center;}
.sidebar{ position: fixed; width:210px; height:calc(100% - 50px); top:50px; padding:10px 0; border-right:1px solid var(--main-bd-color); background-color: #fff; z-index:6;}
.content{ min-height: 800px; margin-left: 210px; padding:50px 20px 0;}
.footer{ margin-top:40px; padding-left: 210px; border-top:1px solid var(--main-bd-color);}
.footer .copyright{ padding:15px; font-size: 11px; color: #666;}

/* Header */
.btn_setting{ display:flex; align-items: center; justify-content: center; width:50px; height:50px;}
.btn_setting:hover,
.btn_setting:hover{ background-color: var(--header-bg);}
.btn_member{ display: flex; align-items: center; margin:0 5px; font-size: 12px; color:#fff; text-decoration: none !important;}
.btn_member:hover,
.btn_member:focus,
.btn_member:visited{ color:#fff; text-decoration: underline !important; text-underline-offset:2px;}
.btn_logout{ display:flex; align-items: center; justify-content: center; margin-left:10px; width:50px; height:50px; border-left: 1px solid #3a4d85;}
.btn_logout:hover{ background-color: var(--header-bg);}

/* Sidebar */
.disk_area ul{ display: flex; margin:0 20px; padding:10px 0; border-radius:3px; background:var(--default-bg); font-size: 9px;}
.disk_area ul li{ width:33.333%; border-left: 1px solid #dbdbdb; color:#666; text-align:center;}
.disk_area ul li:first-of-type{ border: none;}
.disk_area ul li p{ margin-top: 5px; font-size: 15px;}
.disk_area ul li p span{ font-size:11px;}
.nav_lnb{ margin:10px 0;}
.nav_lnb li a{ display: flex; align-items: center; padding:0 20px; font-weight: 700; color:#666; line-height: 40px; text-decoration: none;}
.nav_lnb li:hover a{ background:var(--rgba-primary-1);}
.nav_lnb li.active a{ background:var(--rgba-primary-1); color:var(--primary);}
.nav_lnb li.active a:after{ position: absolute; content:''; width:10px; height: 13px; right:20px; background:url(../images/sp_ico.svg) no-repeat -278px -6px;}
.nav_lnb li.active a .lnb_ico i:before{filter: invert(78%) sepia(71%) saturate(377%) hue-rotate(122deg) brightness(80%) contrast(88%);}
.nav_lnb li a .lnb_ico{ display: flex; align-items: center; margin-right:5px;}
.nav_lnb li a .lnb_ico i{ width:20px; height:20px;}
.nav_lnb li.role_master a{ color:var(--master);}
.nav_lnb li.role_master:hover a{ background:var(--rgba-master-1);}
.nav_lnb li.role_master.active a{ background:var(--rgba-master-1); color:var(--master);}
.nav_lnb li.role_master a .lnb_ico i:before,
.nav_lnb li.role_master.active a:after{filter: brightness(0) saturate(100%) invert(13%) sepia(83%) saturate(6826%) hue-rotate(276deg) brightness(97%) contrast(119%);}

/* 알림창 */
.group_alarm{ position: relative; width:50px; height:100%;}
.group_alarm:hover{ background-color: var(--header-bg);}
.group_alarm .btn_noti{ position: relative; width:100%; height:100%; }
.group_alarm .btn_noti .badge{ position: absolute; top:16px; left:27px; min-width:14px; padding:2px; background:#FFD700; font-family:initial; font-weight: 700; color:var(--header);}
.group_alarm .dropdown-menu{ top:37px; left:initial; right:-10px; width:400px; padding-bottom:0;}
.group_alarm .dropdown-menu .alarm_header{ display:flex; justify-content:space-between; align-items: center; padding:7px 10px; border-bottom:1px solid #eee; font-weight:bold;}
.group_alarm .dropdown-menu .alarm_header p{ flex:1;}
.group_alarm .dropdown-menu .alarm_footer{ border-top: 1px solid #eee; padding:10px; text-align: center;}
.group_alarm .dropdown-menu .alarm_body{ font-size:13px;}
.group_alarm .nav{ padding:10px; background:#f7f7f7;}
.group_alarm .nav-pills > li{ margin-right: 3px;}
.group_alarm .nav-pills > li > a{padding:4px 7px 3px;}
.group_alarm .nav-pills > li.alarm_off { margin-left:auto;}
.group_alarm .alarm_lst{ overflow-y: auto; height:300px; background: #fff;}
.group_alarm .alarm_lst li{ display: flex; justify-content: space-between; padding:5px 10px; border-bottom:1px solid #eee; position: relative;}
.group_alarm .alarm_lst li:last-child{ border-bottom: 0 none;}
.group_alarm .alarm_lst .item_lft{ padding-left:10px;}
.group_alarm .alarm_lst .item_rgt{ display: flex; align-items: center; min-width:80px; justify-content: right;}
.group_alarm .alarm_lst .tit{ line-height: 18px; color:#888; font-weight: normal;}
.group_alarm .alarm_lst .tit:before{ content:'•'; position: absolute; top:5px; margin-left:-8px;}
.group_alarm .alarm_lst .subtit{ font-size:12px; line-height:14px; color:#999;}
.group_alarm .alarm_lst .time{ padding:2px 5px 0px; background:#eee; font-size:11px; color:#999; border-radius:5px;}
.group_alarm .alarm_lst .item_new .tit{ color:var(--primary); font-weight: 700;}
.group_alarm .alarm_lst .item_new .subtit{ color:#666;}
.group_alarm .alarm_lst .item_new .time{ color:#666;}
.group_alarm .alarm_lst .btn_del{ width:16px; height:16px; margin-left: 5px; background:url('../images/sp_ico.svg') no-repeat -215px -65px; font-size:0;}
.group_alarm .mCSB_scrollTools{ width:12px;}

/* Login */
.login_body{ background:url('../images/bg_login.jpg') no-repeat fixed center / cover;}
.login_body:before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(36,57,119,.9);}
.login_wrap{ position:absolute; left:50%; top:50%; width:380px; height:420px; padding:40px 30px; background: #fff; border-radius:5px; transform:translate(-50%, -50%); color:#666;}
.login_wrap .txt1{ padding:5px 0; font-size: 20px; font-weight: 700;}
.login_wrap .txt2{ font-size: 12px;}
.login_wrap ul{ margin-top:46px;}
.login_wrap li{ position: relative; margin-top:15px;}
.login_wrap li p{ font-size:12px;}
.login_wrap li input{ display: flex; align-items: center; width:100%; height:40px; margin-top:5px; padding-left:30px; background: #f4f4f4; border:2px solid #f4f4f4; border-radius:3px; font-size:16px; transition: border 0.3s ease;}
.login_wrap li input:hover,
.login_wrap li input:focus,
.login_wrap li input:active{ border:2px solid var(--primary);}
.login_wrap li i{ position: absolute; left:7px; bottom:8px;}
.login_wrap li.id i:before{ background-position: -182px -30px;}
.login_wrap li.pw i:before{ background-position: -212px -30px;}
.login_wrap li a{ position: absolute; right:0; top:0; font-size:12px; color:#999; text-decoration: none;}
.login_wrap button[type="submit"]{ width:100%; height:40px;}

/* Login-비밀번호변경 */
.pw_change {padding:20px 0;}
.pw_change .txt{margin-bottom:20px; text-align:center; letter-spacing:-.5px;}
.pw_change .txt p{margin-bottom:10px; font-size:20px; color:var(--primary); letter-spacing:-1px;}
.pw_change .txt span{font-size:12px; color:#666;}
.pw_change .txt_id,
.pw_change .txt_pwd{padding:20px; font-weight:600; font-size:16px; text-align:center; background:#f7f7f7; border-radius: 3px;}

.pw_change dl{ display: flex; flex-direction: column; gap:5px; padding:15px; background:#f7f7f7; border-radius:3px;}
.pw_change dl dt{height:14px;margin-top: 10px;font-size:12px; font-weight:bold;}
.pw_change dl dt:first-of-type{ margin-top: 0;}
.pw_change dl dd{display: flex; gap:5px; position:relative;}
.pw_change dl dd input{ width:100% !important; padding-right: 44px !important;}
.pw_change dl dd .certi_time{position:absolute; right:52px; top:4px; color:red; font-weight:bold; font-size:12px;}
.pw_change .dsc{ padding-left:10px;}

/* Login-아이디.비번찾기 */
.idpw_area{margin:20px 0}
.idpw_area:last-of-type {padding-top:20px; border-top:1px solid #ddd;}
.idpw_area:first-of-type{margin-top:10px;}
.idpw_area .tit{height:20px; margin-bottom:10px; font-weight:500; font-size:16px; color:var(--primary);}
.idpw_area dl{ display: flex; align-items: center; justify-content: center; gap:8px; padding:15px; border-radius:3px; background:#f7f7f7;}
.idpw_area dl dt{ flex-shrink:0; width:auto;}
.idpw_area dl dd{ width: 100%;}
.idpw_area .dsc{ padding-left:10px;}

/* icon */
.ico,.ico14{ display:inline-block; font-size: 0; width:24px; height:24px; vertical-align:-3px;}
.ico14{ width:14px; height:14px;}
.ico:before,.ico14:before{ content:''; display:inline-block; clear:both; width:100%; height:100%; background-image:url('../images/sp_ico.svg'); background-repeat: no-repeat; background-size:300px 250px;}
.ico_setting:before{ background-position: 0px -30px;}
.ico_member:before{ background-position: -30px -30px;}
.ico_logout:before{ background-position: -60px -30px;}
.ico_bell:before{ background-position: -240px -29px;}
.ico_bell_off:before{ background-position: -240px -59px;}

.ico_lnb1:before { background-position: -2px -153px;} /* 대시보드 */
.ico_lnb2:before { background-position: -32px -153px;} /* 주차관리 */
.ico_lnb3:before { background-position: -62px -153px;} /* 입출차관리 */
.ico_lnb4:before { background-position: -92px -153px;} /* 통계관리 */
.ico_lnb5:before { background-position: -122px -153px;} /* 로그조회 */
.ico_lnb6:before { background-position: -152px -153px;} /* 회원관리 */
.ico_lnb7:before { background-position: -182px -153px;} /* 회사관리 */
.ico_lnb8:before { background-position: -212px -153px;} /* 장치관리 */
.ico_lnb9:before { background-position: -242px -153px;} /* 사업관리 */
.ico_lnb10:before{ background-position: -272px -153px;} /* 전체관리 */

.ico_lnb11:before{ background-position: -2px -183px;} /* 주차권관리 */
.ico_lnb12:before{ background-position: -32px -183px;}  /* 보고서 */
.ico_lnb13:before{ background-position: -62px -183px;} /* 통합제어 */
.ico_lnb14:before{ background-position: -92px -183px;} /* 주차장관리 */
.ico_lnb15:before{ background-position: -122px -183px;} /* 정산관리 */

.ico_srch:before{ background-position: -90px -30px;}
.ico_video:before{ background-position: -125px -35px;}
.ico_excel:before{ background-position: -155px -36px;}
.ico_sort:before{ background-position: -5px -65px;}
.ico_sort.sort_asc:before{ background-position: -35px -65px;}
.ico_sort.sort_desc:before{ background-position: -65px -65px;}
.ico_close_xs:before{ background-position: -95px -65px;}
.ico_audio:before{ background-position: -125px -65px;}
.ico_prev:before{ background-position: -155px -65px;}
.ico_next:before{ background-position: -185px -65px;}
.ico_edit:before{ background-position: -99px -75px; background-size:240px 200px;}
.ico_print:before{ background-position: -185px -95px;}
.ico_img:before{ background-position: -65px -125px;}
.btn-link:hover .ico_img:before{filter: brightness(0) saturate(100%) invert(41%) sepia(80%) saturate(979%) hue-rotate(144deg) brightness(99%) contrast(100%);}

.ico_external_link{display: inline-block; width:12px; height:12px; background:url('../images/ico_external_link.svg') no-repeat center; vertical-align: -2px;}

.ico_page_first, .ico_page_prev, .ico_page_next, .ico_page_last{ font-size:0 !important;}
a>.ico_page_first:before, .ico_page_first:before{ background-position: 0 -88px; filter:none;}
a>.ico_page_prev:before, .ico_page_prev:before{ background-position: -30px -88px; filter:none;}
a>.ico_page_next:before, .ico_page_next:before{ background-position: -60px -90px; filter:none;}
a>.ico_page_last:before, .ico_page_last:before{ background-position: -90px -90px; filter:none;}
.ico_page_first:before, .ico_page_prev:before, .ico_page_next:before, .ico_page_last:before{filter: brightness(0) saturate(100%) invert(85%) sepia(1%) saturate(453%) hue-rotate(346deg) brightness(91%) contrast(85%);}

.modal-header .close span:before{ content:''; display:block; clear:both; width:100%; height:100%; background-image:url('../images/sp_ico.svg'); background-repeat: no-repeat; background-size:300px 250px; }

/* 공통 */
h2{ margin:15px 0; font-family:'EliceDigitalBaeum'; font-size:20px;}
.section{ margin:10px 0; background: #fff; border: 1px solid var(--main-bd-color); border-radius:5px;}
/* .section *{ vertical-align: middle;} */
.section_fit{ width:fit-content}
.section_inner{ margin:15px 10px;}
.section--plain{ border:0 none; background: none;}
.tit{ display: flex; align-items: center; gap:5px; font-weight: 700; line-height: normal;}
.tit2{ padding:20px 0 5px 0; font-weight: 600; }
form fieldset:first-of-type .tit2{ padding-top: 0;}
.modal-body .tb_action{margin:0; padding:10px 0;}
/* 공통-탭메뉴 */
.nav-pills > li{ margin-right: 5px;}
.nav-pills > li > a{ padding:3px 15px; text-decoration: none;}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus{ background-color: var(--primary);}
/* Table */
.tb_action{ display: flex; align-items: center; justify-content: space-between; gap:5px; margin:10px 10px;}
.tb_action .btn{ vertical-align: bottom;}
.tb_action.rgt{ justify-content: flex-end;}
.tb_action select{ height:28px;}
.tb_action+.tb_action{ padding-top:0;}
.tb_action_v2{ padding:5px 0 !important;}
table.tb+.tb_action{ align-items:initial;}

table.tb{ table-layout:fixed; border-bottom: 1px solid var(--main-bd-color);}
table.tb th,
table.tb td{ height:35px; text-align: left; word-break:break-all; border-top: 1px solid var(--main-bd-color); border-bottom: 1px solid var(--main-bd-color); /*border:1px solid blue;*/}
table.tb th{ font-weight:700; background:#f7f7f7;}

table.tb_lst th,
table.tb_lst td{ padding:5px;/* padding:0 5px;*/ border-left:1px solid red_;}
table.tb_lst tr:first-child th:first-child, table.tb_lst td:first-child{ padding-left:15px;}
table.tb_lst tr:first-child th:last-child, table.tb_lst td:last-child{ padding-right: 10px;}
table.tb_lst th{ background: #f2f2f2; font-weight: 700;}
table.tb_lst .tr{ text-align: right;}

table.tb_lst_v2 th{ height: 22px;}
table.tb_lst_v2 th.bd{ border:1px solid var(--main-bd-color);}
table.tb_lst_v2 th.gap,
table.tb_lst_v2 td.gap{ padding-left:10px;}

table.tb_lst2 th, table.tb_lst2 td{ padding:2px 8px; border:1px solid var(--main-bd-color); text-align: center; line-height: 15px;}
table.tb_lst2 td{ font-weight: normal;}
table.tb_lst2_v2 th, table.tb_lst2_v2 td{ height: 31px;}
table.tb_lst2_v3 th, table.tb_lst2_v3 td{ height: 25px;}

table.tb_lst3 th, table.tb_lst3 td{ height: 30px; padding:2px 8px; border:1px solid var(--main-bd-color); text-align: center; line-height: 21px;}
table.tb_lst3 td{ font-weight: normal;}
/* table.tb_lst3 tr:first-of-type th{ border-top:0;} */
table.tb_lst3 th:first-of-type,
table.tb_lst3 td:first-of-type{ border-left: 0;}
table.tb_lst3 th:first-of-type+td{ border-left: 1px solid var(--main-bd-color);}
table.tb_lst3 th:last-of-type,
table.tb_lst3 td:last-of-type{ border-right:0;}

/* 주차장등록-설정 */
table.tb_lst4{ width: auto; margin-top:5px;}
table.tb_lst4 th, table.tb_lst4 td{ width: auto !important; height: 30px !important; padding:5px 10px !important; border:1px solid var(--main-bd-color) !important;}

table.tb_wrt tr:first-of-type th,
table.tb_wrt tr:first-of-type td{ border-top-color:#999;}
table.tb_wrt th{ font-weight:700;}
table.tb_wrt th,
table.tb_wrt td{ height: 39px; padding:7px 10px;}
table.tb_wrt+table.tb_wrt{ margin-top:20px;}

table.tb_wrt2 th,
table.tb_wrt2 td{ padding:5px 20px; padding-right:0; }
table.tb_wrt2 tr:first-of-type th,
table.tb_wrt2 tr:first-of-type td{ border-top-color:#999;}
table.tb_wrt2_v2 th,
table.tb_wrt2_v2 td{ padding:5px 10px;}
table.tb_wrt2_v2 th+th,
table.tb_wrt2_v2 td+td{ padding-left:0}

table.tb_wrt3 th,
table.tb_wrt3 td{ height: 41px; padding:5px 10px;}

table.tb_wrt3_v2 th,
table.tb_wrt3_v2 td{ border:1px solid var(--main-bd-color);}

table.tb_wrt4 th,
table.tb_wrt4 td{ height: 35px; padding:5px 10px; border:1px solid var(--main-bd-color);}

table.tb_view tr:first-of-type th,
table.tb_view tr:first-of-type td{ border-top-color:#999;}
table.tb_view th{ font-weight:700;}
table.tb_view th,
table.tb_view td{ height:35px; max-height:30px; padding:5px 10px;}

.ul_wrt{ border-top:1px solid #999;}
.ul_wrt li{ display: flex; gap:5px; padding:7px 10px; border-bottom:1px solid var(--main-bd-color)}
.no_data{ padding:30px 0 !important; justify-content: center;}

/* 공통-검색영역 */
.group_srch{ position: relative; display: flex; flex-wrap:wrap; align-items: center; gap:5px 30px; margin:10px 60px 10px 10px;}
/* 줄바꿈 li에 클래스 추가 (script.js 연동) */
.group_srch>li.first-in-row { padding-left: 0; border-left: none;}
.group_srch>li{ display:inline-flex; align-items: center; gap:5px;}
/* .group_srch li:first-of-type.flex-none{ flex:none;}
.group_srch li:first-of-type label{ width:-webkit-fill-available;}
.group_srch li:first-of-type [class^="frm-"]{width:auto;}
.group_srch li:first-of-type label input{ width:calc(100% - 80px) !important; min-width:200px;}
.group_srch li:first-of-type,
.group_srch li:last-of-type{ padding-left: 0; border: none;} */
/* .group_srch>li:last-of-type{ flex:none; width:40px; text-align: right; border:0 none !important} */
.group_srch>li:last-of-type{ position: absolute; bottom:-3px; right:-50px; border:0 none !important}
.group_srch .tit,
.group_srch_plot .tit{ display: inline-flex; align-items: center; min-width:70px; flex-basis: 70px; margin-right:3px; padding:3px 5px; border-radius:3px; background:#f1f1f1; font-size:12px; font-weight: 700; vertical-align: middle;}

.group_srch select,
.group_srch input,
.group_srch .datepicker_day,
.group_srch_plot select{ /*background-color:#f8f8f8; */border-color:#eaeaea;}
/* .group_srch li [class^="frm-"] { height: 20px; margin:0 10px 0 0;} */
/* .group_srch li input[type=text]{ border:none; border-bottom:1px solid var(--main-bd-color); border-radius:0;} */
.group_srch li .keyword_area{ display: flex; width: 100%; min-width:400px;}
.group_srch li .keyword_area .tit{ margin-right:8px;}
.group_srch li .keyword_area select{ margin-right:4px;}
.group_srch li .keyword_area input{ width:100% !important;}
.group_srch li .btn_srch{ width:30px; display: inline-flex; align-items: center; justify-content: center; width:30px; height:30px; padding:0;}
.group_srch_plot{ display: flex; align-items:center; gap:5px; padding:10px;}
.group_srch_plot .tit{ margin-right:3px;}
.group_srch_plot_v2>div{ display: flex; flex:1; align-items: center; gap:5px;}
/* .group_srch+.group_srch li:first-of-type,
.group_srch_v2 li:first-of-type{ flex-shrink:initial;} */
/* 검색영역-1줄.공무차량관리 */
.section:has(.group_srch_single) { background-color: #f7f7f7;}
.group_srch_single{ flex-direction: column; align-items: flex-start;}
.group_srch_single select,
.group_srch_single input[type=text] { background-color: #f7f7f7;}
.group_srch_single .tit{ display: inline-flex; width:70px;}
.group_srch_single li{ padding-left:0; border:0 none;}
.group_srch2 { display:flex;}

/* SumoSelect_멀티선택박스 */
.SumoSelect *{ box-shadow: none !important;}
.SumoSelect{ display:inline-flex !important; width:auto !important; min-width:150px; vertical-align: middle;}
.SumoSelect>.srch_select{ width:100%; max-width:none; height:24px;}
.SumoSelect>.srch_select.SelectBox{ padding:3px 5px;}
.SumoSelect.open>.srch_select .search-txt{ padding:4px 0px; border:0 none; border-radius:0; top:-1px !important; left:-1px !important; width:calc(100% + 2px) !important; border-radius:3px; padding:0 5px;}
.SumoSelect>.srch_select.CaptionCont{ border:0 none; border:1px solid #eaeaea; border-radius:3px; box-shadow: none;}
.SumoSelect.open>.srch_select.CaptionCont,
.SumoSelect.open:focus>.srch_select.CaptionCont{ border-color:var(--primary); box-shadow: none;}
.SumoSelect.open>.srch_select.CaptionCont,
.SumoSelect:focus>.srch_select.CaptionCont,
.SumoSelect:hover>.srch_select.CaptionCont{ border-color:#eaeaea; box-shadow: none;}
.SumoSelect.open>.srch_select+.optWrapper{ top:24px; width:auto !important; min-width:150px; border-color:#767676; border-radius:0;}
.SumoSelect>.srch_select.CaptionCont>span.placeholder{ color:#333; font-style:normal;}
.SumoSelect .srch_select+.optWrapper .select-all{ height: 100%; padding:6px 0 5px 30px;}
.SumoSelect .srch_select+.optWrapper .select-all.partial>span i,
.SumoSelect .srch_select+.optWrapper .select-all.selected>span i,
.SumoSelect>.srch_select+.optWrapper.multiple>.options li.opt.selected span i{ background-color: var(--primary);}
.SumoSelect .srch_select+.optWrapper .select-all.partial>span i{ background-color: #ccc;}
.SumoSelect .srch_select+.optWrapper .select-all>span i,
.SumoSelect>.srch_select+.optWrapper.multiple>.options li.opt span i{ box-shadow: none;}
.SumoSelect>.srch_select+.optWrapper.multiple>.options li.opt{ padding-left:30px;}
.SumoSelect .srch_select+.optWrapper .select-all>span,
.SumoSelect>.srch_select+.optWrapper.multiple>.options li.opt span{ margin-left: -30px;}
.SumoSelect>.CaptionCont>label{ width:16px !important;}
.SumoSelect>.CaptionCont>label>i{ background-image:url(../images/ico_arrow_select.svg) !important}

/* 공통-할인명 */
.label-disc-name{ display:inline-block; width:65px; height:18px; padding:0; line-height: 18px; font-size:88%;}

/* 공통-이미지없음 */
.noimg { aspect-ratio: 16 / 9; background: #f7f7f7 url(../images/ico_imgnon.svg) no-repeat center; background-size: 50px;border:1px solid #e9e9e9;}
.noimg_xs{ width:50px; height:30px; background-size:15px;}

/* 대시보드 */
.section_dashboard{ margin-top:20px;}
/* .section_dashboard .row{ margin:0 -10px;} */
.section_dashboard .col-xs-6{ padding:0 10px;}
.section_dashboard .panel-default{ border-color:var(--main-bd-color);}
.section_dashboard .panel-title{ display: inline-block; margin-right:10px; font-size:14px; font-weight: 600;}
/* .section_dashboard .panel-body{ height:210px;} */
.section_dashboard .chart_area{ height:200px; margin:0 auto;}
.section_dashboard .group_chart .col-xs-4{ margin:0; padding:0;}
.fullscreen_item{margin-left:auto;}

/* 대시보드-이용현황 */
.card_type1{ display: flex; align-items: center; justify-content: space-between; padding:15px 20px; border-radius:5px; font-size:16px;}
.card_type1 .num{ font-size:24px; font-weight:600; margin-left: 10px;}
.card_type1 .tit{ font-weight:normal; gap:0; line-height: 24px; }
.card_type1 .card_ico{ width:24px; height: 24px; margin:0 5px; border-radius:3px; background:rgba(0,0,0,.1)}
.card_type1 .card_type1--type1{ display: flex; align-items: center;}
.card_type1 .card_type1--type1>div{ display: flex; line-height: 24px;}
.card_type1 .card_type1--type1>div:first-of-type{ padding-right: 10px;}
.card_type1 .card_type1--type1>div:last-of-type{ padding-left: 10px; border-left:1px solid rgba(0,0,0,.2);}
.ico_pk_open:before{ background-position: -210px -90px;}
.ico_pk_close:before{ background-position: -240px -90px;}
.ico_pk_active:before{ background-position: 0px -120px;}
.ico_pk_blocked:before{ background-position: -30px -120px;}
.card_type--theme1{ background:rgba(124,181,236,.2); border:1px solid rgba(124,181,236,.2);}
.card_type--theme2{ background:rgba(75,194,194,.2); border:1px solid rgba(75,194,194,.2);}
.card_type--theme1 .card_ico{ background: rgba(124,181,236,.5)}
.card_type--theme2 .card_ico{ background: rgba(75,194,194,.5)}

/* 장치관리 */
.device_stat_ok,
.device_stat_err{ display: inline-block; width:50px; height: 16px; background:#777; border-radius:0.25em; font-size: 88%; color:#fff; line-height: 16px; text-align: center;}
.device_stat_ok{ background:none; box-shadow:inset 0 0 0 1px #ddd; color:#777; background: #fff;}
.device_stat_err{ background:#ef5357;}
.device_memo{ display: inline-flex; align-items: center;}
.device_memo input{ vertical-align: baseline;}
.btn-memo{ width:24px; height:24px; font-size:0;}
.btn-memo span{ display: block; width:16px; height:16px; background:url(../images/ico_memo.svg) no-repeat 0 -2px ; background-size: 100%;}
.btn-memo:hover span{ filter: brightness(0) saturate(100%) invert(0%) sepia(74%) saturate(2611%) hue-rotate(3deg) brightness(92%) contrast(106%);}

/* 주차관리 */
.pk_stat_parked{ font-size: 7px; color:var(--primary);}
.pk_stat_parking{ font-size: 7px; color:var(--header);}
.pk_stat_err{ font-size: 7px; color:var(--err);}
.mach_stat_on,
.mach_stat_off,
.mach_stat_err{ display: inline-block; width:30px; height: 18px; background:#777; border-radius:0.25em; font-size: 75%; color:#fff; line-height: 18px; text-align: center; vertical-align: middle;}
.mach_stat_on{ background:none; box-shadow:inset 0 0 0 1px #ddd; color:#777; background: #fff;}
.mach_stat_err{ background:#ef5357;}

/* 주차관리-그룹관리 */
.section_pkgroup{ display: flex; gap:20px;}
.section_pkgroup .group_tree{ width:200px;}
.section_pkgroup .group_tree .tree_area{ overflow:auto; height:300px; margin-top: 10px; padding:10px 0; border:3px solid #ddd;}
.section_pkgroup .group_tree .ztree li a.curSelectedNode{ position:relative; border-color:transparent; background:none; font-weight:500; color:#000; opacity:0.9;}
.section_pkgroup .group_tree .ztree li a.curSelectedNode:before{ content:''; position:absolute; width:100%; height:6px; top:7px; left:-3px; background:#c6f9f9; z-index:-1;}
.section_pkgroup .group_tree .ztree li a:hover{ text-decoration: none;}
.section_pkgroup .group_info{ flex:1;}
.section_pkgroup .group_info .tit{ height:40px; font-size: 14px; line-height: 40px;}

/* 주차관리-CCTV보기 */
.section_cctv .cctv_name{ padding-bottom:10px; font-size: 15px; font-weight: 700; }
.section_cctv .group_audio{ margin:0; margin-top:10px;}
.section_cctv .group_audio .tit{ display: flex; align-items: center; gap:5px; padding-bottom:10px;}
.section_cctv .group_audio .btn-group{ display: flex;}
.section_cctv .group_audio .btn-group button{ flex:1;}

/* 주차관리-감면대상선택 */
.section_discount .tb_wrt .btn-link{ padding:0; font-size: 13px; text-decoration: underline; text-underline-offset:2px;}

/* 운용시간 */
.dl_parking_hours{ display: flex; flex-wrap:wrap; width: 200px; border-bottom: 1px solid #e7e7e7;}
.dl_parking_hours dt, .dl_parking_hours dd{ padding:3px 5px; text-align: center; border-top:1px solid #e7e7e7; border-right: 1px solid #e7e7e7;}
.dl_parking_hours dt{ width:30%; background: #f7f7f7; border-left: 1px solid #e7e7e7; line-height: normal;}
.dl_parking_hours dd{ width:70%;}

/* 입출차현황 */
.highlight_nonpay td{ background-color: var(--rgba-err-1); color:var(--err);}
.highlight_alarm td{ background-color:#FFFF00;}

/* 정기권매출현황 */
.card_pass_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px;}
.card_pass { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 10px; padding:10px; border-radius:5px;}
.card_pass__title { display: flex; flex-direction: column; align-items: center; padding:0 10px; font-size: 15px; font-weight: 600;}
.card_pass__subtitle { font-size: 12px; color: #666; font-weight: 400;}
.card_pass__item{ overflow:hidden; display: flex; flex-direction: column; align-items: center; gap:5px; border:1px solid rgba(75,194,194,.4); border-radius:5px;}
.card_pass__item--current{ background:rgba(75,194,194,.4);}
.card_pass__label{ width:100%; padding:2px; background:rgba(255,255,255,.8); font-size: 12px; font-weight: 600; text-align: center;}
.card_pass__value{ padding:5px; letter-spacing: -.5px;}
.card_pass__remain{ font-size: 24px; font-weight: 600;}
.card_pass__total{ font-size: 18px;}

/* 통계관리-주차권통계-총매출현황 */
.card_pass_stat { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 10px; padding:10px; border-radius:5px;}
.card_pass_stat__title { display: flex; flex-direction: column; align-items: center; padding:0 10px; font-size: 15px; font-weight: 600;}
.card_pass_stat__item{ display: flex; flex-direction: column; align-items: center; padding:10px 10px 5px; border:1px solid rgba(75,194,194,.4); border-radius:5px; background:rgba(255,255,255,.8)}
.card_pass_stat__amount span{ font-size:24px; font-weight: 600;}


/* 통계관리-매출통계모달창합계 */
/* .rate_sum{ display: flex; gap:5px;}
.rate_sum dd+dt{ padding-left:5px; border-left: 1px solid #ddd;} */
.rate_sum{ display:flex; border-radius:3px; border:1px solid var(--main-bd-color); background:#f7f7f7;}
.rate_sum dt, .rate_sum dd{ height:28px; padding:6px 10px; }
.rate_sum dd{ padding-left:0; font-weight: 700; color: var(--header);}
.rate_sum dd+dt{ padding-left:10px;border-left: 1px solid #ddd;}

/* 통계분석-상단 */
.section_stat_summary{overflow:hidden; margin:-10px -5px;}
.section_stat_summary [class^=col-xs-]{ padding-left:5px; padding-right: 5px; }
.section_stat_summary .section{ height:120px; padding:10px 20px;}
.section_stat_summary .chart_area{ height:80px;}
.section_stat_summary .num{ display: flex; align-items: center; justify-content: center; height: 80%; font-size: 32px; font-family: Montserrat; font-weight: 700;}
.section_stat_summary .num span{ margin-top:10px; font-size:13px; font-family:'NotoSansKr'; font-weight: 700;}

/* 통계분석-차트 */
.section_stat_chart .nav{ margin:20px;}
.section_stat_chart .chart_area{ height: 200px; padding:0 10px;}

/* 통계관리-탭버튼 */
.nav-underline+.tab-content .section_stat_tb{ border-radius:0 0 5px 5px; border-top:0 none;}

/* 통계분석-테이블 */
.section_stat_tb table.tb{ width:calc(100% + 2px); margin-left:-1px;}
.section_stat_tb table.tb th,
.section_stat_tb table.tb td{ height:24px; padding:0 10px; font-weight: 500; text-align: center; border:1px solid var(--main-bd-color);}
.section_stat_tb table.tb th{ background: #fafafa;}
.section_stat_tb table.tb td,
.section_stat_tb table.tb .tr_total th:not(:first-child){ text-align: right;}

/* 회원관리 */
.customad_chlist ul li{float:left; width:50%; display: flex; align-items: center; gap:3px; margin-top: 5px;}
.customad_chlist ul li .company_name{ display: inline-block; width:150px; height:24px; padding:3px 5px; border-radius:3px; background:#999; font-size: 12px; color:#fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.op_comp_tooltip{ display: inline-block; overflow: hidden; width:70%; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle;}
.op_comp_tooltip+.popover>.popover-title{ padding:5px 10px; font-size:12px; font-weight: 700;}
.op_comp_tooltip+.popover>.popover-content{ overflow: hidden; max-height:178px; padding:5px 10px; font-size:12px;}
.op_comp_tooltip+.popover>.popover-content li:before{ content:'-'; display: inline-block; clear:both; margin-right:3px;}

/* 설정관리 */
.section_setting{ overflow:hidden;}
.section_setting:first-of-type{ margin-top: 0;}
.section_setting .tit{ display: flex; align-items: center; gap:10px; padding:10px 20px;}
.section_setting .tb_wrt th,
.section_setting .tb_wrt td{ padding:0 20px;}
.section_setting .tb_wrt,
.section_setting .tb_wrt tr:last-of-type th,
.section_setting .tb_wrt tr:last-of-type td{ border-bottom: 0 none;}
.section_setting .tb_wrt th{ width:200px;}

/* 등록폼 */
.section_form{ overflow:hidden;}
.section_form:first-of-type{ margin-top: 0;}
.section_form .tit{ display: flex; align-items: center; gap:10px; padding:10px 20px;}
.section_form .tb_wrt .btn_area{ margin-top:0;}
.section_form .tb_wrt th,
.section_form .tb_wrt td{ padding:5px 20px;}
.section_form .tb_wrt,
.section_form .tb_wrt tr:last-of-type th,
.section_form .tb_wrt tr:last-of-type td,
.section_form .tb_wrt2,
.section_form .tb_wrt2 tr:last-of-type th,
.section_form .tb_wrt2 tr:last-of-type td{ border-bottom: 0 none;}
.section_form .tb_wrt th{ width:200px;}

/* 주차요금모달화면 */
.section_pane{ display: flex; gap:10px;}
.section_pane [class*="section"]{ width: calc(50% - 5px); padding:0 10px 10px; border:5px solid #ddd;  }
.section_pane .section_fee_info{ width:570px; flex-shrink:0; }
.section_pane .section_pkg_history{ overflow:auto; flex:1;}
.section_pane .section_fee_info .payment td:first-of-type{ font-size:16px; font-weight: 800; color:blue;}
.section_pane .section_fee_info .payment th:first-of-type{ color:blue;}
/* .section_pane .section_fee_info .payment td:last-of-type{ text-align: right;} */
.section_fee .base_fee_opt{display: inline-flex; gap:5px; align-items: center; margin-left: 150px; line-height: 24px;}
.section_pane .section_pkg_history .tb_action{ padding:7px 0 8px 0;}
.section_pane .section_pkg_history .tb_lst th,
.section_pane .section_pkg_history .tb_lst td { height: 33px;}
.section_pkg_info{ width:530px; min-width:600px; flex-shrink:0;}
.section_fee_info .tb_view .datepicker_day{ width:77px; padding:0; text-align: center;}
.section_fee_info .tb_view .datepicker_time{ width:42px !important; padding:0;}

/* 요금설정-1회권,정기권 */
/* .ticket_info{ display: flex; flex-wrap: wrap; gap:5px;} */
.ticket_info{ display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 5px;}
.ticket_info dl{ display: inline-block; min-width:170px; border:1px solid #ddd; border-radius:3px; text-align: center;}
.ticket_info dt{ float: left; display: flex; align-items: center; justify-content: center; min-width: 70px; height: 100%;  background-color: #ddd; padding:2px 5px; margin-bottom: 2px;}
.ticket_info dd:first-of-type{ padding:5px 0 0 0;}
.ticket_info dd:nth-of-type(2),
.ticket_info dd:nth-of-type(3){ padding:0 0 2px 0; font-weight: normal; color:#888;}
.ticket_info dd:nth-of-type(3){ font-size: 12px; margin-top:-5px;}
.time_select, .period_select{ margin-right:5px;}
/* 정기권이용유의사항-기본문구 */
.season-pass__notice li { padding-left: 8px; text-indent: -8px;}


/* 가상계좌생성.문자발송 */
.lst_dl { margin:0 20px;}
.lst_dl dt,
.lst_dl dd{ padding:4px 0; min-height: 34px; line-height: 21px;}
.lst_dl dt{ font-weight: bold;}

/* 주차사진 */
.img_parking.img_xs{ width:50px; height:30px;}
.img_parking img{ width:100%; height:100%;}
.parking_img_wrap{ display: flex; justify-content: center;}

/* 미납관리 */
.car_number, .memo_area{ display: flex; align-items: center; justify-content: space-between; margin-right:10px;}
.car_number .btn-memo, .memo_area .btn-memo{ width:24px; height:24px; font-size:0;}
.car_number .btn-memo span, .memo_area .btn-memo span{ display: block; width:16px; height:16px; background:url(../images/ico_memo.svg) no-repeat 0 -2px ; background-size: 100%;}
.car_number .btn-memo:hover span, .memo_area .btn-memo:hover span{ filter: brightness(0) saturate(100%) invert(0%) sepia(74%) saturate(2611%) hue-rotate(3deg) brightness(92%) contrast(106%);}

/* 보고서 */
.report_period{ display: inline-flex; align-items: center; gap:5px; margin-left:10px; padding:0 7px; background:#f7f7f7; border:1px solid #ddd; border-radius:3px;}
.report_period select{ background:none; border:0 none !important;}
.group_report .tb_action{ margin:15px 0;}
.group_report .tb_action .tit{ font-size:16px;}
.group_report .rate_up,
.group_report .rate_down{ display: inline-flex; gap:3px;}
.group_report + .group_report,
.page_break + .group_report{ margin-top:30px;}
.group_report .report_tit{width:100%; padding: 30px 0; padding-bottom:20px; font-size:24px; font-weight: 600; line-height:30px; background-color: #fff; text-align: center; white-space: normal; word-break:keep-all; }

.group_report table.tb_lst2_v3 th,
.group_report table.tb_lst2_v3 td{ padding:3px;}
.group_report table.tb_lst2_v3 th{ font-size:12px;}
.group_report .rate_up,
.group_report .rate_up *{ color:#007bd0!important}
.group_report .rate_down,
.group_report .rate_down *{ color:#ef5357!important}
.group_report .rate_up span,
.group_report .rate_down span{ font-size:7px;}
.group_report .chart_area{ height: 300px;}
.highlight_combo{ border:2px solid red !important; background:rgba(255,0,0,.1) !important; font-weight: 600 !important;}
.highlight_border{ border:2px solid red !important; font-weight: 600 !important;}

/* 증빙할인관리 */
.label-proof{ width:50px;}
.label-ticket{ width:50px;}

/* 할인요금 */
.dl_disc_option { display: flex;}
.dl_disc_option dt,
.dl_disc_option dd{ line-height: 30px;}
.dl_disc_option dt{ width:90px; font-weight: bold;}

/* 증빙자료조회 모달창 */
.group_proof{ display: flex;}
.group_proof .lft{ width:60%; margin-right:20px;}
.group_proof .rgt{ width:40%}
.group_proof .img-responsive{ max-width:540px; max-height: 540px; margin:0 auto;}

/* 결제주차장관리 */
.linked_payment dt,
.linked_payment dd{display: flex; align-items: center; justify-content: space-between; gap:3px; height: 39px; padding:7px; border-bottom: 1px solid var(--main-bd-color); line-height: normal;}
.linked_payment dt{border-top:1px solid #999;background: #f7f7f7; font-weight: 700;}
.linked_payment dd{ text-align: center;}

/* 전체보기 모드를 위한 CSS */
.nav_header,
.header,
.sidebar,
.footer {transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;}
.content {transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative;}
.fullscreen-mode .nav_header,
.fullscreen-mode .header,
.fullscreen-mode .sidebar,
.fullscreen-mode .footer { opacity: 0; pointer-events: none; transform: translateY(-10px);}
.fullscreen-mode .nav_header { transform: translateY(-100%);}
.fullscreen-mode .sidebar {transform: translateX(-100%);}
.fullscreen-mode .footer {transform: translateY(100%);}
.fullscreen-mode .content {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 9999; background: #fff; overflow: auto; padding: 20px; margin: 0; box-shadow: 0 0 50px rgba(0,0,0,0.1);}
.fullscreen-mode { overflow: hidden;}
.fullscreen-mode h2{ display: none;}

/* 주차장등록-설정 */
.group_device_form li{ display: flex; align-items: center; gap:5px; padding-top:5px;}
.group_device_form li .frm_tit{ width:70px; flex-shrink:0}

/* 입출차사진보기 */
.vehicle-photos-body { overflow-x:hidden; }
.vehicle-photos-body .row { display:flex; align-items:stretch; height:520px; margin:0; }
.vehicle-photos-body .row > [class*="col-"],
.vehicle-photos-body .col-xs-2,
.vehicle-photos-body .col-xs-10 { padding-left:0; padding-right:0; }
.vehicle-photos-body .col-xs-2 { width:100px; flex:0 0 100px; }
.vehicle-photos-body .col-xs-10 { width:auto; flex:1; }

.vehicle-photos-body .photo_gallery,
.vehicle-photos-body .gallery_thumbs { height:100%; }

.vehicle-photos-body .gallery_main { position:relative; display:flex; align-items:center; justify-content:center; height:100%; border:1px solid #ddd; background:#000; text-align:center; overflow:hidden; }
.vehicle-photos-body .gallery_main img { display:block; width:100%; height:100%; margin:0 auto; object-fit:contain; }
#entry_photo_lens, #exit_photo_lens { display:none; position:absolute; width:300px; height:300px; border-radius:50%; border:2px solid rgba(255,255,255,0.7); background-repeat:no-repeat; pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,0.3), inset 0 0 20px rgba(0,0,0,0.1); transform:translate(-50%,-50%); z-index:10; }

.vehicle-photos-body .gallery_thumbs { display:flex; flex-direction:column; padding-left:15px; }
.vehicle-photos-body .gallery_thumbs .list-unstyled { display:flex; flex:1; flex-direction:column; gap:5px; margin:0; overflow-y:auto;}
.vehicle-photos-body .gallery_thumbs .thumb-upload-fixed { display:flex; flex-shrink:0; padding-top:5px; }

.vehicle-photos-body .gallery_thumbs .thumb-item { position:relative; width:70px; cursor:pointer; }
.vehicle-photos-body .gallery_thumbs .thumb-item img { display:block; width:70px; height:70px; border:3px solid #ddd; object-fit:cover; }
.vehicle-photos-body .gallery_thumbs .thumb-item.active img { border:3px dashed var(--primary); }
.vehicle-photos-body .gallery_thumbs .thumb-item.pinned img { border-color:var(--primary); }

.vehicle-photos-body .gallery_thumbs .thumb-actions { position:absolute; top:5px; right:5px; left:5px; z-index:2; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.vehicle-photos-body .gallery_thumbs .thumb-icon-btn { display:flex; align-items:center; justify-content:center; width:18px; height:18px; padding:0; border:0; border-radius:50%; background:rgba(17, 24, 39, 0.72); color:#fff; opacity:0; pointer-events:auto; transition:opacity .2s ease, background-color .2s ease, color .2s ease; }
.vehicle-photos-body .gallery_thumbs .thumb-pin-btn { width:auto; gap:1px; padding:0 5px 0 2px; border-radius:20px; font-size:10px; white-space:nowrap; }
.vehicle-photos-body .gallery_thumbs .thumb-icon-btn i { font-size:12px; }
.vehicle-photos-body .gallery_thumbs .thumb-item:hover .thumb-icon-btn { opacity:1; }
.vehicle-photos-body .gallery_thumbs .thumb-item.pinned .thumb-pin-btn { background:var(--primary); color:#fff; opacity:1; }
.vehicle-photos-body .gallery_thumbs .thumb-delete-btn:hover { background:var(--err); }
.vehicle-photos-body .gallery_thumbs .thumb-pin-btn:hover { background:var(--primary); }

.vehicle-photos-body .gallery_thumbs .thumb-upload-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; width:70px; height:70px; margin:0; border:1px dashed #b8c2cc; background:#f7f9fc; color:#4a5568; font-size:11px; font-weight:600; line-height:1.2; cursor:pointer; }
.vehicle-photos-body .gallery_thumbs .thumb-upload-btn:hover { background:#e2e8f0; }
.vehicle-photos-body .gallery_thumbs .thumb-upload-plus { display:block; margin-bottom:4px; font-size:20px; line-height:1; }
.vehicle-photos-body .gallery_thumbs .thumb-upload-text { display:block; }

.vehicle-photos-body .section_info { margin-top:20px; }
.vehicle-photos-body .section_info .wrt_tb1 { width:100%; }
.vehicle-photos-body .section_info input[type="text"] { width:180px; }
.ico_thumb_star:before { background-position: -125px -125px; }
.ico_thumb_del:before { background-position: -155px -125px; }

/* QR관리 */
.qr_wrap {display:flex; gap:10px; margin-top:-10px;}
.qr_wrap [class*="col-xs-"] { padding:0; min-width:0;}
.qr_wrap .col-xs-4 .section{ overflow:hidden; position:sticky; top:66px;}

.qr_wrap .tb_lst tr.on > td { background: var(--rgba-primary-1); }
.qr_view_group .tb_action {  margin:14px 20px 15px; }
.qr_view_group .qr_view_detail{ border-top: 1px solid #ddd;}
.qr_view_group .qr_view_nodata {display:flex; min-height:179px; align-items:center; justify-content:center; background:#f7f7f7; }
.qr_view_group .qr_code_box {display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 0; border-bottom:1px solid var(--main-bd-color); background:#f7f7f7;}
.qr_view_group .qr_code_box .qr_tit{ display:flex; flex-direction: column; align-items: center;}
.qr_view_group .qr_code_box .view_company{ font-size: 13px; font-weight: 500;}
.qr_view_group .qr_code_box .view_parking{ font-size: 16px; font-weight: 800;}
.qr_view_group .qr_code_box .view_status .label{ margin-top:5px; height:23px; padding:0 10px; line-height:23px; font-size:14px; border-radius:20px;}
.qr_view_group .qr_code_box .qr_code_img {overflow:hidden; width:196px; height:196px; border:1px solid var(--main-bd-color); border-radius:10px; display:flex; align-items:center; justify-content:center; background:#fff;}
.qr_view_group .qr_code_box .qr_code_img img {max-width:100%; max-height:100%;}
.qr_view_group .qr_code_box .btn-black .ico14:before { filter: brightness(0) invert(1); }
.qr_view_group .qr_code_box .qr_code_btns {display:flex; gap:8px;}

.qr_view_group .qr_code_info{ padding: 20px;}
.qr_view_group .qr_code_info dt:first-of-type{ margin-top:0;}
.qr_view_group .qr_code_info dt{ margin-top:10px; font-size:12px; color:#999;}
.qr_view_group .qr_code_info dd{ font-size:14px;}
.qr_view_group .qr_code_info .view_link{ display:flex; align-items:center; gap:6px;}
.qr_view_group .qr_code_info .view_link .link_text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.qr_view_group .qr_code_info .btn_copy_link .fa{vertical-align:initial;}