@charset "utf-8";
/*-------------------------------------------------------------------
	파일정의 : style
	작성날짜 : 2020-12-23 장병주
	참고사항 : 이 파일은 style만 정의한다.
	분류순서 : 기본정책 > 유틸리티 > 사용자정의(컬러, 폰트, 보더, 간격 등)
	속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/*-------------------------------------------------------------------
	## 매장정보
-------------------------------------------------------------------*/
.store .detail_sec h2.ttl {
    font-weight: bold;
}

.info_head .tab_inner {
    background: #fff;
}

/* 이벤트 */
.evt_sec .store_name {
    margin-bottom: 10px;
}

.evt_sec .evt_cnt {
    display: table;
    width: 100%;
    color: #333F48;
}

.evt_sec .evt_cnt p {
    display: table-cell;
    width: 80%;
    color: #333F48;
}

.evt_sec .evt_cnt span {
    display: table-cell;
    width: 20%;
    color: #333F48;
    text-align: right;
}

.competitive_store {
    padding-top: 15px;
}

.detail_sec .competitive_store .normal_table td,
.detail_sec .competitive_store .normal_table th {
    text-align: left;
}

.detail_sec .competitive_store .normal_table th:first-child {
    width: 40%;
}

/*-------------------------------------------------------------------
	## 신규매장
-------------------------------------------------------------------*/

.name_wrap {
    position: relative;
    width: calc(100% - 75px)
}

.name_wrap:before {
    content: '';
    display: none;
    width: 100%;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 3px;
    bottom: 0px;
}

.name_wrap.is_active:before {
    display: block;
}

.name_wrap.is_active {
    display: block;
}

.name_wrap span {
    display: inline-block;
    margin-top: 19px;
    margin-left: -5px;
    font-size: 10px;
    position: absolute;
    right: 0px;

}

.info_head .edit {
    font-size: 24px;
    float: left;
}
.info_head .edit i{
    vertical-align: -4px;
}

.name_wrap,
.name_edit {
    float: left;
    display: none;
}

.name_edit.is_active {
    display: block;
}

.name_wrap input {
    width: 95%;
    background: none;
    color: #fff;
    font-size: 24px;
}
.info_head .ttl_area{
    margin:0;
}
.name_edit {
    color: #fff;
    font-size: 24px;
}

/* 신규매장 매출비교 권역설정 */
.store_area h5.ttl,
.store_area_search h5.ttl {
    padding-top: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}

.node_wrap {
    padding: 0;
}

/* #storeSearchFavorWrap .node_wrap{
	padding: 0 20px;
} */

.store_area .node_wrap li::after {
    content: '';
    clear: both;
    display: block;
}

.node_wrap li .data {
    float: right;
}

.store_area .module_box:last-child .module_inner {
    padding-bottom: 0;
}

.store_area_search .save_btn {
    margin-right: 10px;
}

.store_info .save_btn {
    margin-right: 10px;
}

.store_info_basic .save_btn {
    margin-right: 10px;
}


/* 신규매장 후보 AI매출 */

.store_info h5.ttl {
    padding: 20px 0;
}

.store_info .table {
    width: 100%;
}

.store_info .table > div {
    width: 50%;
}

.store_info .sale_summary .inner .cost {
    float: left;
}

.store_info .sale_summary .inner .compare {
    display: inline-block;

    float: left;
}

.store_info .sale_summary .inner .compare span {
    vertical-align: -6px;
}

.store_info .module_box {
    padding-bottom: 20px;
}



/* 신규매장 후보지 */
.store_area_search .inner {
    padding-bottom: 55px;
    box-sizing: border-box;
}

.store_area_search .info_body .ttl_area .edit {
    font-size: 14px;
}

.store_area_search .info_body h5.ttl {
    margin-bottom: 20px;
}

.store_area_search .info_body .ttl_area {
    margin-bottom: 5px;
}

.store_area_search .info_body {
    position: relative;
}

.store_area_search .info_body .edit {
    float: right;
    color: #3386FF;
    font-weight: bold;
    padding: 5px;
    font-size: 14px;
}

.store_area_search .info_body .edit.is_active .edit_btn {
    display: none;
}

.store_area_search .info_body  .edit.is_active .btn_wrap {
    display: block;
    padding: 0;
}

.edit .btn_wrap {
    display: none;
    float: right;
}

.store_area_search .info_body  .edit .btn_wrap button {
    float: left;
}

.store_area_search .info_body  .edit .btn_wrap {
    display: none;
    float: right;
}

.store_area_search .info_body .edit .btn_wrap button {
    float: left;
}

.store_area_search .info_body .edit_btn.is_active,
.store_area_search .info_body .btn_wrap.is_active .candidate_area li:after {
    content: '';
    display: block;
    clear: both;

}

/* 신규매장 후보 기본정보 */
.store_info_basic .info_body .module_box {
    padding: 20px;
}

.store_info_basic .info_body .module_box:last-of-type .module_inner {
    padding-bottom: 0
}

.store_info_basic .chart {
    margin-top: 20px;
}

.store_info_basic .has_node li:after {
    content: '';
    display: block;
    clear: both;
}

.store_info_basic .has_node li span {
    float: left;
}

.store_info_basic .has_node li b {
    float: right;
}

.has_node li:nth-child(odd) b {
    color: #0F438E
}

.has_node li:nth-child(even) b {
    color: #3386FF
}

.line_cart_wrap {
    position: relative;
    border-bottom: 1px solid #EDEFEF;
    margin-bottom: 10px;
}

.line_cart_wrap:before {
    display: block;
    content: '';
    position: absolute;
    top: 10px;
    left: 50%;
    bottom: 20px;
    border-left: 1px dashed #EDEFEF;
}

.line_cart_wrap .highcharts-background {
    fill: transparent !important;
}



.cart_head .ttl_area {
    margin-bottom: 0;
}


/*-------------------------------------------------------------------
    ## 대시보드
-------------------------------------------------------------------*/

.bo .dashboard .sale_summary p.compare span {
    vertical-align: -14px;
}

.dashboard_wide .board_body {
    padding-top: 40px;
}

.dashboard_wide .box_inner,
.dashboard_compare .box_inner,
.dashboard_analysis .box_inner {
    min-height: 430px;
}

.board_box .ttl {
    display: inline-block;
}

.board_box {
    position: relative
}

.board_box .ttl_area.outside {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-120%);
}

.dashboard_wide .board_box .bar_chart_tbl .label {
    width: 70px;
    white-space: normal;
}

.dashboard .normal_table th {
    text-align: center;
}

.dashboard .normal_table th:first-child {
    width: auto;
}

.dashboard .normal_table tbody td:first-child {
    text-align: right;
}

.dashboard_wide .board_wrap:first-child .board_box:first-child {
    width: 78%;
}

.dashboard_wide .board_wrap:first-child .board_box:last-child {
    width: 22%;
}

.dashboard_wide .board_wrap:nth-child(2) .board_box {
    width: 25%;
}

.dashboard_compare .board_body {
    padding-top: 10px;
}

.dashboard_compare .board_box {
    width: 50%;
}

.dashboard .popup_box {
    position: absolute;
    border-radius: 5px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    top: 30px;
    z-index: 1;
    display: none;
}

.dashboard_around .bar_chart_tbl {
    margin-bottom: 0;
}

.promotion.popup_box {
    width: 260px;
    height: 200px;
    right: 200px;
}

.popup_box > .inner {
    padding: 15px;
}

.promotion .name_area {
    width: 100%;
    color: #D0D3D4;
}

.promotion .name_area input {
    padding-left: 7px;
}

.promotion .input_item {
    border: 1px solid #EDEFEF;
    height: 40px;
    border-radius: 2px;
    margin-bottom: 20px;

}

.promotion .name_area input:focus {
    outline: 1px solid #3386FF
}

.promotion input {
    width: 100%;
    height: 100%;
}

.promotion .datepicker_item {
    width: 100%;
    color: #333F48;
}

.promotion .datepicker_item > div {
    float: left;
    width: 49%;
}

.promotion .datepicker_item .input_item {
    padding-left: 7px;
}

.promotion .datepicker_item > div:first-child {
    margin-right: 2%;
}

.promotion .datepicker_item > div > p {
    font-size: 12px;
    margin-bottom: 3px;
}

.promotion .datepicker_item .ic_date {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
    margin-top: 11px;
    margin-right: 3px;
}

.promotion .datepicker_item input {
    display: inline-block;
    width: 80px;
    font-size: 14px;
}

.promotion button {
    color: #7C878E;
    height: 40px;
    width: 100%;
    line-height: 40px;
    border-top: 1px solid #EDEFEF;
}

.menu.popup_box {
    color: #333F48;
    max-width: 440px;
    width: 100%;
    right: 100px;
}

.menu.popup_box .menu.popup_box h5 {
    display: inline-block;
    float: left;
    margin-bottom: 15px;
    font-weight: bold;
}

.menu.popup_box button {
    color: #3386FF;
    font-size: 12px;
    float: right;
    text-decoration: underline;
}

.menu.popup_box .checkbox_area {
    font-size: 14px;
    width: 100%;
}

.menu.popup_box .checkbox_area p {
    display: block;
    width: 25%;
    margin-bottom: 3px;
    padding-right: 5px;
    float: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu.popup_box .checkbox_area input {
    margin-right: 3px;
    vertical-align: 1px;
    width: 10px;
    height: 10px;
    border-color: #D0D3D4;
    opacity: 0.3;
    cursor: pointer;
}

.menu.popup_box .checkbox_area input:checked {
    opacity: 1;
}

.dashboard .snb {
    display: block;
    width: 100%;
    margin-top: 25px;
}

.dashboard .snb li {
    display: inline-block;
    margin-right: 5px;
    text-align: center;
}

.dashboard .snb .tab {
    width: 150px;
    height: 55px;
    border-radius: 5px;
    position: relative;
    vertical-align: middle;
}

.dashboard .snb .tab.blue > button {
    background: #3386FF;
    border-radius: 4px;
    color: #fff;
    border: none;
}

.dashboard .snb .tab.add_store button {
    color: #333F48;
    font-weight: bold;
}

.dashboard .snb .tab > button {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #D0D3D4;
    border-radius: 5px;
    box-sizing: border-box;
    vertical-align: top;
}

.dashboard .snb.selected .tab.region > button {
    border: 0;
    padding: 0 20px;
}

.dashboard .snb .reset {
    height: 30px;
    margin-top: 13px;
    line-height: 30px;
    border-radius: 30px;
    width: 90px;
    font-size: 14px;
    border: 1px solid #D0D3D4;
}

.compare_modal {
    display: none;
}

.compare_modal button.area_btn {
    float: left
}

.compare_modal button.store_btn {
    float: right
}

.compare_modal .choice {
    margin-top: 15px;
    margin-bottom: -15px;
}

.compare_modal .choice button {
    width: 145px;
    height: 145px;
    border: 1px solid #EDEFEF;
}

.compare_modal .choice button i {
    font-size: 42px;
    color: #3386FF;
    text-align: center;
    display: inline-block;
    margin-top: -5px;
}

.compare_modal .choice button b {
    display: block;
}

.compare_modal .modal_content {
    display: none;
}

.compare_modal .modal_content.on {
    display: block;
}

.modal .modal_content .input_item {
    height: 50px;
    width: 100%;
    border: 3px solid #EDEFEF;
}

.modal .modal_content .input_item i {
    display: inline-block;
    font-size: 24px;
    margin: 0 7px;
    margin-top: 2px;
    color: #0F438E;
}

.modal .modal_content .input_item input {
    width: calc(100% - 50px);
    line-height: 45px;
    height: 100%;
    background: none;
    vertical-align: 2px;
    color: #7C878E;
}

.modal .area .select_area {
    margin-top: 20px;
    position: relative;
}

.modal .area .select_area .select_btn {
    width: 300px;
}

.modal .select_area .select_btn {

    height: 50px;
    line-height: 50px;
    padding: 0 15px;
    text-align: left;
    color: #7C878E;
    font-weight: normal;
    border: 1px solid #EDEFEF;
    border-radius: 5px;
    box-sizing: border-box;
}

.modal .area .select_wrap {
    display: none;
    position: absolute;
    top: 49px;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 1;
}

.modal .area .input_item input::placeholder {
    color: #7C878E;
}

.modal .area_list {
    max-height: 250px;
    overflow-y: auto;
}

.modal .area_list li {
    height: 50px;
    line-height: 50px;
    padding: 0 10px;
    border: 1px solid #EDEFEF;
    border-top: 0;
}

.modal .area_list li button {
    display: block;
    padding: 0;
    font-weight: normal;
}

.modal .store .input_item {
    border-width: 1px;
    width: 450px;
    margin-top: 20px;

}

.modal .store .snb {
    width: 100%;
}

.modal .store .snb li {
    display: inline-block;
    margin-right: 15px;
}

.modal .store .snb button {
    font-size: 20px;
    color: #7C878E;
}

.modal .store .snb button.is_active {
    color: #3386FF;
    border-bottom: 2px solid #3386FF;
}

.modal .store > div {
    position: relative;
    display: none;
}

.modal .store .select_area {
    width: 220px;
    position: relative;
    float: right;
}

.modal .store .select_area button {
    width: 100%;
}

.modal .store .area_list {
    position: absolute;
    width: 100%;
    top: 50px;
    background: #fff;
    z-index: 1;
    left: 0;
    display: none;
}

.modal .store .region_search {
    width: 450px;
    margin-top: 20px;
}

.modal .store .region_search > div:first-child {
    float: left;
}

.modal .store .region_search > div:last-child {
    float: right;
}

.modal .store input[type="text"] {
    color: #333f48
}

.modal .store .area_list button {
    color: #333F48;
}

.modal .store .result_area {
    margin-top: 20px;
    margin-bottom: -20px;
}

.modal .store .result_area h5 {
    font-size: 14px;
    font-weight: bold;
}

.modal .store .result_area > ul {
    margin-top: 15px;
    width: 450px;
}

.modal .store .result_area li {
    width: 220px;
    height: 70px;
    margin-bottom: 10px;
}

.modal .store .result_area li:nth-child(odd) {
    float: left;
}

.modal .store .result_area li:nth-child(even) {
    float: right;
}

.modal .store .result_area button {
    width: 100%;
    height: 100%;
    padding: 0 15px;
    text-align: left;
    border: 1px solid #EDEFEF;
    border-radius: 5px;
    box-sizing: border-box;
}

.modal .store .result_area button span {
    display: block;
    vertical-align: middle;
    font-weight: normal
}

.snb_inner::after {
    clear: both;
    display: block;
    content: '';
}

.snb_inner.has_color button {
    color: #fff;
}

.snb.selected .reset button {
    color: #333F48
}

.snb.selected .region > button:after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.snb.selected .region:hover button:after {
    opacity: 1;
}

.has_color .blue {
    background-color: #3386FF
}

.has_color .l_green {
    background-color: #50B93C
}

.has_color .yellow {
    background-color: #EEC202
}

.has_color .orange {
    background-color: #F49442
}

.has_color .cyan {
    background-color: #47C1BF
}

.has_color .d_blue {
    background-color: #0F438E
}

.has_color .red {
    background-color: #DE3718
}

.snb .tab.store_area .snb.selected .tab button {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
}

.snb.selected .tab button span {
    display: -webkit-box;
    line-height: 1.2;
    width: 100%;
    word-wrap: break-word;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    white-space: normal;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 1;


}

.snb.selected .tab:hover .close_btn {
    opacity: 1;
    transition: opacity 0.3s;
}

.snb.selected .close_btn {
    position: absolute;
    right: 5px;
    top: 19px;
    width: 36px;
    height: 15px;
    opacity: 0;
}

.selected .close_btn button:before,
.selected .close_btn button:after {
    background: #fff;
}

/*차트 이미지 임시설정*/
.box_body .chart {
    text-align: center;
    position:relative;
}

.dashboard .chart ul {
    text-align: left;
}

.dashboard .chart img {
    vertical-align: middle;
}

.dashboard_wide .board_wrap:last-child .box_body .chart img {
    margin-top: 20px;
}

/*배후지*/
.no_selected {
    margin-top: 40px;
}

.has_color .box_head {
    color: #fff;
    height: auto;
}

.dashboard_around .board_body {
    width: 100%;
}

.dashboard_around .board_wrap {
    width: 100%;
    margin-top: 10px;
}

.dashboard_around .board_wrap:after {
    clear: both;
    display: block;
    content: '';
}

.dashboard_around .board_wrap .box_head {
    border-radius: 5px 5px 0 0;
}

.dashboard_around .box_head h5 {
    font-size: 24px;
}

.dashboard .dashboard_around .board_box {
    max-width: 390px;
    margin-right: 10px;
    float: left;
    padding: 0;
    width: calc(25% - 8px);
}

.dashboard_around .board_box:last-child {
    margin-right: 0;
}

.dashboard .dashboard_around .box_inner {
    height: auto
}

.dashboard_around .box_inner {
    background: #F3F5F5;
}

.dashboard_around .module_box {
    margin-bottom: 12px;
    background: #fff;
    padding: 15px;
    box-sizing: border-box;
}

.dashboard_around .module_box:last-child {
    margin: 0;
}

.dashboard_around .module_box .chart {
    margin-top: 30px;
    height: auto;
    min-height: 200px;
}

.dashboard_around .node_wrap li {
    line-height: 35px;
}

.dashboard_around .basic_info li {
    border-bottom: 0;
}

/*손익분석*/
.dashboard_analysis .board_wrap {
    margin-top: 10px;
}

.dashboard_analysis .board_wrap:first-child .board_box {
    width: 50%;
}

.dashboard_analysis .board_wrap:last-child .board_box {
    width: 100%;
}

/*권역침범*/
.dashboard_area .board_wrap {
    margin-top: 10px;
}

.dashboard .dashboard_area .box_inner {
    height: auto;
}

.dashboard_area .board_box:first-child {
    width: 80%;
}

.dashboard_area .board_box:last-child {
    width: 20%;
}

.dashboard_area .ttl {
    margin-bottom: 10px;
    margin-top: 15px;
}

.dashboard_area .map_area {
    width: 100%;
    max-height: 700px;
    border-radius: 5px;
    overflow: hidden;
}

.dashboard_area .board_box:last-child .box_inner {
    border: 0;
}

.dashboard_area table tr {
    line-height: 45px;
    text-align: center;
    /*
    border-bottom:
	*/
}

.dashboard_area thead {
    background: #3386FF;
    color: #fff;
    border-radius: 5px 5px 0 0;

}

.dashboard_area thead th:first-child {
    border-right: 1px solid #fff;
    border-top-left-radius: 5px;
}

.dashboard_area thead th:last-child {
    border-top-right-radius: 5px;
}

.dashboard_area tbody td {
    border-right: 1px solid #EDEFEF;
    border-bottom: 1px solid #EDEFEF;
    width: 50%;
    font-weight: bold;
}

.dashboard_area tbody tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

.dashboard_area tbody tr:last-child td:last-child {
    border-bottom-right-radius: 5px;
}

.dashboard_area tbody td:first-child {
    border-left: 1px solid #EDEFEF;
    text-align: left;
    font-weight: normal;
}

.dashboard_area table span {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 6px;
    margin-left: 15px;
    margin-right: 10px;
}

.dashboard .dashboard_area .board_box:last-child .box_inner {
    border-radius: 0;
    overflow: visible;
}


/*report*/

.report_head .tab_inner {
    border-bottom: 0;
}

.report .search_item {
    background: #F3F5F5;
    box-shadow: none;
    float: left;
    max-width: 350px;
}

.report .search_area .submit {
    float: right;
}

.report .search_area .submit {
    background: #0F438E;
    border-radius: 4px;
    color: #fff;
    width: 95px;
    height: 46px;
}

.report .search_item input {
    background: #F3F5F5;
}

.report .search_item .search_btn {
    background: none;
}

.date_select {
    position: static;
    transform: none;
    margin: 20px 0;
    width: auto;
    box-shadow: none;
    clear: both;
    border: #D0D3D4;
}

.date_select > .select_wrap {
    width: 120px;
    height: 45px;
    display: inline-block;
    position: relative;
    border: 1px solid #D0D3D4;
    border-radius: 5px;
    vertical-align: top;
    margin-right: 3px;
}

.date_select > .select_wrap > button {
    width: 100%;
    height: 100%;
    position: relative;
    line-height: 45px;
    padding: 0 10px;
    text-align: left;
}

.select_wrap.is_active {
    border-color: #0F438E
}

.date_select ul {
    position: absolute;
    top: 50px;
    left: 0;
    width: 120px;
    height: 280px;
    overflow-y: auto;
    border: 1px solid #D0D3D4;
    border-radius: 5px;
    box-sizing: border-box;
    background: #fff;
    z-index: 1;
    display: none;
}

.date_select ul.is_active {
    display: block;
}

.date_select li button {
    color: #333F48;
    font-weight: 400;
    width: 100%;
    padding: 5px 10px;
    text-align: left;
}

.date_select li button:hover {
    background: #F3F5F5;
}

/*프린트*/
.print_box .sale_summary {
    display: block;
    width: 50%;
    float: left;
}


.print_box .sale_summary > span {
    font-size: 1em;
}

.print_box .sale_summary .compare {
    font-size: 0.8em;
}

.print_box .sale_summary .cost {
    font-size: 42px;
    font-weight: bold;
}

.print_box .sale_summary .count {
    font-size: 42px;
}

.print_box .basic_info li {
    line-height: 1.7em;
}

.print_box .normal_table {
    font-size: 0.8em;
}

.print_box .chart {
    margin-top: 20px;
}

.print_box .content_area + div {
    border: 0 none;
    padding: 10px 0;
}

.print_box .content_area + div .chart {
    margin-top: 0;
}

.print_box .content_area .line_cart_wrap,
.print_box .content_area .bar_cart_wrap {
    float: left;
    width: 100%;
}

.print_box .content_area .bar_cart_wrap .chart {
    margin-top: 0;
}

.print_box .normal_table tbody th {
    width: 25%;
    text-align: left;
    padding-left: 10px;
    background: #EDEFEF;
    font-weight: bold;
}

.print_box .normal_table td {
    text-align: center;
}

.table_wrap .normal_table.won {
    margin-top: 15px;
}

.print_box .normal_table tbody.left td,
.print_box .normal_table tbody.left th {
    text-align: left;
    padding-left: 10px;
}

.print_box th.long {
    width: 50%;
}

.report .print_box .normal_table thead th {
    text-align: left;
    padding-left: 10px;
}

.print_box .chart_summary p {
    font-size: 1.75em;
}

.print_box .chart img {
    display: block;
    margin: 15px auto;
}

.print_box .normal_table th:first-child {
    width: auto;
}

.print_box .table_box .table_wrap:first-child {
    float: left;
    width: calc(50% - 10px);
}

.print_box .table_box .table_wrap:last-child {
    float: right;
    width: calc(50% - 10px);
}

.print_box .table_box th:first-child {
    width: 60%;
}

.print_box .table_box td:first-child {
    width: 60%;
}

.print_box.has_node .chart {

    font-size: 1em;
}

.print_box.has_node .chart li span {
    font-size: 1em;
}

.print_box.area_info .node_wrap li {
    border: 0;
}

.print_box.area_info .table {
    width: 100%;
}

.print_box.area_info .table > div:first-child {
    text-align: left;
}

.print_box.area_info .table > div:last-child {
    text-align: right;
}



/*animation*/

.report_body .contents > li:hover img {
    transform: scale(1.05);
    transition: transform 0.2s;
}

.report_body .contents > li figure {
    width: 100%;
    overflow: hidden;
}

/*datepicker*/
.ui-widget.ui-widget-content {
    padding: 10px;
    box-sizing: content-box;
}

.ui-datepicker .ui-datepicker-next {

    right: 10px;
    top: -19%;
    transform: rotate(180deg) translateY(-50%);
    cursor: pointer
}

.ui-datepicker .ui-datepicker-header {
    padding: 10px 0;
}

.ui-datepicker th {
    font-weight: normal;
}

.ui-datepicker .ui-datepicker-prev {
    left: 10px;
    top: 56%;
    transform: translateY(-50%);
    cursor: pointer
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover {
    background: #fff;
    border: 0;
    color: #7C878E;
}

.ui-datepicker-next.ui-corner-all::before,
.ui-datepicker-prev.ui-corner-all::before {
    content: '\e802';
    font-family: 'ic_ai';
    font-size: 20px;
    color: #7C878E;
    font-weight: normal;
    opacity: 0.5
}

.ui-datepicker-next.ui-corner-all:hover::before,
.ui-datepicker-prev.ui-corner-all:hover::before {
    opacity: 1
}

.ui-datepicker-calendar thead th span {
    font-family: 'Noto Sans KR', '맑은고딕', sans-serif;
}

.ui-datepicker .ui-datepicker-next::before {
    transform: rotate(180deg);
}

.ui-widget-header {
    background: #fff;
    border: none;
    color: #333F48;
    font-weight: bold;
}

.ui-datepicker td {
    line-height: 1.5;
}

.ui-widget-content .ui-state-default {
    border: none;
    background: none;
    color: #333F48;
    text-align: center;
    position: relative;
    z-index: 1;
}

.ui-widget-content .ui-datepicker-current-day .ui-state-default {
    border-bottom: 2px solid #3386FF;
    color: #3386FF;
    font-weight: bold;
}

.ui-widget-content td {
    position: relative;
}

.ui-widget-content td::before {
    content: '';
    display: none;
    position: absolute;
    left: 51%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #3386FF;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.ui-datepicker-calendar td:hover .ui-state-default {
    color: #fff;
    font-weight: bold;
}

.ui-datepicker-calendar td:hover::before {
    display: block;
}

.dashboard table thead,.store table thead{
    font-size:14px;
}
.print_box .bar_chart_tbl .label {
    width: 120px;
    font-size: 0.85em;
}

.print_box .bar_chart_tbl .bar_graph {
    width: 200px;
}
.contents .chart_table{
    position:relative;
    margin-top:20px;
}
.report table thead{
    font-weight:bold
}
.chart_table thead{
    background:#EDEFEF;
}
.chart_table td,.chart_table th{
    border:1px solid #EDEFEF;
    padding:3px 10px;
    text-align:left;
}
.chart_table th{
    font-size:14px;
}
.chart_wrap{
    position:relative;
}
.chart_wrap::before{
    content:attr(data-unit);
    position: absolute;
    right: 0;
    top: 0;
    font-size: 12px;
    color: #7C878E;
    transform: translateY(-120%);
}
.sale_summary .inner{
    margin-right:-10px;
    display:flex;
    align-items:center;
}
.chart_wrap .chart_total{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    text-align:center;
    font-size:14px;
}
.chart_wrap .chart_total b::after{
    content:attr(data-unit)
}
.chart_wrap .chart_total small{
    display:block;
    font-size:12px;
}
.box_body .normal_table thead tr:nth-child(2) th{
    font-size:12px;
}
.box_body .case{
    display:none;
}
.box_body .case_1{
    display:block;
}
.lnb .tab_inner .tab a{
    height:40px;
}
@media screen and (max-width: 1460px) {

    .dashboard_wide .board_wrap:first-child .board_box:first-child {
        width: 70%;
    }

    .dashboard_wide .board_wrap:first-child .board_box:last-child {
        width: 30%;
    }
}

@media screen and (max-width:1320px) {
    .login {
        font-size: 14px;
    }

    .login .login_form {
        width: 65%;
        margin: 0;
        height: 65%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login .login_form .grid {
        height: 100%;
    }

    .login .login_form .col {
        float: none;
        width: 100%;
        position: relative;
    }

    .login .login_form .grid > .col.col_6:first-child {
        height: 25%;
    }

    .login .login_form .grid > .col.col_6:last-child {
        height: 75%;
        min-height: 400px;
    }

    .login .login_form .form_area {
        height: auto;
        width: 100%;
        max-width: 350px;
        position: absolute;
        left: 50%;
        padding-top:0;
        top: 43%;
        transform: translate(-50%, -50%);

    }

    .login .form_top .txt_area {
        margin-top: 15px;
    }

    .login .form_top .txt_area p {
        font-size: 14px;
    }

    .login .form_body {
        margin-top: 10px;
    }

    .login .input_box input {
        height: 40px;
    }

    .login .input_area.checkbox label {
        font-size: 14px;
    }

    .login .form_body .btn_area {
        margin-top: 15px;
    }

    .login .form_area .powered {
        font-size: 12px;
        position: absolute;
        bottom: -20%;
    }
}

@media screen and (max-width: 1180px) {
    .dashboard .snb .tab {
        margin-bottom: 5px;
    }

    .dashboard .dashboard_wide .board_body .board_wrap .board_box {
        width: 50%;
    }

    .dashboard .dashboard_around .board_box {
        width: calc(50% - 10px);
        max-width: none;
    }

}

@media screen and (max-width:950px) {
    .dashboard_wide .board_wrap:first-child .board_box:first-child {
        width: 50%;
    }

    .dashboard_wide .board_wrap:first-child .board_box:last-child {
        width: 50%;
    }

    .dashboard .popup_box {
        top: 55px;
        right: 0;
    }

    .login .login_form {
        width: 80%;
        height: 80%;
    }

}

@media screen and (max-width:800px) {

    .container .dashboard .board_body .board_wrap .board_box {
        width: 100%;
        margin-right: 0;
    }

    .dashboard .board_box {
        padding: 0;
    }

    .dashboard .snb .tab {
        width: calc(33.33% - 5px);
        margin-right: 5px;
        float: left;
        margin-bottom: 5px;
    }

    .dashboard .snb .tab:nth-child(3n) {
        margin-right: 0;
        width: 33.33%;
    }

    .dashboard .snb li:nth-child(3n+4) {
        clear: both;
    }

    .report_head .search_area {
        margin-bottom: 10px;
        float: none;
        max-width: none;
    }

    .report .search_item {
        width: 73%;
        max-width: none;
    }

    .report .search_area .submit {
        width: 25%;
    }

    .report_head .lnb {
        float: none;
    }

    .report_head .lnb li:last-child {
        padding-right: 0;
    }

    .report_head .tab_inner {
        text-align: center;
    }

    .report_head .tab_inner .tab {
        float: none;
    }

    .date_select::after {
        content: '';
        display: block;
        clear: both;
    }

    .date_select > .select_wrap {
        margin-right: 0;
        width: 49%;
        max-width: 120px;
    }

    .dashboard_wide .box_inner,
    .dashboard_compare .box_inner,
    .dashboard_analysis .box_inner {
        min-height: fit-content;
        padding-bottom: 10px;
    }

    .datepicker_area input {
        text-align: center;
    }
    .node_wrap li .close_btn{
        display:block;
        top:20px;
    }
    .snb.selected .close_btn{
        opacity:1;
    }
        

}

@media screen and (max-width:500px) {
    .login .login_form {
        width: 90%;
        height: 90%;
    }
    .login .login_form .form_area{
        padding: 0 20px;
    }

    .report_body .contents > li:hover img {
        transform: none;
    }

    .name_wrap {
        position: relative;
        width: calc(100% - 110px)
    }

    .dashboard .snb .tab:nth-child(even) {
        margin-right: 5px;
    }

    .dashboard .snb .reset {
        clear: both;
        font-size: 12px;
        margin-top: 12px;
    }

    .dashboard_analysis .snb .reset {
        clear: inherit;
    }

    .compare_modal .choice button {
        width: 115px;
        height: 115px;
    }

    .dashboard .snb .tab > button.add_store {
        font-size: 12px;
    }

    .ic_date {
        width: 20px;
        height: 20px;
    }

    .board_head .ic_date {
        margin-left: 10px;
    }

    .modal .area .select_area .select_btn,
    .modal .store .select_area,
    .modal .store .input_item,
    .modal .store .region_search,
    .modal .store .result_area > ul,
    .modal .store .result_area {
        width: 100%;
    }

    .modal .store .result_area li {
        width: 100%;
    }

    .modal .store .select_area button {
        margin-bottom: 5px;
    }

    .modal .store .result_area li:nth-child(odd) {
        margin-right: 5px;
    }

    .modal .store .snb button {
        font-size: 16px;
    }

    .modal .store .result_area {
        height: 150px;
        overflow: auto;
    }

    .dashboard .board_box:first-child {
        float: right;
    }

    .dashboard_area .snb .tab {
        width: 100%;
    }

    .date_select > .select_wrap {
        max-width: none;
    }

    .date_select > .select_wrap:last-child {
        float: right;
    }

    .box_head .popup_btn button {
        font-size: 12px;
        width: 85px;
    }

    .no_selected {
        margin-top: 0;
    }

}

@media screen and (max-width:375px) {
    .dashboard .snb .tab {
        width: 31%;
    }

    .login .login_form {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        transform: none;
    }

}

@media screen and (max-width:350px) {
    .box_head .popup_btn button {
        width: 70px;
        font-size: 11px;
    }

    .tab_inner .tab a {
        font-size: 14px;
    }

    .login .login_form .form_area {
        padding-top: 10%;
    }
}