.daterangepicker { position: absolute; color: inherit; background-color: #fff; border-radius: 4px; border: 1px solid #ddd; width: 278px; max-width: none; padding: 0; margin-top: 7px; top: 100px; left: 20px; z-index: 3001; display: none; font-family: arial; font-size: 15px; line-height: 1em; }
.daterangepicker:before, .daterangepicker:after { position: absolute; display: inline-block; border-bottom-color: rgba(0, 0, 0, 0.2); content: ''; }
.daterangepicker:before { top: -7px; border-right: 7px solid transparent; border-left: 7px solid transparent; border-bottom: 7px solid #ccc; }
.daterangepicker:after { top: -6px; border-right: 6px solid transparent; border-bottom: 6px solid #fff; border-left: 6px solid transparent; }
.daterangepicker.opensleft:before { right: 9px; }
.daterangepicker.opensleft:after { right: 10px; }
.daterangepicker.openscenter:before { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.daterangepicker.openscenter:after { left: 0; right: 0; width: 0; margin-left: auto; margin-right: auto; }
.daterangepicker.opensright:before { left: 9px; }
.daterangepicker.opensright:after { left: 10px; }
.daterangepicker.drop-up { margin-top: -7px; }
.daterangepicker.drop-up:before { top: initial; bottom: -7px; border-bottom: initial; border-top: 7px solid #ccc; }
.daterangepicker.drop-up:after { top: initial; bottom: -6px; border-bottom: initial; border-top: 6px solid #fff; }
.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar { float: none; }
.daterangepicker.single .drp-selected { display: none; }
.daterangepicker.show-calendar .drp-calendar { display: block; }
.daterangepicker.show-calendar .drp-buttons { display: block; }
.daterangepicker.auto-apply .drp-buttons { display: none; }
.daterangepicker .drp-calendar { display: none; max-width: 270px; }
.daterangepicker .drp-calendar.left { padding: 8px 0 8px 8px; }
.daterangepicker .drp-calendar.right { padding: 8px; }
.daterangepicker .drp-calendar.single .calendar-table { border: none; }
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { color: #fff; border: solid black; border-width: 0 2px 2px 0; border-radius: 0; display: inline-block; padding: 3px; }
.daterangepicker .calendar-table .next span { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.daterangepicker .calendar-table .prev span { transform: rotate(135deg); -webkit-transform: rotate(135deg); }
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td { white-space: nowrap; text-align: center; vertical-align: middle; min-width: 32px; width: 32px; height: 24px; line-height: 24px; font-size: 12px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap; cursor: pointer; }
.daterangepicker .calendar-table { border: 1px solid #fff; border-radius: 4px; background-color: #fff; }
.daterangepicker .calendar-table table { width: 100%; margin: 0; border-spacing: 0; border-collapse: collapse; }
.daterangepicker td.available:hover, .daterangepicker th.available:hover { background-color: #eee; border-color: transparent; color: inherit; }
.daterangepicker td.week, .daterangepicker th.week { font-size: 80%; color: #ccc; }
.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: #fff; border-color: transparent; color: #999; }
.daterangepicker td.in-range { background-color: #ebf4f8; border-color: transparent; color: #000; border-radius: 0; }
.daterangepicker td.start-date { border-radius: 4px 0 0 4px; }
.daterangepicker td.end-date { border-radius: 0 4px 4px 0; }
.daterangepicker td.start-date.end-date { border-radius: 4px; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: #357ebd; border-color: transparent; color: #fff; }
.daterangepicker th.month { width: auto; }
.daterangepicker td.disabled, .daterangepicker option.disabled { color: #999; cursor: not-allowed; text-decoration: line-through; }
.daterangepicker select.monthselect, .daterangepicker select.yearselect { font-size: 12px; padding: 1px; height: auto; margin: 0; cursor: default; }
.daterangepicker select.monthselect { margin-right: 2%; width: 56%; }
.daterangepicker select.yearselect { width: 40%; }
.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect { width: 50px; margin: 0 auto; background: #eee; border: 1px solid #eee; padding: 2px; outline: 0; font-size: 12px; }
.daterangepicker .calendar-time { text-align: center; margin: 4px auto 0 auto; line-height: 30px; position: relative; }
.daterangepicker .calendar-time select.disabled { color: #ccc; cursor: not-allowed; }
.daterangepicker .drp-buttons { clear: both; text-align: right; padding: 8px; border-top: 1px solid #ddd; display: none; line-height: 12px; vertical-align: middle; }
.daterangepicker .drp-selected { display: inline-block; font-size: 12px; padding-right: 8px; }
.daterangepicker .drp-buttons .btn { margin-left: 8px; font-size: 12px; font-weight: bold; padding: 4px 8px; }
.daterangepicker.show-ranges.single.rtl .drp-calendar.left { border-right: 1px solid #ddd; }
.daterangepicker.show-ranges.single.ltr .drp-calendar.left { border-left: 1px solid #ddd; }
.daterangepicker.show-ranges.rtl .drp-calendar.right { border-right: 1px solid #ddd; }
.daterangepicker.show-ranges.ltr .drp-calendar.left { border-left: 1px solid #ddd; }
.daterangepicker .ranges { float: none; text-align: left; margin: 0; }
.daterangepicker.show-calendar .ranges { margin-top: 8px; }
.daterangepicker .ranges ul { list-style: none; margin: 0 auto; padding: 0; width: 100%; }
.daterangepicker .ranges li { font-size: 12px; padding: 8px 12px; cursor: pointer; }
.daterangepicker .ranges li:hover { background-color: #eee; }
.daterangepicker .ranges li.active { background-color: #08c; color: #fff; }
/*  Larger Screen Styling */
@media (min-width: 564px) {
    .daterangepicker { width: auto; }
    .daterangepicker .ranges ul { width: 140px; }
    .daterangepicker.single .ranges ul { width: 100%; }
    .daterangepicker.single .drp-calendar.left { clear: none; }
    .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar { float: left; }
    .daterangepicker { direction: ltr; text-align: left; }
    .daterangepicker .drp-calendar.left { clear: left; margin-right: 0; }
    .daterangepicker .drp-calendar.left .calendar-table { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .daterangepicker .drp-calendar.right { margin-left: 0; }
    .daterangepicker .drp-calendar.right .calendar-table { border-left: none; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .daterangepicker .drp-calendar.left .calendar-table { padding-right: 8px; }
    .daterangepicker .ranges, .daterangepicker .drp-calendar { float: left; }
}

@media (min-width: 730px) {
    .daterangepicker .ranges { width: auto; }
    .daterangepicker .ranges { float: left; }
    .daterangepicker.rtl .ranges { float: right; }
    .daterangepicker .drp-calendar.left { clear: none !important; }
}
.date-range-area .daterangepicker.show-calendar {z-index: 3 !important; border-color: #000; border-radius: 16px; box-shadow: 4px 4px 8px rgba(0,0,0,0.12); min-width: 768px; margin-top: 20px;}
.date-range-area .daterangepicker:before, .date-range-area .daterangepicker:after {border: none;}
.date-range-area .daterangepicker .drp-calendar.left {padding: 22px 25px 22px 35px; max-width: none;}
.date-range-area .daterangepicker .drp-calendar.right {padding: 22px 35px 22px 25px; max-width: none;}
.date-range-area .daterangepicker select.monthselect, .date-range-area .daterangepicker select.yearselect {font-size: 20px; font-weight: 500; width: auto;}
.date-range-area .daterangepicker .drp-calendar.left .calendar-table {padding-right: 0;}
.date-range-area .daterangepicker .drp-calendar thead tr:first-child th {padding: 0 0 10px 0;}
.date-range-area .daterangepicker .drp-calendar thead tr:nth-child(2) th {cursor: auto;}
.date-range-area .daterangepicker .drp-calendar .month {direction: rtl; text-align: center; font-size: 20px; font-weight: 500;}
.date-range-area .daterangepicker .drp-calendar .month select:focus, .date-range-area .daterangepicker .drp-calendar .month select:hover {outline: none;}
.date-range-area .daterangepicker .drp-calendar .month select:focus-visible {outline: 1px solid #000;}
.date-range-area .daterangepicker .drp-calendar .month .yearselect, .daterangepicker .drp-calendar .month .monthselect {direction: ltr; display: inline-block; vertical-align: middle;}
.date-range-area .daterangepicker .drp-calendar .month .monthselect {margin-left: 4px;}
.date-range-area .daterangepicker .drp-calendar .month .comma {display: inline-block; vertical-align: -3px; line-height: normal;}
.date-range-area .daterangepicker .calendar-table th, .date-range-area .daterangepicker .calendar-table td {font-size: 14px; width: 24px; height: 22px; padding: 10px 15px; border: none; font-weight: 500;}
.date-range-area .daterangepicker td.off, .date-range-area .daterangepicker td.off.in-range, .date-range-area .daterangepicker td.off.start-date, .date-range-area .daterangepicker td.off.end-date {color: #aaa;}
.date-range-area .daterangepicker td.disabled, .date-range-area .daterangepicker option.disabled {color: #aaa; text-decoration: none;}
.date-range-area .daterangepicker td.available, .date-range-area .daterangepicker td.off {position: relative; z-index: 1;}
.date-range-area .daterangepicker td.start-date, .date-range-area .daterangepicker td.end-date {z-index: 2}
.date-range-area .daterangepicker td.available:hover, .date-range-area .daterangepicker  th.available:hover {background-color: transparent;}
.date-range-area .daterangepicker td.active, .date-range-area .daterangepicker td.active:hover {background-color: transparent;}
.date-range-area .daterangepicker td.active::before, .date-range-area .daterangepicker td.active:hover::before {background-color: #EA1916;}
.date-range-area .daterangepicker td.active:not(.off)::before {content: ''; position: absolute; left: 50%; top: 50%; width: 32px; height: 32px; border-radius: 50%; background-color: #EA1916; z-index: -1; transform: translate(-50%, -50%);}
.date-range-area .daterangepicker td.in-range {background-color: transparent;}
.date-range-area .daterangepicker td.in-range:not(.ends, .start-date, .end-date)::before {content: ''; position: absolute; left: 50%; top: 50%; width: 100%; height: 32px; background-color: #FFF2F2; z-index: -1; transform: translate(-50%, -50%);}
.date-range-area .daterangepicker td.start-date + td.in-range:not(.end-date, .ends)::after {content: ''; position: absolute; left: calc(50% - 23px); top: 50%; width: 100%; height: 32px; background-color: #FFF2F2; z-index: -1; transform: translate(-50%, -50%);}.date-range-area .daterangepicker td.start-date + td.in-range:not(.end-date, .off)::after {content: ''; position: absolute; left: calc(50% - 23px); top: 50%; width: 100%; height: 32px; background-color: #FFF2F2; z-index: -1; transform: translate(-50%, -50%);}
.date-range-area .daterangepicker td.in-range + td.end-date:not(.off)::after {content: ''; position: absolute; left: 0; top: 50%; width: 50%; height: 32px; background-color: #FFF2F2; z-index: -2; transform: translate(0, -50%);}
.date-range-area .daterangepicker .calendar-table .prev {position: absolute; left: 23%; top: 3px;}
.date-range-area .daterangepicker .calendar-table .prev span, .date-range-area .daterangepicker .calendar-table .next span {border: none; background: url('https://www.lge.co.kr/kr/bestshop/images/sub/bestClass/icon/icon_arrow_left.svg') center center no-repeat; background-size: 100% 100%; width: 16px; height: 16px;}
.date-range-area .daterangepicker .calendar-table .prev span {transform: none;}
.date-range-area .daterangepicker .calendar-table .next {position: absolute; right: 23%; top: 3px;}
.date-range-area .daterangepicker .calendar-table .next span {transform: rotate(180deg);}
.date-range-area .date-range-inner {position: relative; display: none;}
.date-range-area .date-range-inner.on {display: block;}
@media screen and (max-width: 1028px) {
    .date-range-area .daterangepicker.show-calendar {min-width: auto;}
}
@media screen and (max-width: 767px) {
    .date-range-area.on {position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 9001; width: 100%; height: 100%;}
    .date-range-area.on::before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); border: none;  z-index: 10;}
    .date-range-area .daterangepicker.show-calendar {z-index: 10 !important;}
    .date-range-area .date-range-inner {transition: all .4s ease; transform: translateY(100%); transition-duration: 1s;}
    .date-range-area .date-range-inner.on {position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 90%; background: #fff; z-index: 9000; border-radius: 16px 16px 0 0; padding-top: 16px;}
    .date-range-area .date-range-inner.on.ani {transform: translateY(0);}
    .date-range-area.on .m-popup-title {display: block !important;}
    .date-range-area .m-popup-title {font-size: 16px; font-weight: 700; padding: 0 16px; padding-bottom: 17px; border-bottom: 1px solid #DDDDDD; line-height: normal;}
    .date-range-area .btn-pop-close {top: 16px;}
    .date-range-area .daterangepicker.show-calendar {border: none; box-shadow: none; border-radius: 0; margin-top: 0;}
    .date-range-area .daterangepicker {margin-top: 0; position: relative; top: 0 !important; width: 100%; left: 0 !important; height: 100%; display: flex !important; flex-direction: column; overflow-y: auto;}
    .date-range-area .daterangepicker.show-calendar .ranges, .date-range-area .daterangepicker .drp-selected {display: none;}
    .date-range-area .daterangepicker .calendar-table, .date-range-area .daterangepicker .calendar-table table {height: 100%;}
    .date-range-area .daterangepicker.show-calendar .drp-calendar { display: block; height: calc(50% - 40px); min-height: 300px; }
    .date-range-area .daterangepicker .drp-calendar.left {padding: 22px 18px 20px;}
    .date-range-area .daterangepicker .drp-calendar.right {padding: 20px 18px 22px; margin-bottom: 117px;}
    .date-range-area .daterangepicker.show-calendar .drp-buttons {display: flex; gap: 8px; margin-top: auto; padding: 16px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 2; background: #fff;}
    .date-range-area .daterangepicker .drp-buttons .btn {margin-left: 0; padding: 4px 8px; flex: 1;}
    .date-range-area .daterangepicker .drp-buttons .btn.cancelBtn {width: 20px; flex: 0 0 auto; background-color: #fff; border-color: #000; color: #000;}
    .date-range-area .daterangepicker .drp-calendar {max-width: none;}
    .date-range-area .daterangepicker .drp-calendar thead tr:first-child th {font-size: 13px;}
    .date-range-area .daterangepicker:before, .date-range-area .daterangepicker:after {display: none;}
    .date-range-area .daterangepicker .calendar-table th, .date-range-area .daterangepicker .calendar-table td {font-size: 11px; padding: 4px 15px;}
    .date-range-area .daterangepicker td.active:not(.off)::before {width: 24px; height: 24px;}
    .date-range-area .daterangepicker td.in-range:not(.ends, .start-date, .end-date)::before {height: 24px;}
    .date-range-area .daterangepicker td.start-date + td.in-range:not(.end-date, .ends)::after {height: 24px; left: 0;}
    .date-range-area .daterangepicker td.in-range + td.end-date:not(.off)::after {height: 24px;}
}