/* **************************************** asset */
/* -------------------------------- visible */
.dis_flex {display: flex !important;}
.flex_wrap {flex-wrap: wrap !important;}

/* -------------------------------- width */
.half {min-width: 580px; width: 50%; max-width: 55%;}
.w30 {width: 30% !important;}
.w20 {width: 20% !important;}
.w100 {width: 100% !important;}
.w80 {width: 80px;}

/* -------------------------------- margin/padding */
.mt4 {margin-top: 4px;}
.mt8 {margin-top: 8px;}
.mt16 {margin-top: 16px;}
.mt40 {margin-top: 40px;}
.mb4 {margin-bottom: 4px;}

.info_list_wrap {padding: 24px 16px;}

/* -------------------------------- font */
.text_500 {font-weight: 600 !important;}
.text_600 {font-weight: 700;}
.text_b {color: #3582F7;}
.text_g {color: #768396;}
.text_r {color: #FA5830 !important;}
.text_black {color: #000;}

h3.section_title {display: flex; padding: 22px 0; justify-content: space-between; align-items: center;}
h3.section_title.under {border-bottom: 1px solid #e3e3e3;}

h3.section_title,
.section_title .title_label {color: #000; font-size: 24px; line-height: 36px; font-weight: 700;}

.section_title .title_info,
.section_title .title_info b,
.section_title .title_info span {font-size: 16px; line-height: 27px;}
.section_title .title_info span {margin: 0 4px;}
.section_title .title_label {}
.section_title .title_label .state_label {margin-right: 8px; vertical-align: middle;}
.section_title .select_box {min-width: 172px; width: 25%; max-width: 240px;}

.tit_wrap .update {margin-bottom: 24px; font-weight: 500;}
.tit_wrap .update span {margin-left: 8px; font-weight: 400;}

/* -------------------------------- label */
.state_label {padding: 5px 12px; border-radius: 8px; font-size: 14px; line-height: 21px; font-weight: 600; text-align: center;}
.state_label.red {background: #FFF4F2; color: #FA5830;}
.state_label.green {background: #E7FBF4; color: #33cc99;}
.state_label.gray {background: #F7F8FB; color: #768396;}

/* -------------------------------- btn */
button:disabled {background: #F0F0F0; color: #AAAAAA; cursor:not-allowed}

.btn_wrap {padding: 24px 0;}
section + .btn_wrap {margin-top: 40px;}
.btn_wrap .btn_medium {width: 20%;}
.btn_medium {overflow: hidden; min-width: 80px; border-radius: 4px; vertical-align: top;}
.btn_medium button {width: 100%; height: 100%;  padding: 12px 16px; font-size: 16px; line-height: 24px; font-weight: 600;}
.btn_medium.blue button {background: #3582f7; color: #fff;}
.btn_medium.black button {background: #333; color: #fff; }
.btn_medium.text_gray {background: #F0F0F0;}
.btn_medium.text_gray button {color: #AAAAAA;}


.btn_xs {border: 1px solid #e3e3e3; border-radius: 4px; color: #000; font-size: 14px; line-height: 21px;}
.btn_xs button {width: 100%; height: 100%; padding: 5px 12px; color: #000; font-size: 14px; line-height: 21px;}

.btn_xs.white_b {background: #fff; border-color: #777; border-radius: 8px;}

.btn_xs.bg_b {border-radius: 4px; background: #333;}
.btn_xs.bg_b:hover {background: #000;}
.btn_xs.bg_b:active {background: #777777;}
.btn_xs.bg_b button {color: #fff;}
.btn_xs.bg_b.ico_next button {padding: 7px 36px 7px 16px; background: url(../img/icon/arrow_b_w.png) no-repeat right 12px center; background-size: 24px;}

.btn_tooltip {width: 24px; height: 24px; background: url(../img/icon/tooltip.png) no-repeat center center; background-size: 24px; vertical-align: middle;}

.btn_toggle label {position: relative; display:inline-block;}
.btn_toggle input[type="checkbox"] {position: relative; display: inline-block; width: 56px; height: 32px; border-radius: 50px; background: #E3E3E3; transition: all 0.3s; vertical-align: middle; content:'';}
.btn_toggle input::after {position:absolute; top: 4px; left: 4px; width: 24px; height: 24px; background: #fff; border-radius: 100%; transition: all 0.3s; content:'';}
.btn_toggle input[type="checkbox"]:focus,
.btn_toggle input[type="checkbox"]:focus-visible {outline: none;}
.btn_toggle input[type="checkbox"]:checked {background: #3582F7;}
.btn_toggle input[type="checkbox"]:checked:disabled {background: #768396;}
.btn_toggle input[type="checkbox"]:checked::after {transform: translateX(24px);}
.btn_toggle input[type="checkbox"]:checked + .toggle_cont {display: block;}

.toggle_cont {display: none;}
.toggle_cont.show {display: block;}

.btn_delete,
.btn_add {margin-top: 40px; text-align: center;}

.btn_delete button,
.btn_add button {display: inline-block; width: auto; padding: 12px 108px 12px 130px; border: 1px solid #eaeaea; border-radius: 4px; color: #555; font-size: 16px; line-height: 24px; font-weight: 500;}

.btn_add button i,
.btn_delete button i {display: inline-block; width: 24px; height: 24px; margin-left: -24px; background: url(../img/icon/add.png) no-repeat center -2px; background-size: contain; vertical-align: middle;}

.btn_delete button i {background-image: url(../img/icon/trash.png);}

.btn_text.red button {color: #FA5830;}
.btn_text.blue {color: #3582F7; font-size: 14px; line-height: 21px; text-decoration: underline;}

/* -------------------------------- label */
.btn_xs_label {padding: 5px 12px; border: 1px solid #777; border-radius: 8px; background: #fff; color: #000; font-size: 14px; line-height: 21px; font-weight: 500;}
.btn_xs_label a {display: inline-block; font-size: inherit; line-height: inherit; font-weight: inherit;}
.btn_xs_label.ico_close a {padding: 2px;}

/* -------------------------------- label/btn icon */
.btn_ico {display: inline-block; width: 20px; height: 20px; vertical-align: middle;}
.btn_ico button {background: no-repeat center center; background-size: 20px;}
.btn_xs.ico_add button {padding: 6px 12px 6px 32px; background: url(../img/icon/add.png) no-repeat left 8px center; background-size: 24px;}

.btn_xs.ico_refresh button,
.btn_xs.ico_download button {padding-left: 32px; background: url(../img/icon/download.png) no-repeat left 8px center; background-size: 24px;}

.btn_ico.ico_refresh button,
.btn_xs.ico_refresh button {background-image: url(../img/icon/ico_refresh.png);}

.btn_xs.ico_close,
.btn_xs_label.ico_close {position: relative; padding: 4px 9px 4px 12px; line-height: 24px;}

.btn_xs.ico_close button,
.btn_xs_label.ico_close button {display: inline-block; width: 24px; height: 24px; background: url(../img/icon/close_g.png) no-repeat center; background-size: 24px; vertical-align: top;}

.btn_xs.bg_red,
.btn_xs_label.bg_red {background: #FFF4F2; color: #FA5830;}

.btn_xs.bg_green,
.btn_xs_label.bg_green {background: #E7FBF4; color: #33CC99;}

.btn_xs.bg_gray,
.btn_xs_label.bg_gray {background: #F7F8FB; color: #768396;}

.btn_medium.text_gray {background: #F0F0F0;}
.btn_medium.text_gray button {color: #AAAAAA;}

.btn_medium button:disabled {background: #F0F0F0; color: #AAAAAA;}

.ico_close.bg_red button {background-image: url(../img/icon/close_red.png);}
.ico_close.bg_green button {background-image: url(../img/icon/close_green.png);}

.ico_trash {display: inline-block; width: 21px; height: 21px; background: url(../img/icon/trash_red.png) no-repeat center center; background-size: 21px; vertical-align: top;}
.ico_network,
.ico_battery {display: inline-block; width: 16px; height: 16px; background: no-repeat center center; background-size: 16px; vertical-align: top;}
.ico_battery.charge {background-image: url(../img/icon/battery_charge.png);}
.ico_battery.full {background-image: url(../img/icon/battery_full.png);}
.ico_battery.middle {background-image: url(../img/icon/battery_half.png);}
.ico_battery.low {background-image: url(../img/icon/battery_low.png);}
.ico_network.weak {background-image: url(../img/icon/signal.png);}
.ico_network.normal {background-image: url(../img/icon/signal1.png);}
.ico_network.strong {background-image: url(../img/icon/signal2.png);}

.btn_xs_label.ico_close {border: 0; font-weight: 500;}

.ico {display: inline-block; width: 24px; height: 24px; margin-right: 16px; background: no-repeat center center; background-size: 24px; vertical-align: top;}
.ico_check {background-image: url(../img/icon/check_b.png);}

/* -------------------------------- input */
.tooltip_wrap {position: relative;}
.tooltip_wrap .tooltip_cont {display: none; position: absolute; top: 0; left: 50%; padding: 16px; background: #333; border-radius: 8px; color: #f7f8fb; font-size: 12px; line-height: 18px; font-weight: 300; z-index: 200; transform: translate(-50%, 40%); word-break: keep-all;}
.tooltip_wrap .tooltip_cont.on {display: inline-block;}
.tooltip_wrap .tooltip_cont::before {position: absolute; width: 0; height: 0; top: -8px; left: 50%; border: 20px solid transparent; border-top-width: 0; border-bottom-color: #333; content:''; transform: translateX(-50%); z-index: -1;}

/* -------------------------------- input */
/* datepicker */
.datepicker {position: relative; border: 1px solid #eaeaea; border-radius: 4px;}
.datepicker input {padding-right: 32px; background: #fff url(../img/icon/calendar.png) no-repeat right 8px center; background-size: 24px;}

.datepicker_wrap {display: inline-flex;}
.datepicker_wrap .datepicker {min-width: 162px; width: 30%;}
.datepicker_wrap .datepicker:last-child {margin-right: 0;}
.datepicker_wrap span:not(.datepicker){line-height: 48px; margin: 0 4px;}

/* input */
.input_text {border: 1px solid #eaeaea; border-radius: 4px;}
.input_text > input {display: block; width: 100%; padding: 13px; font-size: 16px; line-height: 24px;}

/* select_box */
.select_box {position: relative;}
.select_box button {padding: 11px 16px; color: #333; font-size: 16px; line-height: 24px; text-align: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.select_box > button {position: relative; padding-right: 40px; border: 1px solid #e3e3e3; background: #fff; border-radius: 4px;}
.select_box > button:after {position: absolute; display: block; top: 0; right:  0; width: 40px; height: 48px; background: url(../img/icon/arrow_bottom.png) no-repeat right 8px center; background-size: 24px; content:'';}

.select_box > ul {display: none; position: absolute; width: 100%; border-top: 0; border-radius: 0 0 4px 4px; background:#fff; z-index: 20;}
.select_box > ul li:hover {background-color: #f0f0f0;}
.select_box.open > ul {display: block; border: 1px solid #e3e3e3; border-top: 0;}
.select_box.open > button {border-bottom: 1px solid #fff; border-radius: 4px 4px 0 0;}
.select_box.open > button:after {transform: rotate(180deg);}

.input_wrap {display: flex; align-items: center; flex: 1;}
.input_wrap > * {width: 100%; margin-right: 8px;}
.input_wrap > *:last-child {margin-right: 0;}
.input_wrap > .btn_medium {width: auto;}

.input_wrap.dual {flex-direction: column;}
.input_wrap.dual > * + * {margin-top: 16px;}
.input_wrap.dual > .input_wrap + .input_wrap {margin-right: 0;}

.input_wrap.btn_set .input_text {flex: 1;}

.title + .input_wrap {display: inline-flex;}


/* only input */
.input_wrap .select_box.w100,
.input_wrap .input_text.w100 {max-width: none; margin-right: 0;}

/* input + button */
.input_wrap > .btn_xs.bg_b {width: 80px; margin-left: 8px;}
.input_wrap > .btn_xs.bg_b button {width: 100%; height: 100%;}

/* input bottom text */
.input_bottom_txt .bottom_text {display: block; width: 100%; margin-top: 4px; padding: 0 8px; color: #aaa; font-size: 14px; line-height: 22px;}

/* input 고정 텍스트 */
.input_fix {position: relative;}
.input_fix .fix_txt {position: absolute; top: 12px; right: 12px; color: #aaa; font-size: 16px; line-height: 24px;}

/* checkbox */
.checkbox_area {display: inline-block; padding: 12px 0; font-size: 0; line-height: 48px; vertical-align: top;}
.search_wrap + .checkbox_area {display: block; margin-left: 105px;}
.checkbox_area .checkbox {display: inline-block;}
.checkbox_area .checkbox + .checkbox {margin-left: 10px;}
.checkbox {font-size: 0;}
.checkbox input[type="checkbox"] {display: none;}
.checkbox input[type="checkbox"] + label {font-size: 0; cursor: pointer;}
.checkbox input[type="checkbox"] + label:before {display: inline-block; width: 24px; height: 24px; background: url(../img/icon/checkbox_w.png) no-repeat center center; background-size: 20px; vertical-align: top; content:'';}
.checkbox input[type="checkbox"]:checked + label:before {background-image: url(../img/icon/checkbox_b.png); content:'';}
.checkbox input[type="checkbox"] + label > span {margin-left: 4px; font-size: 16px; line-height: 24px; vertical-align: top;}
.checkbox input[type="checkbox"]:checked + label > span {color: #3582F7; font-weight: 600;}

/* -------------------------------- search */
.search_area {padding: 12px 24px; background: #F7F8FB; border: 1px solid #EEEEEE; border-radius: 8px;}
.search_area > .btn_medium {display: none;}

.search_area .title {min-width: 70px; width: 10%; padding: 12px 5px; margin-right: 8px; color: #768396; font-size: 16px; line-height: 24px; font-weight: 500;}
.search_area .title + .input_wrap {width: 85%; max-width: calc(100% - 72px);}

.search_area .search_wrap {display: flex; padding: 12px 0;}

.search_area .input_wrap .select_box {width: 25%; min-width: 172px;}
.search_area .input_wrap .input_text {width: 40%; min-width: 172px; flex:1;}

.comment_area {padding: 40px; background: #F7F8FB; border: 1px solid #EEEEEE; border-radius: 8px;}

/* -------------------------------- table */
.table_wrap {overflow: auto; width: 100%;}

/* table info text */
.table_info {display: flex; width: 100%; padding: 28px 0; justify-content: space-between; align-items: center;}
.table_info .info_text {font-size: 18px; line-height: 36px;}
.table_info .info_text span {font-size: 18px; line-height: 36px;}
.table_info .btn_area {font-size: 0;}
.table_info .btn_area .btn_xs + .btn_xs {margin-left: 8px;}

/* table info select */
.table_info.select {padding: 16px 0; text-align: right;}
.table_info.select .select_box {display: inline-block; width: 192px;}

.search_area + .table_area {margin-top: 40px;}
.table_area table {min-width: 1280px;}
.table_area table thead {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
/* .table_area table thead tr {width: 100%; padding: 16px;} */
.table_area table thead th {padding: 28px 0; background-color: #F7F8FB; color: #777; font-size: 16px; line-height: 24px; font-weight: 500; text-align: center;}
.table_area table tbody td {padding: 24px 0; border-bottom: 1px solid #eaeaea; color: #333; font-size: 14px; line-height: 21px; text-align: center;}
.table_area table tbody td span {color: inherit; font-size: inherit; line-height: inherit;}
.table_area table tbody td button {font-size: inherit; line-height: inherit;}
.table_area table tbody td .empty {padding: 4px; text-align: center;}
.table_area table tbody td.empty_text {padding: 20px; color: #aaa; font-size: 16px; line-height: 24px;}
.table_area.full .table_info {min-width: auto;}
.table_area.full table {min-width: auto; width: 100%;}

/* sort */
.btn_sort {display: inline-block; margin-left: 3px; vertical-align: middle;}
.btn_sort span {display: block; padding: 1px 3px;}
.btn_sort button {width: 10px; height: 5px; background: center center no-repeat; background-size: contain;}
.btn_sort span.up button {background-image: url(../img/icon/table_off.png);}
.btn_sort span.up.on button {background-image: url(../img/icon/table_on.png); transform: scaleY(-1);}
.btn_sort span.down button {background-image: url(../img/icon/table_off.png); transform: scaleY(-1);}
.btn_sort span.down.on button {background-image: url(../img/icon/table_on.png); transform: rotate(0deg);}
.btn_sort.btn_filter {width: 24px; height: 24px; vertical-align: top;}
.btn_sort.btn_filter button {width: 100%; height: 100%;}
.btn_sort.btn_filter.on button {background-image: url(../img/icon/filter.png);}
.btn_sort.btn_filter.off button {background-image: url(../img/icon/filter_off.png);}

/* -------------------------------- table sizng */
.table_area table tbody td.pd_24 {padding: 24px;}
.table_area table tbody td .dis_b {display: block;}

.table_area.pd_16 table thead th {padding: 16px 0;}

/* -------------------------------- pagination */
.pagination {margin-top: 40px; font-size: 0; text-align: center;}
.pagination span {width: 32px; margin-right: 4px; vertical-align: middle;}
.pagination span button {display: block; padding: 4px 0; border-radius: 6px; color: #aaa; font-size: 16px; line-height: 24px; text-align: center;}
.pagination span.on button,
.pagination span.on:hover button,
.pagination span button:active {background-color: #000; color: #fff;}
.pagination span:hover button {background: #F0F0F0; color: #333;}

.pagination span.ico {background: no-repeat center center; background-size: 24px;}
.pagination span.ico button {font-size: 0;}
.pagination span.ico:hover button,
.pagination span.ico.on button {background-color: transparent;}

.pagination span.first {background-image: url(../img/icon/arrow_double.png);}
.pagination span.prev {background-image: url(../img/icon/arrow_left.png);}
.pagination span.next {margin-right: 0; background-image: url(../img/icon/arrow_left.png); transform: rotate(180deg);}
.pagination span.last {background-image: url(../img/icon/arrow_double.png); transform: rotate(180deg);}

.pagination span.first.on,
.pagination span.first:hover {background-image: url(../img/icon/arrow_double_b.png)}
.pagination span.prev.on,
.pagination span.prev:hover {background-image: url(../img/icon/arrow_left_b.png)}
.pagination span.next.on,
.pagination span.next:hover {margin-right: 0; background-image: url(../img/icon/arrow_left_b.png);}
.pagination span.last.on,
.pagination span.last:hover {background-image: url(../img/icon/arrow_double_b.png);}

/* -------------------------------- info */
.info_area {font-size: 0;}
.info_area.empty {padding: 16px 24px; border: 1px solid #e3e3e3; border-radius: 8px;}
.info_area.empty i {display: block; padding-left: 32px; background: url(../img/icon/location_info.png) no-repeat left center; background-size: 24px; color: #aaa; font-size: 16px; line-height: 24px; font-style: normal;}
.info_area span {margin-right: 4px; margin-bottom: 4px;}

/* -------------------------------- modal */
.modal {display: none;}
.modal:before {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.1); z-index: 500; content:'';}
.modal.open {display: block;}
.modal.bg_blur:before {background: none; z-index: auto;}
.modal_box {position: absolute; width: 560px; top: 50%; left: 50%; padding: 40px; background-color: #fff; border-radius: 16px; box-shadow: 0 0 25px rgb(0 0 0 / 8%);transform: translate(-50%, -50%); z-index: 600;}
.modal_box .modal_tit {margin-bottom: 24px; color: #000; font-size: 20px; line-height: 30px; font-weight: 500;}
.modal_box .modal_tit .close {position: absolute; top: 0; right: 0; display: block; width: 104px; height: 104px; background: url(../img/icon/close.png) no-repeat center center; background-size: 24px;}
.modal_box .modal_tit span,
.modal_box .info_box .cont span {display: block; color: #777; font-size: 14px; line-height: 21px; font-weight: 600;}

.modal_box .info_box {display: flex; padding: 16px; border: 1px solid #eee; border-radius: 8px;}
.modal_box .table_area {margin-top: 24px;}
.modal_box .table_area table {min-width: auto;}
.modal_box .info_box .cont {color: #000; font-size: 14px; line-height: 21px; font-weight: 600; text-align: center;}
.modal_box .info_box .cont.double {position: relative; width: 50%;}
.modal_box .info_box .cont.double:first-child:after {display: block; width: 1px; position: absolute; top: 0; right: 0; bottom: 0; background: #eaeaea; content:'';}
.modal_box .table_area table thead th {padding: 17px; font-size: 14px; line-height: 21px;}
.modal_box .table_area table tbody td {padding: 16px 0;}
.modal_box .table_area table tbody td .empty {font-size: 14px; line-height: 21px;}

.modal_box .password_form .input_text {margin-top: 16px;}
.modal_box .password_form .btn_medium.blue {margin-top: 40px;}
.modal_box .number_list {margin-top: 40px;}
.modal_box .number_list li {padding: 8px; font-size: 14px; line-height: 21px;}
.modal_box .number_list li span {min-width: 120px; margin-right: 16px; color: #777; font-size: inherit; line-height: inherit;}
.add_num .modal_box .table_wrap {max-height: 350px;}

.modal_box .btn_area {margin-top: 40px;}
.modal_box .btn_area span {width: 100%;}
.modal_box .text_wrap {margin-bottom: 40px;}
.modal_box .text_wrap p {padding: 8px 0;}

.loading .ico_spinner {display: block; width: 100px; height: 100px; margin: 0 auto; animation: turn 1.2s infinite;}
@keyframes turn {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.loading p {font-size: 14px; line-height: 21px; padding: 8px; text-align: center;}

/* -------------------------------- progressbar */
.progressbar ul {position: relative; display: flex; justify-content: space-between;}
.progressbar ul li {position: relative; width: 25%; padding-top: 30px;}

/* line */
.progressbar ul:before {position: absolute; top: 4.5px; left: 0; right: 0; height: 2px; background-color: #DDDDDD; content:'';}

/* marker */
.progressbar ul::after,
.progressbar li:after {position: absolute; top: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; background-color: #768396; content:'';}
.progressbar ul::after {left: 0; right: auto;}

/* progress on */
.progressbar li.on:before {position: absolute; top: 4.5px; left: 0; right: 0; height: 2px; content:'';}
.progressbar .start:after,
.progressbar li.on:before,
.progressbar li.on:after {background-color: #3582f7;}
.progressbar li.on strong {color: #3582f7; }

/* text */
.progressbar li strong {display: block; margin-bottom: 8px; color: #768396; font-size: 20px; line-height: 30px; font-weight: 600;}
.progressbar li p {font-size: 14px; line-height: 21px;}
.progressbar li p span {color: #ddd;}

/* datepicker */
.daterangepicker {position: absolute; display: none; width: 256px; padding: 24px 16px; margin-top: 7px; background-color: #fff; border-radius: 4px; font-size: 15px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.08); z-index: 3001;}

.daterangepicker .calendar-table table {width: 100%; margin: 0; border-spacing: 0; border-collapse: collapse;}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td {width: 32px; height: 32px; font-size: 12px; line-height: 18px; font-weight: 500; text-align: center; white-space: nowrap;}
.daterangepicker .calendar-table td {cursor: pointer;}
.daterangepicker .calendar-table th.prev span,
.daterangepicker .calendar-table th.next span {width: 100%; height: 100%; background: url(../img/icon/arrow_left_b.png) no-repeat center center; background-size: 24px;}
.daterangepicker .calendar-table th.next span {transform: rotate(-180deg);}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {background-color: #eee; border-radius: 50%; color: inherit;}

.daterangepicker td.off,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date,
.daterangepicker td.off.end-date,
.daterangepicker td.disabled,
.daterangepicker option.disabled {color: #aaa; text-decoration: line-through;}

.daterangepicker td.active,
.daterangepicker td.active:hover {background-color: #3582F7; border-radius: 50%; color: #fff;}

.daterangepicker th.month {width: auto; font-size: 16px; line-height: 24px; text-align: center;}
.daterangepicker th.month select {width: 50%; font-size: inherit; line-height: inherit; text-align: center;}
.daterangepicker th.month .monthselect {float: right;}
.daterangepicker th.month .yearselect {float: left;}

.daterangepicker td.disabled, .daterangepicker option.disabled {text-decoration: line-through;}

.daterangepicker .calendar-time {margin-top: 16px; text-align: center;}
.daterangepicker .calendar-time select {width: 25%; padding: 8px; padding-right: 12px; background-color: #F7F8FB; font-size: 12px; line-height: 18px; font-weight: 500;}

.daterangepicker .drp-buttons .applyBtn {margin-top: 16px; padding: 10px 16px; background: #3582F7; border-radius: 4px; color: #fff; font-size: 14px; line-height: 21px; font-weight: 600;}
.daterangepicker .drp-buttons .drp-selected,
.daterangepicker .drp-buttons .cancelBtn,
.daterangepicker .drp-buttons *.hide {display: none;}

.tab_area {font-size: 0;}
.tab_area span button {padding: 16px 24px; color: #aaa; font-size: 18px; line-height: 28px;}
.tab_area span.on button {border-bottom: 3px solid #3582F7; color: #3582f7; font-weight: 600;}

.tab_area.bg .tab {background: #F7F8FB; border-radius: 100px;}
.tab_area.bg .tab button {padding: 16px; border: 0; color: #333; font-size: 18px; line-height: 27px;}
.tab_area.bg .tab button i {padding-left: 4px; color: #3582F7; font-weight: 600;}

.tab_area.bg .tab.on {background: #3582F7;}
.tab_area.bg .tab.on button {color: #fff; font-weight: 400;}
.tab_area.bg .tab.on button i {color: #fff; }
.tab_area + .info_area.empty {margin-top: 40px;}

.tab_cont > div {display: none;}
.tab_cont > div.on {display: block;}

.section_title .tab_area span {border: 1px solid #eee; border-radius: 40px;}
.section_title .tab_area span + span {margin-left: 4px;}
.section_title .tab_area span button {padding: 8px 24px; color: #768396; font-size: 16px; line-height: 24px;}
.section_title .tab_area span.on {background: #3582f7;}
.section_title .tab_area span.on button {border-bottom: 0; color: #fff; font-weight: 500;}

/* graph_area */
.graph_area {border: 1px solid #e3e3e3; border-radius: 8px;}
.graph_area .tab_cont {margin-top: 32px;}
.graph_area .graph_wrap {padding: 32px;}
.graph_area .graph_wrap .graph_inner {height: 100%;}
.graph_area .graph_wrap .graph_inner .graph_report {width: 100%;}

.trading_temperature .table_info {min-width: auto;}
.trading_temperature .tab_area .tab {margin: 8px 0;}
.trading_temperature .tab_area .tab:not(:last-child) {margin-right: 16px;}

/* **************************************** layout */
.wrap {position: relative; min-height: 651px;}

header {position: fixed; top: 0; left: 0; right: 0; display: flex; padding: 36px 40px 36px 280px; border-bottom: 1px solid #eaeaea; background: #fff; justify-content: space-between; z-index: 500;}
header .menu_btn {display: none;}

header .title_area {z-index: 500;}
header .title_area .title {color: #000; font-size: 32px; line-height: 48px; font-weight: 500;}
header .title_area .title span {color: #768396; font-size: 18px; line-height: 48px;}

header .utill {display: flex; flex-flow: row;}
header .utill > li {width: 48px; height: 48px;}
header .utill > li > button {height: 100%; padding: 12px; background: no-repeat center center; background-size: 24px;}
header .utill .noti {margin-right: 8px;}
header .utill .noti > button {background-image: url(../img/icon/bell.png);}
header .utill .user > button {background-image: url(../img/icon/profile.png);}

header .modal {position: relative;}
header .modal.open {display: block; z-index: 1000;}
header .modal .modal_box {padding: 24px 16px 16px; top: 0; left: auto; right: 0;}
header .modal .modal_box .close {width: 60px; height: 76px; background-position: center center;}

header .utill .user .user_id {overflow: hidden; padding: 16px; background: #F7F8FB; border-radius: 8px; color: #768396; font-size: 16px; line-height: 32px; text-overflow: ellipsis; white-space: nowrap}
header .utill .user .user_id .ico_user {display: inline-block; width: 32px; height: 32px; margin-right: 8px; border-radius: 50%; background: #CDD4DD url(../img/icon/user.png) no-repeat center center; background-size: 24px; vertical-align: top;}
header .utill .user .user_btn_area {margin-top: 16px; font-size: 0;}
header .utill .user .user_btn_area span {display: block;}
header .utill .user .user_btn_area span + span {margin-top: 8px;}

header .modal .modal_box.user {max-width: 206px; right: 0; transform: none;}

/* 헤더 알림 팝업 */
header .modal .modal_box.notification li {position: relative; padding: 0 40px 16px 32px; margin-bottom: 16px; border-bottom: 1px solid #e3e3e3; font-size: 14px; line-height: 21px;}
header .modal .modal_box.notification li:last-child {margin-bottom: 0; border-bottom: 0;}
header .modal .modal_box.notification li:before,
header .modal .modal_box.notification .ico_trash{position: absolute; width: 24px; height: 24px; top: 0; background: no-repeat center center; background-size: 24px; content:'';}
header .modal .modal_box.notification li:before {background-image: url(../img/icon/alram_ring.png); left: 0;}
header .modal .modal_box.notification .ico_trash{width: 32px; height: 32px; right: 0; background-image: url(../img/icon/trash.png); background-position: 8px 0;}
header .modal .modal_box.notification .notice_date {font-size: 0;}
header .modal .modal_box.notification .notice_date span {color: #aaa; font-size: 12px; line-height: 18px;}
header .modal .modal_box.notification .notice_date span:after {color: #ddd; margin: 0 4px; content:'|'}
header .modal .modal_box.notification .notice_date span:last-child:after {display: none;}

nav .logo {padding: 27px 94px 27px 24px; font-size: 0; line-height: 0;}
nav .logo p {width: 122px; height: 26px;}
nav .logo p img {width: auto; height: 100%;}
nav .menu {padding: 16px 0;}
nav .menu li a {padding: 12px 0 12px 56px; color: #273345; font-size: 16px; line-height: 24px; font-weight: 600; text-align: left; font-weight: 600;}
nav .menu li a:hover,
nav .menu li i:hover {color: #3582F7; font-weight: 600;}

nav .menu li > a {background: no-repeat 16px center; background-size: 24px;}

nav .menu .depth2 {display: none; padding: 8px 0; background-color: #EDEFF4;}
nav .menu .depth2 a {padding-top: 8px; padding-bottom: 8px;color: #768396; font-size: 14px; line-height: 21px;}
nav .menu .depth2 li.active a {color: #3582f7; font-weight: 600;}

nav .menu li.info > a {background-image: url(../img/icon/info_b.png);}
nav .menu li.report > a {background-image: url(../img/icon/dashboard_b.png);}
nav .menu li.stats > a {background-image: url(../img/icon/chart_b.png);}
nav .menu li.account > a {background-image: url(../img/icon/setting_b.png);}
nav .menu li.lock i {display: inline-block; width: 21px; height: 21px; margin-left: 8px; background: url(../img/icon/lock.png) no-repeat center center; background-size: 18px; vertical-align: top;}

nav .menu > li.active > a {background-color: #3582F7; color: #fff;}
nav .menu li.active .depth2 {display: block;}
nav .menu li.active.info > a {background-image: url(../img/icon/info_w.png);}
nav .menu li.active.report > a {background-image: url(../img/icon/dashboard_w.png);}
nav .menu li.active.stats > a {background-image: url(../img/icon/chart_w.png);}
nav .menu li.active.account > a {background-image: url(../img/icon/setting_w.png);}
nav .menu li.active.lock i {background-image: url(../img/icon/lock_b.png)}

.menu_area {position: fixed; top: 0; bottom: 0; left: 0; padding: 24px 0; background: #F7F8FB; border-right: 1px solid #eaeaea; z-index: 100;}
.menu_area .menu_btn {display: none;}
.menu_area > .close_btn {position: absolute; top: 45px; right: -25px; padding: 4px 0; background: #F7F8FB; border: 1px solid #E3E3E3; border-left: 0;}
.menu_area > .close_btn button {display: block; width: 24px; height: 24px; background: url(../img/icon/menu_arrow.png) no-repeat center center; background-size: 24px;}
.menu_area .close_btn.mo {display: none;}

main {min-height: calc(100vh - 61px); margin-top: 120px; margin-left: 240px; padding: 40px;}
main.blur {filter: blur(5px);}

article {min-height: 499px; margin: 0; overflow-y: scroll;}

footer {display: flex; padding: 40px 40px 40px 280px; flex-flow: row; justify-content: space-between;}

footer p,
footer ul li a {color: #777; font-size: 14px; line-height: 21px; font-weight: 300; text-align: center;}

footer ul {display: flex; flex-flow: row;}
footer ul li {color: #777; font-size: 14px; line-height: 21px; font-weight: 600;}
footer ul li + li:before {display: inline-block; margin:0 5px; color: #ddd; vertical-align: top; content: '|';}
footer ul li a {display: inline-block; font-weight: 600; vertical-align: top;}

.close header,
.close footer {padding-left: 88px;}
.close header.tit_only {padding-left: 40px; border: 0;}
.close main {margin-left: 58px;}

.close .menu_area nav {}
.close .menu_area nav .logo {padding: 20px 0;}
.close .menu_area nav .logo p {width: 40px; height: 40px; margin: 0 auto; background: url(../img/logo_small.png) no-repeat center center; background-size: 40px;}
.close .menu_area nav .logo img {display: none;}
.close .menu_area nav .menu li a {font-size: 0;}
.close .menu_area nav .menu li.active .depth2 {display: none;}
.close .menu_area > .close_btn button {transform: rotate(-180deg);}

/* **************************************** login */
.login {position: relative; height: 100vh; background: #F7F8FB;}
.login .login_box {position: absolute; top: 50%; left: 50%; padding: 40px; background: #fff; box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.05); transform: translate(-50%, -50%);}
.login .login_box .logo {width: 170px; height: 80px; padding: 27px 24px; margin: 0 auto; font-size: 0;}
.login .login_box .logo img {width: auto; height: 100%;}

.login .login_box form {min-width: 400px;}
.login .login_box .input_form {margin: 40px 0;}

.login .login_box .input_form input,
.login .login_box .btn_login button {display: block; width: 100%; height: 100%;}

.login .login_box .input_form input {padding: 12px; margin-bottom: 8px; border: 1px solid #eaeaea; border-radius: 4px; color: #333;}
.login .login_box .input_form input:placeholder {color: #aaa;}
.login .login_box .input_form input:focus,
.login .login_box .input_form input:focus-visible {outline-color: #000; box-shadow: 0px 0px 25px rgb(0 0 0 / 8%);}
.login .login_box .btn_find {margin-top: 35px;}
.login .login_box .btn_find button {padding: 5px; color: #777; font-size: 14px; line-height: 21px; font-weight: 500;}
.login .login_box .btn_login {border-radius: 8px;background: #3582F7;}
.login .login_box .btn_login button {padding: 16px; background: #3582F7; color: #fff; font-size: 18px; font-weight: 500;}
.login .login_box .warning {width: 100%; padding: 8px 0; background-color: #FFF4F2; border-radius: 8px; color: #FD8D71; font-size: 14px; line-height: 24px; font-weight: 600; text-align: center;}
.login .login_box .warning .icon {display: inline-block; width: 24px; height: 24px; margin-right: 5px; background: url(../img/icon/login_warning.png) no-repeat center center; background-size: 24px; vertical-align: top;}

.login .copyright {position: absolute; bottom: 24px; left: 50%; color: #777; font-size: 14px; line-height: 21px; font-weight: 300; letter-spacing: -0.3px; text-align: center; transform: translateX(-50%);}

/* -------------------------------- ttl_manager */
.ttl_manager table th,
.ttl_manager table td,
.ttl_manager table td span,
.ttl_manager table td span button {letter-spacing: -0.7px;}
.ttl_manager table td {padding: 24px 0;}

/* -------------------------------- trading_area */
/* list common */
.trading_result .result_list li,
.temp_result .temp_list li {padding: 8px; line-height: 24px;}

.trading_result .result_title .result_text,
.trading_result .result_list li span,
.temp_result .temp_list li .title {min-width: 120px; margin-right: 16px; color: #777; font-size: 16px; line-height: 24px; vertical-align: top;}

.trading_result .result_list li {font-size: 0;}
.trading_result .result_list li p {display: inline-block; width: calc(100% - 136px); font-size: 16px; line-height: 24px;}

.temp_result .temp_list li {display: flex; font-size: 16px;}
.temp_result .temp_list li,
.temp_result .temp_list li .title {line-height: 32px;}

.temp_result .temp_list .number p {font-size: 0;}

/* -------------------------------- info_list */
.info_list {display: flex; margin-top: 40px; font-size: 0;}
.info_list:first-child {margin-top: 0;}
.info_list .title {min-width: 140px; width: 25%; color: #333; font-size: 16px; line-height: 46px; font-weight: 600;}
.info_list .title .star {color: #3582f7; line-height: 46px;}
.info_list .title + * {flex-grow: 1;}
.info_list .title_toggle {margin-bottom: 16px;}
.info_list .btn_toggle {width: calc(100% - 140px); line-height: 46px;}

.info_list .tooltip_wrap {display: inline-block; vertical-align: middle;}
.info_list .tooltip_wrap .tooltip_cont {width: 180px;}

.info_list .code_list {width: 100%;}
.info_list .code_list li {position: relative; padding: 12px 16px; margin-top: 8px; border: 1px solid #eee; border-radius: 4px; background-color: #f7f8fb; font-size: 0;}
.info_list .code_list li  * {display: inline-block; font-size: 16px; line-height: 24px; vertical-align: top;}
.info_list .code_list li span {margin-right: 8px;}
.info_list .code_list li .code_name:after {display: inline-block; padding-left: 8px; color: #ddd; vertical-align: top; content:'|';}
.info_list .code_list li .btn_remove {position: absolute; top: 0; right: 0; width: 48px; height: 48px; background: url(../img/icon/close_g.png) no-repeat center center; background-size: 24px; font-size: 0;}

/* -------------------------------- trading_result */
.trading_result {overflow: hidden; margin-top: 40px; border: 1px solid #e3e3e3; border-radius: 8px;}
.trading_result .result_title {padding: 24px 16px;}
.trading_result .result_title .result_text {line-height: 36px; font-weight: 400;}
.trading_result .result_title span {color: #000; font-size: 24px; line-height: 36px; font-weight: 700;}
.trading_result .result_list {display: inline-block; width: calc((100% - 48px)/3); margin-right: 24px; vertical-align: top;}
.trading_result .result_list:last-child {margin-right: 0;}

.trading_result .result_list_area {padding: 16px; font-size: 0;}
.trading_result .total {padding: 16px; background: #f7f8fb; border-top : 1px solid #EEEEEE; font-size: 0;}
.trading_result .total p,
.trading_result .total ul {display: inline-block; vertical-align: top; font-size: 0;}
.trading_result .total .total_title {width: 35%; min-width: calc(100% - 450px);}
.trading_result .total .total_title button {text-align: left;}
.trading_result .total .total_title button:before {display: inline-block; width: 24px; height: 24px; background: url(../img/icon/arrow_top_b.png) no-repeat center center; background-size: 24px; vertical-align: top; transform: rotate(180deg); content:'';}
.trading_result .total .total_title button.on:before {transform: rotate(0);}
.trading_result .total ul {width: 65%; max-width: 450px;}
.trading_result .total ul li {display: inline-block; width: 25%; color: #777; font-size: 16px; line-height: 24px; font-weight: 500; text-align: right; vertical-align: top;}
.trading_result .total ul li span {margin-left: 16px; font-weight: 500;}

.temp_list_wrap {padding: 16px; font-size: 0; border-top: 1px solid #EEEEEE;}
.temp_result {display: none;}
.temp_result.open {display: block;}

.temp_result .temp_list {display: inline-block; width: 50%; vertical-align: top;}
.temp_result .temp_list li {padding: 4px 8px;}

.temp_result .temp_list .number p span {margin-right: 8px; margin-bottom: 8px; vertical-align: middle;}
.temp_result .temp_list .number p span + span:nth-child(3n+1) {margin-left: 0;}

/* -------------------------------- temperature_result_detail */
.temp_detail section {margin-bottom: 120px;}
.temp_detail .section_title {display: flex; padding: 20px 0; font-size: 0; justify-content: space-between; align-items: center;}
.temp_detail .section_title .btn_area {font-size: 0;}
.temp_detail .section_title .btn_area .btn_xs + .btn_xs {margin-left: 8px;}
.temp_detail .section_title .title_text {font-size: 24px; line-height: 36px; font-weight: 700;}
.temp_detail .section_title .title_text .state_label {margin-right: 8px; vertical-align: middle;}
.temp_detail .section_title .title_text .state_info {margin-top: 22px; font-size: 16px; line-height: 24px;}
.temp_detail .section_title .title_text .state_info span {margin-right: 8px; color: #fa5830;}
.temp_detail .section_title .title_text .state_info span:before {display: inline-block; width: 24px; height: 24px; background: url(../img/icon/warning.png) no-repeat center center; background-size: cover; vertical-align: top; content:'';}

.temp_detail .ttl_report {overflow: hidden; border: 1px solid #e3e3e3; border-radius: 8px;}
.temp_detail .ttl_report + .ttl_report {margin-top: 16px;}
.temp_detail .ttl_report .temp_info {display: flex; width: 100%; background: #F7F8FB;}
.temp_detail .ttl_report .temp_info li {position: relative; width: 33.3%; padding: 16px; font-size: 20px; line-height: 30px; text-align: center;}
.temp_detail .ttl_report .temp_info li:after {position: absolute; top: 16px; bottom: 16px; right: 0; width: 1px; background: #E3E3E3; content:'';}
.temp_detail .ttl_report .temp_info li:last-child:after {display: none;}
.temp_detail .ttl_report .temp_info li .info_title {display: block; margin-bottom: 4px; color: #888; font-size: 14px; line-height: 21px; font-weight: 500;}
.temp_detail .ttl_report .report_wrap {display: flex; border-top: 1px solid #e3e3e3;}
.temp_detail .ttl_report .report_wrap.shipment {border-top: 0;}
.temp_detail .ttl_report .report_list {width: 33.3%; padding: 16px 14px 16px 14px;}
.temp_detail .ttl_report .report_list li {display: flex; width: 100%; padding: 8px;}
.temp_detail .ttl_report .report_list li,
.temp_detail .ttl_report .report_list li span {font-size: 16px; line-height: 32px;}
.temp_detail .ttl_report .report_list span {width: 120px; margin-right: 16px; color: #777;}
.temp_detail .ttl_report .report_list span.btn_xs {width: auto; margin-right: 0;}
.temp_detail .ttl_report .report_list li br {display: none;}

.temp_detail .graph_area {overflow: hidden;}
.temp_detail .graph_area .graph_chk {padding: 24px; background:#F7F8FB; border-bottom: 1px solid #e3e3e3; font-size: 0;}
.temp_detail .graph_area .graph_chk p {display: inline-block; margin-right: 16px; font-size: 16px; line-height: 24px; vertical-align: top;}
.temp_detail .graph_area .graph_chk .checkbox_area {padding: 0; line-height: 24px; vertical-align: top;}

.time_setting .trading_area .info_list .title {font-weight: 500;}

.time_setting .table_area table tr td span.current {color: #3582f7; font-size: 14px; line-height: 21px;}
.time_setting .table_area .table_info .info_text {color: #333;}
.time_setting .table_area table th:last-child,
.time_setting .table_area table td:last-child {width: 25%;}

/* ttl info */
.ttl_info .tab_area {margin-top: 40px; border-bottom: 1px solid #eee;}
.ttl_info .tab_cont {margin-top: 40px;}
.ttl_info .table_area td .btn_xs_label {margin-right: 4px; margin-bottom: 8px;}
.ttl_info .chart_area {min-height: 544px; padding: 16px 32px; border: 1px solid #E3E3E3; border-radius: 8px;}
.ttl_info .map_area {width: 100%; min-height: 250px; border-radius: 8px; background: #efefef;}

/* shipment add */
.shipment_add section + section {margin-top: 40px;}