@charset "utf-8";

/*=============== market ===============*/

/*market area*/
.mart .topArea .box_search {
    display: flex;
    align-items: center;
    height: 72px;
    border-bottom: 1px solid #e7ebef;
    background: #fff;
    padding: 0 12px;
    position: relative;
}
.mart .topArea .box_search input {
    height: 48px;
    line-height: 48px;
    margin-bottom: 0;
}
.mart .topArea .box_search button {
    display: flex;
    align-items: center;
    height: auto;
}
.mart .topArea .box_search .btn_search {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
}
header .btn_search .icon::before,
.mart .topArea .box_search .btn_search .icon::before {
    width: 20px;
    height: 20px;
    margin-left: 10px;
}
header .searchArea .btn_delete {
    right: 47px;
}
.mart .topArea .box_search .btn_delete {
    position: absolute;
    top: 50%;
    right: 57px;
    transform: translateY(-50%);
}

.mart .myWrap:nth-child(2) {
    border-top: 1px solid #e5e5e5;
}
.mart .myWrap > .txt_title {
    display: block;
    height: 64px;
    font-size: 1.063rem;
    font-weight: bold;
    text-indent: 20px;
    line-height: 64px;
    border-bottom: 1px solid #e5e5e5;
    background: #fff;
    margin-bottom: 14px;
}
.mart .myWrap > .txt_title .color {
    color: #fd5050;
    font-weight: bold;
}

.mart .martArea {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 3px 6px #0000001a;
    margin: 0 12px 12px 0;
}
.mart .myWrap.near .martArea {
    margin: 0 12px 12px;
}
.mart .martArea .filterWrap {
    border-bottom: 1px solid #e5e5e5;
    padding: 17px 0;
    margin: 0 4.26%;
}
.mart .martArea .filterWrap li {
    display: inline-block;
    color: #fd5050;
    font-size: 0.813rem;
    font-weight: bold;
    padding: 0 13px;
}
.mart .martArea .filterWrap li.none {
    color: #d3d3d3;
}
.mart .martArea .filterWrap li:first-child {
    padding-left: 0;
}
.mart .martArea .filterWrap li:nth-child(2) {
    border-left: 1px solid #8b8b8b;
    border-right: 1px solid #8b8b8b;
}
.mart .martArea .infoWrap {
    min-height: 78px;
    padding: 14px 4.26% 18px;
}
.mart .martArea .infoWrap .box_name .txt_title {
    display: block;
    font-size: 1.125rem;
    /* margin-bottom: 8px; */
}
.mart .martArea .infoWrap .box_name .txt_lct {
    color: #767676;
    font-size: 0.875rem;
    font-weight: 400;
}
.mart .martArea .infoWrap .box_point {
    text-align: right;
}
.mart .martArea .infoWrap .box_point span.numStyle strong {
    font-weight: bold;
}
.mart .martArea .infoWrap .box_point .box_badge {
    display: flex;
    align-items: center;
    background: #c8f0c7;
    border-radius: 6px;
    padding: 1px 7px;
    margin-top: 5px;
}
.mart .martArea .infoWrap .box_point .box_badge .badge.point {
    font-size: 0.625rem;
    padding: 0;
}
.mart .martArea .infoWrap .box_point .box_badge .badge.point > span {
    padding-left: 5px;
}
.mart .martArea .infoWrap .box_point .box_badge .icon-list-coupon {
    padding-left: 5px;
}
.mart .martArea .infoWrap .box_point .box_badge .icon-list-coupon::before {
    width: 18px;
    height: 12px;
}

/*mart slide*/
#martSlide .box_point {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}
#martSlide .box_point > span {
    display: inline-block;
    height: 20px;
    font-size: 0.625rem;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    border-radius: 6px;
    vertical-align: top;
    padding: 0 5px;
}
#martSlide .box_point .num_point {
    color: #429f3f;
    font-weight: bold;
    padding-left: 5px;
}
#martSlide .box_point .txt_point {
    color: #429f3f;
    background: rgba(72, 202, 69, 0.23);
}
#martSlide .box_point .txt_point .icon {
    vertical-align: middle;
    padding-left: 5px;
}
#martSlide .box_point .txt_point .icon::before {
    width: 18px;
    height: 12px;
}
.mart .martArea .timeWrap {
    padding: 0 4.26% 20px;
}
.mart .martArea .timeWrap ul {
    height: 36px;
    border-radius: 7px;
    background: #f7f7f7;
}
.mart .martArea .timeWrap ul li {
    line-height: 34px;
    box-sizing: border-box;
    padding: 0 16px;
    position: relative;
}
.mart .martArea .timeWrap ul li:last-child::before {
    content: "";
    width: 1px;
    height: 14px;
    background: #bdbdbd;
    position: absolute;
    top: 11px;
    left: 0;
}
.mart .martArea .timeWrap span {
    color: #4e4e4e;
    font-size: 0.75rem;
}
.mart .martArea .timeWrap span:first-child {
    font-weight: bold;
}
.mart .buttonArea {
    margin-top: 50px;
}

/*search mart 3*/
.mart .keywordWrap {
    background: #fff;
    padding-left: 4.26%;
}
.mart .keywordWrap li {
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #e7ebef;
    padding-right: 4.26%;
}
.mart .keywordWrap li span,
.mart .keywordWrap li strong {
    font-size: 0.938rem;
}
.mart .keywordWrap li .color {
    color: #f42d1f;
}
.mart .keywordWrap li .icon {
    display: inline-block;
}

/*none*/
.mart.none .contArea {
    text-align: center;
}
.mart.none .imgWrap {
    margin: 145px 0 45px;
}
.mart.none .txt_notice {
    color: #767676;
    font-weight: 400;
    line-height: 1.563rem;
}

/*=============== address ===============*/
.address .topArea .box_search {
    height: 7.63vh;
    line-height: 7.63vh;
    background: #f5f6f8;
    padding: 0 12px;
    position: relative;
}
.address .topArea .box_search input {
    margin-bottom: 0;
}
.address .topArea .box_search .btn_search {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
}
.address .addressWrap ul {
}
.address .addressWrap li {
    border-bottom: 1px solid #e7ebef;
    position: relative;
    padding: 2.46vh;
}
.address .addressWrap p.txt_address,
.address .box_address p.txt_address {
    width: 78.9%;
    color: #1c1c1c;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    margin-bottom: 2vh;
}
.address .addressWrap span.tag_3,
.address .box_address span.tag_3 {
    color: #1aafa0;
    font-size: 0.625rem;
    border: 1.2px solid #1aafa0;
    border-radius: 6px;
    padding: 3px 6px;
}
.address .addressWrap span.txt_address,
.address .box_address span.txt_address {
    color: #8b8b8b;
    font-size: 0.875rem;
}
.address .addressWrap .btn_close {
    color: #8b8b8b;
    font-size: 0.938rem;
    background: none;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
}

.address .box_address {
    position: relative;
    padding: 2.46vh;
}
.address .box_detail {
    height: 7.63vh;
    line-height: 7.63vh;
    padding: 0 12px;
}
.address .box_detail input {
    color: #1c1c1c;
    border: 1px solid #e7ebef;
    background: #f5f6f8;
    margin-bottom: 0;
}

/*=============== keyword search ===============*/
header .searchArea {
    width: calc(100% - 90px);
    height: 42px;
    position: relative;
    top: 10px;
    left: 40px;
}
header .searchArea input[type="text"] {
    border: none;
}
header .btn_search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
header .btn_delete {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
}
header .btn_barcode {
    margin-right: 10px;
}
header .btn_barcode .icon-barcode::before{
    width: 32px;
    height: 32px;
}
.keyword .contArea {
    max-height: 100%;
}
.keyword .contArea > .txt_title {
    height: 55px;
    color: #1c1c1c;
    font-weight: bold;
    line-height: 55px;
    border-bottom: 1px solid #e7ebef;
    background: #fff;
    padding: 0 4.26%;
}
.keyword .keywordWrap {
    height: 260px;
    overflow-y: auto;
    background: #f7f8f9;
}
.keyword .keywordWrap li {
    height: 52px;
    line-height: 52px;
    border-bottom: 1px solid #e7ebef;
    margin-left: 4.26%;
    padding-right: 4.26%;
}
.keyword .keywordWrap li .icon-btn-prev {
    display: inline;
}
.keyword .keywordWrap li .txt_goods {
    font-size: 0.938rem;
    font-weight: 400;
}
.keyword .keywordWrap li .box_date {
    width: 20%;
    text-align: right;
}
.keyword .keywordWrap li .box_date > span {
    color: #b7b7b7;
    font-size: 0.875rem;
}
.keyword .keywordWrap li .box_date .btn_delete {
    color: #b7b7b7;
    margin-left: 14px;
}
.keyword .keywordWrap li .color {
    color: #f42d1f;
    font-weight: bold;
}
.keyword.none .imgWrap {
    width: 147px;
    height: 133px;
    margin: 25px auto 15px;
}
.keyword.none .imgWrap img {
    width: 100%;
}
.keyword.none .txt_notice {
    color: #767676;
    font-size: 0.938rem;
    font-weight: 400;
    text-align: center;
    padding: 16px 0 20px;
}

/*none*/
.keyword.none .txt_notice > strong {
    color: #767676;
    font-weight: bold;
}
.keyword.none .buttonArea {
    left: 18%;
    padding: 0;
}
.keyword.none .buttonArea a {
    width: 64%;
    height: 44px;
}

/*=============== float area ===============*/
.floatArea.keyword {
    display: none;
    width: 100%;
    position: fixed;
    top: 60px;
}
.floatArea.keyword.active {
    display: block;
    height: calc(100% - 60px);
    z-index: 20;
}
.floatArea.keyword .bg_shadow {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
}
.floatArea.keyword .contArea {
    top: 0;
}

/*=============== result ===============*/
.result .topArea.filter {
    font-size: 0.875rem;
    position: relative;
}
.result .topArea .filterWrap,
.result .topArea .selectWrap {
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid #ebebeb;
}
.result .topArea .filterWrap > div,
.result .topArea .selectWrap > div,
.result .topArea .subWrap li > div > ul {
    display: flex;
    align-items: center;
}
.result .topArea .filterWrap > div {
    justify-content: space-between;
}
.result .topArea .filterWrap > div .btn_confirm {
    width: 51px;
    height: 27px;
    font-size: 0.813rem;
    font-weight: 500;
    border-radius: 8px;
    margin-right: 4.26%;
}
.result .topArea .filterWrap > div .btn_confirm.none {
    display: none;
}
.result .filterWrap .box_filter,
.result .selectWrap .box_selected {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 16px;
}
.result .selectWrap .box_selected .btn_close .icon {
    padding-left: 7px;
}
.result .selectWrap .box_selected .btn_close .icon::before {
    width: 8px;
    height: 8px;
}
.result .topArea .box_filter > li,
.result .topArea .box_selected > li,
.result .topArea .box_sort ul > li {
    align-items: center;
    height: 28px;
    color: #8b8b8b;
    line-height: 26px;
    font-size: 0.875rem;
    font-weight: 400;
    border: 1px solid #d3d3d3;
    border-radius: 8px;
    background: #fff;
    padding: 0 8px;
    margin-right: 6px;
}
.result .box_filter > li > strong {
}
.result .box_filter > li .num_sort {
    color: #555555;
    font-weight: 400;
    padding-left: 5px;
}
.result .box_filter > li .num_sort span {
    color: #fd5050;
    font-weight: 400;
    vertical-align: middle;
}
.result .box_filter > li .icon-filter-arr {
    padding-left: 5px;
}
.result .box_filter > li.select {
    color: #fd5050;
    border-color: #fd5050;
}
.result .selectWrap .box_selected > li {
    display: flex;
    align-items: center;
    background: #555555;
    border: none;
}
.result .selectWrap .box_selected span {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    vertical-align: top;
}
.result .selectWrap .box_selected .btn_close {
    font-size: 20px;
    color: #fff;
    margin-top: -4px;
}
.result .subWrap {
    display: none;
    width: 100%;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
}
.result .subWrap .box_sort > li {
    align-items: center;
    height: 54px;
    border-bottom: 1px solid #ebebeb;
}
.result .subWrap .box_sort .txt_sort {
    width: 60px;
    color: #1c1c1c;
    font-size: 1rem;
    border-right: 1px solid #e7ebef;
    margin-left: 4.26%;
}
.result .subWrap .box_sort > li > div {
    width: calc(84% - 32px);
    overflow-x: auto;
}
.result .subWrap .box_sort ul {
    display: flex;
    align-items: center;
}
.result .subWrap .box_sort ul > li.select {
    color: #fff;
    border: none;
    background: #555;
}
.result .closeArea {
    text-align: center;
    height: 24px;
    background: #fff;
}

.result .list_prod .box_order {
    padding: 0 10px;
}

.result .contArea .list_prod {
}

.result .contArea .list_prod li:nth-child(2n) {
    margin-right: 0;
}

/*주소찾기 신규 211229*/
.topArea .box_adress {
    border-bottom: 8px solid #e7ebef;
}
.topArea .box_adress .adress_btn .adress_badge.basic {
    color: #9f9f9f;
    background: #eaeaea;
}
.adress_list_wrap .adress_list {
    padding: 21px 20px;
    border-bottom: 1px solid #e7ebef;
    position: relative;
}
.adress_list_wrap .adress_list > a {
    margin-right: 25px;
}
.adress_list_wrap .adress_list .btn_setting {
    position: absolute;
    right: 21px;
    top: 20px;
}
.adress_list.--active .adress_detail {
    padding-left: 25px;
    position: relative;
}
.adress_list.--active .adress_detail:before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/icon/icon_adresslist_on.svg);
    position: absolute;
    left: 0;
    top: 0;
}

.box_detail .adress_list .adress_detail:before{
    height: 20px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    top: 2px;
}
.box_detail .adress_list .adress_road:after{
    line-height: 18px;
}

.adress_btn:not(:has(.setting)){
    margin: 0 0 10px;
    padding: 0 75px 0 0;
}
.adress_btn.flex:not(:has(.setting)){
    width: 100%;
    padding: 0 35px 0 0;
    flex-wrap: nowrap;
}
.adress_btn.flex .box_radioBtn.red{
    width: 100%;
}
.adress_btn .box_radioBtn.red .line1{
    margin: 1px 0 0;
    color: #FD5050;
}
.adress_btn .box_radioBtn.red input{
    display: none;
}
.adress_btn .box_radioBtn.red .icon_check{
    width: 16px;
    height: 16px;
    margin: 0 8px 2px 0;
    flex-shrink: 0;
    position: relative;
}
.adress_btn .box_radioBtn.red input:disabled + .icon_check{
    filter: grayscale(1);
    opacity: .5;
}

.box_adress .adress_btn:has(.dvyLocAs){
    justify-content: flex-start;
}
.box_adress .adress_btn:has(.dvyLocAs) .adress_badge{
    padding: 5px 10px 5px 9px;
    margin: 1px 0 0 10px;
    font-size: 11px;
    color: #FD5050 !important;
    border-radius: 3px;
    border-color: #FD5050;
    background: #fff !important;
}
.adress_list_wrap .adress_list .btn_setting{
    top: 22px;
    z-index: 9;
}
.box_adress .adress_list + .btn_setting{
    position: absolute;
    top: 17px;
    right: 20px;
}

.adress_list_wrap .adress_list{
    padding: 21px 1rem;
}
.adress_list_wrap .adress_list > a{
    margin-right: 0;
}
.adress_list .adress_detail:not(.defaultDvyAddr){
    margin-bottom: 0;
    padding: 0 0 0 24px;
    font-size: 0.9rem;
}
.adress_list .adress_road:not(.roadNameAddr, #addH4RoadPop){
    display: block;
}
.adress_list .adress_road#addH4RoadPop{
    margin: 5px 0 0;
}
.adress_list.--active .adress_detail{
    padding-left: 24px;
}
.adress_list.--active .adress_detail:before{
    display: none !important;
}

.btn_setting > button > span{
    color: #9F9F9F;
    font-size: 14px;
}
.btn_setting > button:nth-of-type(2)::before{
    content: "";
    display: inline-block;
    width: 1px;
    height: 16px;
    margin: 0 4px 0 5px;
    vertical-align: middle;
    background: #bcbcbc;
}

/* 상세주소 UI  */
.box_detail {
    border-bottom: 1px solid #e7ebef;
}
.box_detail .adress_list {
    padding-right: 21px;
    margin-bottom: 20px;
}
.box_detail .adress_list .adress_detail {
    padding-left: 22px;
    position: relative;
}
.box_detail .adress_list .adress_detail:before {
    content: "";
    display: block;
    width: 14px;
    height: 22px;
    background: url(../images/icon/icon_location.svg);
    position: absolute;
    left: 0;
    top: 0;
}
.box_detail .adress_list .adress_road:after {
    border: 1px solid #8b8b8b;
    color: #8b8b8b;
}

.box_check {
    padding: 22px 15px;
    border-bottom: 1px solid #e7ebef;
}
.box_check label {
    color: #555;
}
.notice_txt {
    padding-left: 19px;
    font-weight: 400;
    line-height: 15.6px;
    font-size: 0.75rem;
    color: #aaa;
    position: relative;
}
.notice_txt:before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    background: url(../images/icon/icon_notice_gray.svg) no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 0;
}

/*8/10 하단 버튼 추가*/
.mart .buttonArea.bottom {
    bottom: 0;
    padding: 15px 16px;
    margin-top: 0;
}