@charset "utf-8";

/*=============== promotion ===============*/
/*page1*/
#container.promotion {
    padding: 0;
}
.promotion .topArea {
    padding: 17.62% 14% 0;
    background: #fff;
    position: relative;
    z-index: 3;
}
/*.promotion .topArea::after {*/
/*content:'';*/
/*width:100%;*/
/*height:60px;*/
/*background:linear-gradient(to bottom, #fff, transparent);*/
/*position:absolute;*/
/*bottom:-40px;*/
/*left:0;*/
/*}*/
.promotion .topArea .txt_notice span {
    color: #070707;
    font-size: 1.438rem;
    font-weight: 300;
}
.promotion .topArea .txt_notice strong {
    display: block;
    color: #070707;
    font-size: 2.5rem;
    font-weight: 300;
    text-indent: -4px;
    padding: 5px 0 35px;
}

.promotion .contArea::after {
    content: "";
    width: 100%;
    height: 80px;
    background: linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0));
    position: absolute;
    top: 0;
    left: 0;
}
.promotion.desc .contArea::after {
    display: none;
}
.promotion .contArea {
    height: calc(100% - 107px);
    position: relative;
}
.promotion .contArea .imgWrap {
    position: absolute;
    top: -380px;
    left: 14%;
    animation: drop 5s ease-in-out forwards;
}
.promotion .contArea .imgWrap img {
    width: 100%;
}
@keyframes drop {
    0% {
        top: -380px;
    }
    100% {
        top: 100%;
    }
}
.promotion .contArea .bottomWrap {
    width: 100%;
    height: 134px;
    text-align: center;
    background: #f7f7f7;
    position: fixed;
    bottom: 0;
    left: 0;
}
.promotion .contArea .bottomWrap .icon {
    margin-top: -13px;
}

/*page2*/
.promotion.desc .content {
    height: 100%;
}
.promotion.desc .topArea {
    background: none;
}
.promotion.desc .topArea::after {
    display: none;
}
.promotion.desc .topArea p {
    padding-bottom: 14.4%;
}
.promotion.desc .contArea {
    height: calc(100vh - 210px);
}
.promotion.desc .waveWrap {
    width: 198px;
    height: 198px;
    margin: 0 auto;
    position: relative;
}
.promotion.desc .waveWrap .icon {
    position: relative;
    top: 54px;
    left: 54px;
    z-index: 3;
}
.promotion.desc .waveWrap span {
    position: absolute;
    top: 50%;
    left: 50%;
}
.promotion.desc .waveWrap .box_wave_1 {
    width: 126px;
    height: 126px;
    border-radius: 38px;
    background: rgba(255, 108, 108, 0.1);
    margin-top: -63px;
    margin-left: -63px;
    transform: scale(0);
    animation: wave2 2s ease infinite;
}
.promotion.desc .waveWrap .box_wave_2 {
    width: 160px;
    height: 160px;
    border-radius: 50px;
    background: rgba(255, 108, 108, 0.15);
    margin-top: -80px;
    margin-left: -80px;
    transform: scale(0);
    animation: wave2 2s ease infinite;
}
.promotion.desc .waveWrap .box_wave_3 {
    width: 198px;
    height: 198px;
    border-radius: 67px;
    background: rgba(255, 108, 108, 0.05);
    margin-top: -99px;
    margin-left: -99px;
    transform: scale(0);
    animation: wave2 2s ease infinite;
}
@keyframes wave2 {
    0% {
        transform: scale(0.3);
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.promotion.desc .contArea .txt_desc {
    width: 60%;
    color: #080808;
    font-size: 1.313rem;
    font-weight: 300;
    text-align: center;
    line-height: 1.938rem;
    margin: auto;
    padding-top: 4.06%;
}
.promotion.desc .buttonArea {
    position: absolute;
    top: auto;
    bottom: 80px;
    padding: 0;
}
.promotion.desc .buttonArea .btn_line {
    width: 61.6%;
    font-size: 1.188rem;
    box-shadow: 0 3px 6px #5a000033;
    background: #fff;
    margin: auto;
}

/*=============== index ===============*/
header.index {
    display: flex;
    justify-content: space-between;
    -webkit-box-pack: justify;
    align-items: center;
    -webkit-box-align: center;
    border-bottom: none;
}
header.index h1 {
    width: 110px;
    /* padding-left: 4.26%; */
    margin: 0 auto;
}
#martSelectModal header.index h1 {
    margin: initial;
}
header.index h1 img {
    width: 100%;
    filter: brightness(100);
}
header.index .btn_prev{
    position: relative;
    top: auto;
    transform: none;
}
header.index .btn_alarm{
    display: flex;
    width: 37px;
    height: 37px;
    justify-content: center;
    align-items: center;
    position: relative;
    right: 4px;
}
header.index .btn_alarm i{
    filter: brightness(100);
}
header.index .imgWrap {
    width: 50px;
    height: 20px;
    overflow: hidden;
    margin-right: 20px;
}
header.index .imgWrap img {
    height: 100%;
}
header.index .box_tooltip {
    display: flex;
    align-items: center;
    max-width: 176px;
    height: 50px;
    color: #ff6c6c;
    font-size: 0.75rem;
    text-align: center;
    line-height: 1rem;
    border: 1px solid #ff6c6c;
    border-radius: 12px;
    background: #fff;
    padding: 0 3.26%;
    position: absolute;
    top: 15px;
    left: 120px;
}
header.index .box_tooltip i {
    width: 9px;
    height: 10px;
    border-top: 2px solid #fff;
    position: absolute;
    bottom: -10px;
    left: 15px;
}
header.index .box_tooltip i::before,
header.index .box_tooltip i::after {
    content: "";
    width: 9px;
    height: 10px;
    position: absolute;
    top: -5px;
}
header.index .box_tooltip i::before {
    border-left: 1px solid #ff6c6c;
    transform: rotate(330deg);
    left: 1px;
}
header.index .box_tooltip i::after {
    border-right: 1px solid #ff6c6c;
    transform: rotate(30deg);
    right: 1px;
}

/*scroll*/
header.scroll {
    border-bottom: 1px solid #e0e0e0;
}
header.index.scroll .box_tooltip {
    /* display:none; */
    visibility: hidden;
}
header.index ~ #container .topArea {
    /*display:none;*/
}
header.index.scroll .topArea.sm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 54px;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
    position: fixed;
    top: 60px;
    left: 0;
    z-index: 12;
}
header.index.scroll .topArea.sm::after {
    display: none;
}
header.index.scroll .topArea.sm .btn_address {
    padding: 0;
    position: absolute;
    top: -55px;
    right: 20px;
    z-index: 12;
}
header.index.scroll .topArea.sm .btn_address span {
    color: #1c1c1c;
    font-size: 0.938rem;
    font-weight: 500;
}
header.index.scroll .topArea.sm .btn_address .icon {
    transform: inherit;
    filter: none;
    vertical-align: bottom;
}
header.index.scroll .topArea.sm .btn_address .icon::before {
    width: 17px;
    height: 17px;
    background: url("../images/icon/icon_index_address.svg") no-repeat;
}
header.index.scroll .topArea.sm .btn_option {
    display: flex;
    align-items: center;
    width: 70%;
}
header.index.scroll .topArea.sm .btn_option strong {
    color: #1c1c1c;
    font-size: 0.938rem;
}
header.index.scroll .topArea.sm .btn_option span {
    display: inline-block;
    color: #1c1c1c;
    font-size: 0.938rem;
    margin-left: 5px;
    margin-top: 0;
}
header.index.scroll .topArea.sm .btn_option strong::after {
    display: none;
}
header.index.scroll .topArea.sm .btn_option span::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 13px;
    background: url("../images/icon/icon_btn_prev.svg") no-repeat;
    background-size: contain;
    transform: rotate(270deg);
    margin-left: 10px;
    display: none;
}
header.index.scroll .topArea.sm .box_search {
    width: 90px;
    height: 30px;
    margin: 0;
    box-shadow: none;
    /* top: 11px;
    left: auto;
    right: 17px; */
}

header.index.scroll .topArea.sm .box_search .btn_search {
    /* color: #fd5050; */
    font-size: 0.813rem;
    line-height: 28px;
    padding: 0;
    text-align: center;
    position: relative;
    top: auto;
    transform: none;
    right: auto;
}
header.index.scroll .topArea.sm .box_search .btn_search .icon::before {
    width: 14px;
    height: 14px;
    padding-right: 5px;
    margin-left: -6px;
}

/*topArea*/
.index .topArea {
    height: auto;
    padding: 15px 4.26%;
    background: url("../images/img/img_home_main.svg") no-repeat;
    background-size: cover;
    position: relative;
    z-index: 10;
}
.index .topArea.sm {
    display: none;
}
.index.basic .topArea {
    background: none;
}
.index .topArea#mainBackground{
    border-bottom: 7px solid #F3F4F8;
}
/*.index.basic .topArea::after {*/
/*content:'';*/
/*width:238px;*/
/*height:98px;*/
/*background:url('../images/img/img_index_bg.png') no-repeat;*/
/*background-size:contain;*/
/*position:absolute;*/
/*right:0;*/
/*bottom:-41px;*/
/*}*/
.index .btn_address {
    max-width: calc(95.74% - 80px);
    height: 50px;
    padding: 0 4.26%;
    display: flex;
    align-items: center;
}
.index .btn_address::before {
    content: "";
    width: 20px;
    height: 20px;
    margin: 0 2px -1px -2px;
    background: url("/common/images/img/ico-location.svg") no-repeat center left / contain;
    display: none;
}
.index .btn_address button {
    margin: 0 0 0 10px;
    padding: 5px 6px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 5px;
    white-space: nowrap;
}
.index .btn_address span {
    color: #333;
    font-weight: 400;
    text-align: left;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
/* .index .btn_address .icon {
    transform: rotate(180deg) scale(0.7);
    filter: invert(32%) sepia(0%) saturate(24%) hue-rotate(176deg)
        brightness(99%) contrast(90%);
    margin-left: 5px;
} */
.index .btn_mymart{
    display: block;
    padding: 5px 7px 5px 9px;
    margin: 0 4.26% 0 0;
    font-size: 13px;
    line-height: 1.3;
    border: 1px solid #ddd;
    border-radius: 30px;
    white-space: nowrap;
}
.index .btn_mymart i{
    margin: 0 0 0 4px;
}
.index #mainBackground .dvy_info{
    margin: .5rem 0 0;
}
.index #mainBackground .dvy_info p, 
.index #mainBackground .dvy_info p span{
    font-size: .875rem;
    font-weight: 300;
    color: #ababab;
}
.index #mainBackground .dvy_info p{
    line-height: 1.3;
}
.index #mainBackground .dvy_info .flow_txt{
    display: inline-block;
    overflow: hidden;
}
.index #mainBackground .dvy_info .flow_txt p{
    animation: flow 6s infinite both linear;
}

@keyframes flow {
    0%{
        transform: translate(100%);
    }
    100%{
        transform: translateX(-100%);
    }
}

.modalArea.top.index .topArea {
    box-sizing: content-box;
}
.modalArea.top.index .topArea .btn_option {
    /*    padding:7px 0;*/
}
.index .btn_option {
    width: 70%;
}
.index .btn_option strong {
    font-size: 1.375rem;
}
.index .btn_option span {
    display: block;
    font-size: 1.375rem;
    margin-top: 5px;
}
.index .btn_option strong::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 7px;
    vertical-align: middle;
    background: url("../images/icon/icon_sub_arr.svg") no-repeat;
    background-size: contain;
    margin-left: 15px;
    margin-top: -3px;
}
.modalArea.index .btn_option strong::after {
    transform: rotate(180deg);
    margin-top: -5px;
}

.index .tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}
.index .tags .tag {
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 12px;
}
.index .tags .tag b {
    font-weight: 700;
    color: #fff;
}
.index .tags .tag.green {
    background-color: #48ca45;
    color: #139011;
}
.index .tags .tag.yellow {
    background-color: #ffbc10;
    color: #ee8f00;
}
.index .tags .tag.gray {
    background-color: #e7e7e7;
    color: #b4b4b4;
}

.index .alarmWrap {
    display: flex;
    padding: 0 5px;
    position: absolute;
    top: 15px;
    right: 0;
}
.index .alarmWrap li {
    vertical-align: top;
    padding: 0 15px;
    position: relative;
}
.index .alarmWrap li input {
    margin-right: 0;
}
.index .alarmWrap li .box_checkbox.like.gray2,
.index .alarmWrap li .box_checkbox.like.gray2 input[type="checkbox"],
.index .alarmWrap li .box_checkbox.like.gray2 .icon_check {
    width: 22px;
    height: 22px;
}
.index .alarmWrap li .icon-alarm.gray2::before {
    width: 20px;
    height: 25px;
    background-image: url("../images/icon/icon_home_alarm.png");
    margin-top: -1px;
}
.index .alarmWrap li .icon-alarm.gray2.on::before {
    background-image: url("../images/icon/icon_home_alarm_on.png");
}
.index .alarmWrap li:last-child::before {
    content: "";
    width: 1px;
    height: 16px;
    background: #b9b9b9;
    position: absolute;
    top: 4px;
    left: 0;
}

.index .box_search {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 30px);
    /* height: 36px; */
    margin: 20px 4.26%;
    border: 1px solid #eaeaea;
    border-radius: 21px;
    /* box-shadow: 0 3px 6px #00000029; */
    background: #fff;
    /* position: absolute;
    bottom: -18px;
    left: 4.26%; */
}

.index .box_search .btn_search {
    width: 100%;
    height: 100%;
    padding: 10px 20px;
    text-align: left;
    color: #7b7b7b;
    font-size: 0.938rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.index .box_search .btn_search .icon {
    margin: 0 4px 0 0;
    vertical-align: sub;
}
.index .box_search .btn_search .icon::before {
    width: 18px;
    height: 18px;
    padding-right: 5px;
    margin-left: -6px;
}

/*contArea*/
.index .bannerWrap {
    overflow: hidden;
    background: linear-gradient(to bottom, #f0f0f0 30%, #f7f8f900);
    padding: 37px 4.26% 11px;
}

.index .bannerWrap.bg_none {
    background: none;
    padding: 0 4.26% 19px;
}
.index #mainSlide {
}
.index #mainSlide .box_slide {
    height: 95px;
    border-radius: 12px;
}
.index #mainSlide .box_slide a {
    width: 100%;
    height: 100%;
}
.index #mainSlide .box_slide a img {
    width: 100%;
    border-radius: 12px;
}

.index .btn_confirm {
    display: block;
    color: #767676;
    font-size: 0.813rem;
    text-align: center;
    padding: 0 0 10px;
}
.index .store_info {
    display: flex;
    justify-content: space-between;
    margin: 12px 0 0;
    /* padding: 0 3.5%; */
    gap: 10px;
}
.index .store_info .btn_confirm {
    display: flex;
    flex: 1;
    padding: 10px 15px;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #333;
    background: #fff;
    border-radius: 4px;
    /* gap: 2px; */
    text-wrap: balance;
    box-shadow: 1px 1px 3px 1px #ABB6C040;
    position: relative;
}
/* .index .store_info .btn_confirm .icon {
    margin: 0 0 -2px;
} */
.index .store_info .btn_confirm img {
    display: block;
    width: 20px;
    height: 20px;
    /* padding: 1px 0 0; */
    margin: 0 15px 0 0;
    object-fit: contain;
}

@media screen and (max-width: 340px) {
    .index .store_info .btn_confirm {
        /* padding: 6px 10px 7px; */
        font-size: 13px;
    }
}
.index .btn_confirm .color {
    color: #fd5050;
}
.index .lnb {
    width: 100%;
    /* height: 145px; */
    /* background: linear-gradient(#f0f0f0, #f7f8f900); */
    /* padding: 37px 0 0; */
    margin-bottom: 2rem;
    position: relative;
}
.index .lnb > div {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4.26%;
}
.index .lnb ul {
    display: flex;
}
.index .lnb li a {
    border-radius: 12px;
    margin-right: 10px;
    /*background:#fff;*/
}
.index .lnb li:last-child a {
    margin-right: 16px;
}
.index .lnb .box_img {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 58px;
    height: 58px;
    border: 1px solid #c6c6c6;
    border-radius: 14px;
    box-shadow: 0 3px 6px #00000029;
    background: #fff;
}
.index .lnb .box_img img {
    width: 40px;
    height: 40px;
}
.index .lnb .box_img .btn_ham {
    width: 20px;
    height: 16px;
}
.index .lnb .txt_name {
    display: block;
    color: #2f2f2f;
    font-size: 0.781rem;
    text-align: center;
    margin-top: 7px;
    width: 58px;
}
.index .listWrap {
    background: #f4f4f4;
}
.index .listWrap .box_title {
    background: #fff;
    padding: 20px 4.26%;
    flex-wrap: nowrap;
}
.index .listWrap .box_title .txt_title {
    /* padding: 0 0 0 4px; */
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4rem;
    /* text-indent: 4px; */
    position: relative;
}
.index .listWrap .box_title .txt_title::before {
    content: "";
    width: 100%;
    height: 8px;
    background: #48ca45;
    opacity: 0.4;
    position: absolute;
    left: 2px;
    bottom: -4px;
    display: none;
}
.index .listWrap .box_title .txt_title.last-sale::before {
    content: "";
    width: 100%;
    height: 8px;
    background: #fd5050;
    opacity: 0.15;
    position: absolute;
    left: 4px;
    bottom: 4px;
}
.txt_title.last-sale {
    display: flex;
    align-items: center;
}
.index .listWrap .box_title .btn_more {
    min-width: 50px;
    line-height: 18px;
    color: #767676;
    font-size: 0.875rem;
}
.index .listWrap .box_title .btn_more i {
    margin: 0 0 3px;
}
.index .listWrap .sortWrap .box_sort {
    border: none;
    line-height: 30px;
    background: #fff;
}
.index .list_prod {
    background: #f4f4f4;
    padding: 14px 0;
}
.index .list_prod .txt_name {
    padding: 11px 8px 0;
    margin-bottom: 5px;
}
.index .list_prod .img_prod {
    padding: 0;
}
.index .list_prod > ul {
    display: flex;
    overflow-x: auto;
    padding: 0 4.26% 0;
}
.index .list_prod > ul:not(.dib-ul) > li {
    min-width: 160px;
}
.index .listWrap.sale .list_prod > ul {
    display: inline-block;
}
.index .listWrap.flow .list_prod > ul > li {
    display: block;
    float: left;
    width: calc(50% - 3px);
}
.index .list_prod.long > ul > li {
    width: calc(50% - 5px);
}
.index .listWrap .list_prod > ul > li{
    min-height: 0;
}
.index .listWrap .list_prod > ul > li a {
    width: 100%;
    /*width:166px;*/
    min-height: 0;
    padding: 13px 0px;
    margin-right: 6px;
}
.index .list_prod .box_order {
    padding: 7px 8px 0;
}
.index .list_prod .list_price {
    padding: 0 8px;
}

.index .listWrap .buttonArea {
    clear: both;
    padding-bottom: 46px;
    margin-bottom: 0;
}
.index .listWrap .buttonArea a {
    width: 59.73%;
    height: 52px;
    margin: auto;
}

@media screen and (max-width: 375px) {
    .index .list_prod .img_prod {
        padding: 50%;
    }
}

.index #eventSlide {
    padding-top: 24px;
    margin: 0 4.26%;
}
.index #eventSlide .box_slide {
    height: 95px;
    border-radius: 12px;
}
.index #eventSlide .box_slide a {
    width: 100%;
    height: 100%;
}
.index #eventSlide .box_slide a img {
    width: 100%;
    border-radius: 12px;
}
.index .listWrap.sale .list_prod li:nth-child(2n) {
    margin-right: 0;
}
.index .listWrap.sale .box_subFilter {
    padding: 18px 4.26% 0;
}
.index .btn_timeSale {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    position: fixed;
    right: 22px;
    bottom: 96px;
    background: #fd5050;
    z-index: 10;
}

/*index b*/
.index .martInfoWrap {
    background: #f4f4f4;
    padding-bottom: 19px;
}
.index .martInfoWrap > .introWrap {
    padding-bottom: 15px;
}
.index .martInfoWrap .introWrap .box_title {
    align-items: center;
    border-bottom: 1px solid #e7ebef;
    background: #fff;
    padding: 32px 8% 16px;
}
.index .martInfoWrap .introWrap .box_title .txt_title {
    font-size: 1.125rem;
}
.index .martInfoWrap .introWrap .box_title .icon {
    transform: rotate(90deg);
}
.index .martInfoWrap > .introWrap.close .box_info {
    height: 90px;
    overflow: hidden;
}
.index .martInfoWrap > .introWrap.close .box_title .icon {
    transform: rotate(270deg);
}
.index .martInfoWrap > .box_info {
    display: flex;
    align-items: end;
    background: #fff;
    margin-left: 4.26%;
    position: relative;
}
.index .martInfoWrap > .box_info:nth-child(2) {
    border-radius: 12px 0 0 0;
}
.index .martInfoWrap > .box_info:last-child {
    border-radius: 0 0 0 12px;
}
.index .martInfoWrap .intro {
    display: block;
    border-radius: 0;
    background: #fff;
    padding: 23px 8%;
    margin: 0;
}
.index .martInfoWrap .intro p {
    width: 255px;
    color: #555555;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding-bottom: 30px;
}
.index .martInfoWrap .box_info.box_intro p:last-child {
    padding-bottom: 0;
}
.index .box_info .icon_arrow {
    position: absolute;
    right: 18px;
    top: 23px;
}
.index .box_info .icon-btn-prev {
    transform: rotate(90deg);
}
.index .box_info.active .icon-btn-prev {
    transform: rotate(270deg);
}
.index .martInfoWrap .box_info .icon_info {
    display: flex;
    justify-content: center;
    width: 80px;
    height: 100%;
    margin-top: -4px;
    padding-top: 30px;
}
.index .martInfoWrap .box_info .list_info {
    width: calc(100% - 80px);
    border-bottom: 1px solid #eeeeee;
    padding: 30px 0;
}
.index .martInfoWrap .box_info .list_info span {
    display: block;
    font-size: 0.938rem;
    margin-bottom: 10px;
}
.index .martInfoWrap .box_info .list_info p {
    width: 208px;
    color: #717171;
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.375rem;
    margin-bottom: 20px;
}
.index .martInfoWrap .box_info .list_info p:last-child {
    margin-bottom: 0;
}
.index .martInfoWrap .box_info .list_info strong {
    display: block;
    color: #717171;
    font-size: 0.938rem;
}
.index .btn_timeSale {
    position: fixed;
    right: 22px;
    bottom: 96px;
}

/*index popup*/
.modalArea.top header {
    z-index: 15;
}
.modalArea.top .popWrap {
    width: 100%;
    border-radius: 0;
    top: 60px;
    transform: translateX(-50%);
}
.modalArea.top.index .topArea {
    height: 75px;
    background: #fff;
}
.modalArea.top.index .contArea {
    background: #f4f4f4;
    padding: 0 0 0 4.26%;
}
.modalArea.top .list_menu li {
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 24px 0 5px;
    position: relative;
}
.modalArea.top .list_menu li.select {
    display: flex;
    align-items: center;
}
.modalArea.top .list_menu li.select::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    vertical-align: middle;
    background: #f42d1f;
    margin-left: 15px;
}
.modalArea.top.index .list_menu li strong {
    color: #1c1c1c;
    font-size: 0.938rem;
}
.modalArea.top.index .list_menu li strong .icon-search {
    margin-right: 10px;
}
.modalArea.top.index .list_menu li.select strong {
    color: #f42d1f;
    font-weight: bold;
}
.modalArea.top.index .list_menu li .btn_martSearch {
    align-items: center;
}
.modalArea.top.index .list_menu li .icon-btn-prev {
    transform: rotate(180deg);
}
/* 2021-04-28 Delete
.modalArea.top.index .list_menu li:last-child {
    height:63px;
    border-bottom:none;
    padding-top:15px;
}
*/
.modalArea .closeArea {
    width: 100%;
    height: 24px;
    text-align: center;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background: #fff;
}

/*notice*/
.modalArea.notice .topArea {
    text-align: center;
    margin-top: 40px;
}
.modalArea.notice .topArea img {
    width: 52.9%;
}
.modalArea.notice .contArea {
    text-align: center;
    padding: 23px 0;
}
.modalArea.notice .contArea .txt_main {
    font-size: 1.063rem;
    line-height: 1.563rem;
}
.modalArea.notice .contArea .txt_desc {
    font-size: 0.813rem;
    line-height: 1.188rem;
    padding: 21px 15px;
}
.modalArea.notice .contArea .txt_alert {
    color: #767676;
    font-size: 0.688rem;
}
.modalArea.notice .txt_main span.color {
    color: #fd5050;
}

/*=============== reward pop ===============*/
.modalArea.reward .popWrap {
    min-height: 336px;
    border-radius: 24px 24px 0 0;
}
.modalArea.reward .contArea {
    text-align: center;
    border-radius: 24px 24px 0 0;
    padding: 20px 0 40px;
}
.modalArea.reward .imgWrap {
    margin: auto;
}
.modalArea.reward.motion .imgWrap.gif {
    margin-left: -16px;
    padding: 20px 0 40px;
}
.modalArea.reward.motion .imgWrap img {
    width: 60%;
}
.modalArea.reward .txt_notice {
    display: block;
    font-size: 1.125rem;
    padding: 0 75px;
}
.modalArea.reward .txt_desc {
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0 75px;
    margin-top: 10px;
}

/*=============== error 404 ===============*/
.modalArea.error .popWrap {
    height: calc(100% - 60px);
    overflow-y: auto;
    background: #f4f4f4;
    padding-bottom: 79px;
}
.modalArea.error .contArea {
    text-align: center;
    background: #f4f4f4;
    position: relative;
    top: 60px;
}
.modalArea.error .contArea > .txt_title {
    color: #1c1c1c;
    font-size: 1.25rem;
    font-weight: bold;
    padding: 91px 0 10px;
}
.modalArea.error .contArea > .txt_desc {
    color: #464646;
    font-weight: 400;
    line-height: 1.5rem;
    padding: 0 8%;
}
.modalArea.error .contArea .imgWrap {
    margin: 9.3% auto 11.96%;
}
.modalArea.error .contArea .imgWrap img {
    width: 48.8%;
}
.modalArea.error .csArea p,
.modalArea.error .csArea a {
    color: #717171;
    font-size: 0.813rem;
    padding: 0 20px;
}
.modalArea.error .buttonArea .btn_prev {
    margin-bottom: 10px;
}
.modalArea.error .csArea {
    margin-bottom: 20px;
}

/*=============== smart setting ===============*/
.modalArea.smartSet {
    text-align: center;
}
.modalArea.smartSet .popWrap {
    width: 67.2%;
    padding: 21px 0 24px;
    box-shadow: 0 3px 6px #00000029;
}
.modalArea.smartSet .topArea > .txt_title {
    font-size: 0.875rem;
    font-weight: bold;
    padding: 0;
}
.modalArea.smartSet .contArea .selectWrap button {
    margin: 0 2.93%;
}
.modalArea.smartSet .contArea .txt_notice {
    color: #8b8b8b;
    font-size: 0.75rem;
    font-weight: 400;
    padding-top: 17px;
}
.modalArea.smartSet .buttonArea {
    margin: 0;
}
.modalArea.smartSet .buttonArea a {
    color: #4278de;
    font-size: 0.813rem;
    font-weight: 400;
}

/*=============== notice psw ===============*/
.modalArea.psw .btn_close {
    position: absolute;
    top: 30px;
    right: 28px;
}
.modalArea.psw .contArea > .txt_title {
    color: #1c1c1c;
    font-size: 1.125rem;
    font-weight: bold;
    padding: 30px 8.26% 24px;
}
.modalArea.psw .contArea > p {
    color: #717171;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.313rem;
    padding: 0 8.26% 25px;
}
.modalArea.psw .contArea > p:last-child {
    padding-bottom: 0;
}
.modalArea.psw .contArea .imgWrap {
    text-align: right;
    padding-right: 32px;
}
.modalArea.psw .buttonArea {
    clear: both;
}
.modalArea.psw .buttonArea a {
    height: 48px;
    margin-top: 0;
}
.modalArea.psw button.btn_date {
    color: #747474;
    font-size: 0.875rem;
    padding: 0 4.26%;
}
.modalArea.psw footer {
    background: #ededed;
    padding: 20px 4.26% 50px;
    position: relative;
    top: 32px;
}
.modalArea.psw li {
    color: #8b8b8b;
    font-size: 0.625rem;
    line-height: 1.125rem;
}

/*=============== time sale ===============*/
.modalArea.timeSale .popWrap {
    width: 74.4%;
    top: 60%;
}
.modalArea.timeSale .topArea {
    align-items: center;
    padding: 19px 6.66% 6px;
}
.modalArea.timeSale .topArea > .txt_title {
    color: #fd5050;
    font-size: 0.813rem;
    text-align: center;
    padding: 0;
}
.modalArea.timeSale .topArea .timeWrap {
    color: #fd5050;
    font-size: 1.25rem;
    font-weight: bold;
    text-align: center;
    margin-top: 5px;
}
.modalArea.timeSale .contArea {
    border-radius: 0 0 12px 12px;
    padding: 0;
}
.modalArea.timeSale .topArea .timeWrap.limit {
    font-size: 1.125rem;
    font-weight: bold;
    text-align: center;
}

#timeSaleSlide {
    position: relative;
}
#timeSaleSlide::before,
#timeSaleSlide::after {
    content: "";
    width: 16px;
    height: 100%;
    background: #fff;
    position: absolute;
    top: 0;
}
#timeSaleSlide::before {
    left: 0;
}
#timeSaleSlide::after {
    right: 0;
}
#timeSaleSlide .box_slide {
    width: 95%;
    margin-right: 11px;
    position: relative;
}
#timeSaleSlide .box_slide:last-child {
    margin-right: 0;
}

#timeSaleSlide .box_slide .imgWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120px;
    border: 1px solid #e7ebef;
    border-radius: 12px;
}
#timeSaleSlide .box_slide .imgWrap img {
    width: 70%;
}
#timeSaleSlide .txt_title {
    width: 70%;
    font-size: 0.75rem;
    line-height: 1rem;
    padding: 10px 0 5px;
}
#timeSaleSlide .list_price .num_price {
    font-size: 0.875rem;
    font-weight: 400;
    padding-right: 5px;
}
#timeSaleSlide .list_price .num_price strong {
    font-size: 0.75rem;
    font-weight: 500;
}
#timeSaleSlide .list_price .num_disc {
    color: #8b8b8b;
    font-size: 0.75rem;
    font-weight: 400;
    text-decoration: line-through;
}
#timeSaleSlide .list_price .num_disc strong {
    color: #8b8b8b;
    font-size: 0.625rem;
    vertical-align: middle;
}
#timeSaleSlide .icon_time {
    width: 36px;
    position: absolute;
    right: 0;
    bottom: 0;
}
#timeSaleSlide .icon_time .icon-sale-cart::before {
    width: 36px;
    height: 36px;
    background-size: contain;
}
#timeSaleSlide .icon_time span {
    color: #fd5050;
    font-size: 0.563rem;
    position: relative;
    top: -5px;
}
#timeSaleSlide .slick-dots li.slick-active {
    background: #fd5050;
}
.modalArea.timeSale .buttonArea {
    margin: 0;
}
.modalArea.timeSale .buttonArea .btn_icon {
    position: absolute;
    bottom: -25px;
    right: -25px;
}

/*=============== box coupon ===============*/
.box_coupon {
    padding: 0 20px;
}
.box_coupon > div {
    /*display:none;*/
}
.box_coupon > div.active {
    display: block;
}
.box_coupon li {
    border: 1px solid #e7ebef;
    padding: calc(2.46vh - 1px) 19px;
    box-shadow: 0 2px 10px #00000014;
    position: relative;
}
.box_coupon li.select {
    border: 1.5px solid #48ca45;
}
.box_coupon .box_tag.sm .tag {
    font-weight: 400;
}
.box_coupon .box_tag .tag {
    display: inline-block;
    font-size: 0.625rem;
    border-radius: 9px;
    padding: 3px 5px;
}
.box_coupon .box_tag .tag.gray.fill {
    color: #363636;
    background: #f5f6f8;
}
.box_coupon .box_tag .tag.green.fill {
    color: #fff;
    background: #48ca45;
}
.box_coupon .txt_title {
    display: block;
    color: #363636;
    font-size: 1.125rem;
}
.box_coupon .txt_desc {
    width: 50%;
    color: rgba(0, 0, 0, 0.3);
    font-size: 0.813rem;
    line-height: 1.25rem;
    margin-bottom: 3.07vh;
}
.box_coupon .img_order {
    width: 79px;
    height: 59px;
    position: absolute;
    top: 5.78vh;
    right: 22px;
}
.box_coupon .img_order img {
    width: 100%;
}
.box_coupon .num_date {
    display: block;
    color: #b2b2b2;
    font-size: 0.75rem;
    border-top: 1px dashed #e7ebef;
}
/*.box_coupon .btn_down {*/
/*color:#48CA45;*/
/*font-size:0.625rem;*/
/*border:1px solid #48CA45;*/
/*border-radius: 11px;*/
/*background:none;*/
/*padding:5px 10px;*/
/*}*/

/*=============== print list ===============*/
header.print .showBtnArea {
    position: absolute;
    top: 24px;
    right: 19px;
}
header.print .showBtnArea .box_tooltip {
    width: 154px;
    height: 30px;
    color: #fff;
    font-weight: 400;
    text-align: center;
    line-height: 30px;
    border-radius: 12px;
    background: #ff6c6c;
    position: absolute;
    bottom: -50px;
    right: -6px;
}
header.print .showBtnArea .box_tooltip::after {
    content: "";
    border-bottom: 8px solid #ff6c6c;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    position: absolute;
    top: -6px;
    right: 20px;
}
header.print .showBtnArea .box_tooltip strong {
    color: #fff;
    font-weight: bold;
}
.modalArea.full.print .popWrap {
    height: calc(100% - 60px);
}
.modalArea.print .imgWrap {
    width: 100%;
    height: 100%;
    background: tomato;
}

/*=============== barcode ===============*/
/*.modalArea.barcode {*/
/*background:linear-gradient(to top, #F0F0F0 10%, #F7F8F900 15%);*/
/*}*/
.modalArea.full.barcode {
    height: calc(100% - 75px);
    bottom: -100%;
    background: #fff;
}
.modalArea.full.barcode header {
    /*position:absolute;
    position: fixed;
}
.modalArea.full.barcode #modalBtGnb {
    position:fixed;
}
.modalArea.barcode .popWrap {
    height:calc(100vh - 139px);
    /*background:linear-gradient(to top, #F0F0F0 10%, #F7F8F900 15%);*/
    /*padding-bottom:60px;*/
}
.modalArea.barcode .popWrap::before {
    content: "";
    width: 100%;
    height: 120px;
    position: fixed;
    bottom: 60px;
    left: 0;
    background: linear-gradient(to top, #f0f0f0, #f7f8f900);
    display: none;
}
.modalArea.barcode .popWrap .contArea {
    /*margin-top:61px;*/
    background: transparent;
}
.modalArea.barcode header {
    border-bottom: none;
}
.modalArea.barcode .box_barcode {
    width: 65.3%;
    margin: auto;
}
.modalArea.barcode .box_barcode .txt_member {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5px;
}
.modalArea.barcode .box_barcode .txt_member.num {
    justify-content: flex-end;
}
.modalArea.barcode .box_barcode .txt_member .txt_name {
    font-size: 0.875rem;
}
.modalArea.barcode .box_barcode .txt_member .txt_name strong {
    font-size: 1.063rem;
}
.modalArea.barcode .box_barcode .txt_desc {
    color: #919191;
    font-size: 0.688rem;
    line-height: 1.063rem;
    margin-top: 6px;
    text-align: center;
    text-wrap: balance;
}
.modalArea.barcode .icon_barcode {
    display: block;
    height: 44px;
}
.modalArea.barcode .icon_barcode img {
    width: 100%;
}
.modalArea.barcode .icon_barcode img.gray {
    filter: invert(77%) sepia(85%) saturate(1%) hue-rotate(9deg)
        brightness(102%) contrast(93%);
}
.modalArea.barcode .num_barcode,
.modalArea.barcode .txt_barcode {
    font-size: 0.75rem;
    font-weight: 500;
}
.modalArea.barcode .box_point {
    /*padding:54px 16.8% 46px;*/
    padding: 30px 15.7%;
}
.modalArea.barcode .box_mart {
    position: relative;
}
.modalArea.barcode .box_mart .txt_name {
    font-size: 0.938rem;
}
.modalArea.barcode .box_mart .txt_name strong {
    display: block;
    font-size: 1.25rem;
    padding-bottom: 10px;
}
.modalArea.barcode .box_mart .txt_name strong::after {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fd5050;
    border-left: 2px solid #fd5050;
    margin: 0 0 4px 10px;
    transform: rotate(225deg);
    transition: 0.3s;
}
.modalArea.barcode .box_mart .txt_name strong.revers::after {
    margin: 0 0 0 10px;
    transform: rotate(45deg);
}
.modalArea.barcode .box_point .list_point {
    /* border-top:2px solid #000; */
    padding-top: 15px;
    justify-content: flex-start;
    gap: 10px;
    /* margin-top:24px; */
}
.modalArea.barcode .box_point .txt_notice {
    display: block;
    color: #8b8b8b;
    font-size: 0.813rem;
    margin-top: 10px;
}
.modalArea.barcode .box_point .num_point {
    display: block;
    color: #222222;
    font-size: 1.75rem;
}
.modalArea.barcode .box_point .num_point strong {
    color: #fd5050;
    font-weight: 600;
    /* font-size:1.875rem; */
    margin-right: 5px;
}
.modalArea.barcode .box_point .btn_refresh {
}
.modalArea.barcode .box_option {
    padding: 0 8.8% 49px;
}
.modalArea.barcode .box_option li {
    width: 33.33%;
    position: relative;
}
.modalArea.barcode .box_option li:nth-child(2)::before {
    content: "";
    width: 1px;
    height: 26px;
    background: #eaeaea;
    position: absolute;
    top: 14px;
    left: 0;
}
.modalArea.barcode .box_option li:nth-child(2)::after {
    content: "";
    width: 1px;
    height: 26px;
    background: #eaeaea;
    position: absolute;
    top: 14px;
    right: 0;
}
.modalArea.barcode .box_option li.new .icon::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fd5050;
    position: absolute;
}
.modalArea.barcode .box_option a {
    font-size: 0.75rem;
    text-align: center;
}
.modalArea.barcode .box_option .icon {
    display: block;
    height: 29px;
    margin-bottom: 10px;
    align-content: center;
}
.modalArea.barcode .slideWrap {
    position: relative;
}
.modalArea.barcode .slideWrap .txt_coupon {
    /*height:172px;
    background:linear-gradient(#F7F8F900 40%, #F0F0F0);*/
    padding: 5px 4.26%;
}
.modalArea.barcode .slideWrap .txt_coupon span {
    color: #363636;
    font-size: 0.813rem;
    font-weight: bold;
}
.modalArea.barcode .slideWrap .txt_coupon span:first-child {
    display: block;
    margin-bottom: 10px;
}
.modalArea.barcode .slideWrap .txt_coupon span strong {
    font-size: 1.625rem;
    font-weight: bold;
}
#couponSlide {
    width: 100%;
    overflow-x: auto;
    position: absolute;
    top: 0;
    left: 0;
    padding: 30px 0 50px;
}
#couponSlide .couponWrap {
    display: flex;
    padding: 0;
    /*margin-left: 120px;*/
    margin-left: 10px;
}
#couponSlide .box_slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 220px;
    height: 145px;
    /* border:1px solid #D3D3D3; */
    border-radius: 6px;
    vertical-align: top;
    overflow: hidden;
    /* background:#fff; */
    padding: 10px 5px;
    margin: 0 4px;
    position: relative;
}
#couponSlide .box_slide.blank {
    /*position: fixed;*/
    min-width: 100px;
    border: 1px solid transparent;
    background: none;
}
#couponSlide .box_slide.blank_end {
    min-width: 0;
    margin-left: -5px;
    border: 1px solid transparent;
    background: none;
}
.modalArea.barcode .slideWrap .txt_coupon .go_coupon {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 6px;
}
.modalArea.barcode .slideWrap .txt_coupon .go_btn {
    font-size: 1rem;
}
.modalArea.barcode .slideWrap .txt_coupon .coupon_tit {
    padding-bottom: 45px;
}

.modalArea.barcode .slideWrap .txt_coupon.active {
    position: fixed;
}
#couponSlide .box_slide .imgWrap {
    width: 100%;
    height: 100%;
    margin: 0;
}
#couponSlide .box_slide .imgWrap img {
    width: 100%;
    height: 100%;
}
#couponSlide .box_slide .box_tag {
    position: absolute;
    top: 22px;
    left: 20px;
}
#couponSlide .box_slide .box_tag > span {
    display: inline-block;
    height: 16px;
    line-height: 14px;
    font-size: 0.563rem;
    font-weight: bold;
    border-radius: 6px;
    vertical-align: top;
    padding: 0 5px;
}
#couponSlide .box_slide .box_tag .tag_fill {
    color: #fff;
    background: #fd5050;
}
#couponSlide .box_slide .box_tag .tag_fill.black {
    background: #000;
}
#couponSlide .box_slide .box_tag .tag_line {
    border: 1px solid #000;
}

#couponSlide .box_slide .box_title {
    width: 100%;
    padding: 5px 15px 0;
}
#couponSlide .box_slide .box_title .txt_title {
    font-weight: bold;
    padding: 0;
}
#couponSlide .box_slide .box_title .num_price {
    display: block;
    color: #ff1d1d;
    font-size: 0.938rem;
    font-weight: bold;
    padding-top: 10px;
}
#couponSlide .box_slide .box_title .num_price span {
    color: #ff1d1d;
    font-size: 1.25rem;
    font-weight: bold;
}
#couponSlide .box_slide .num_date {
    color: #8b8b8b;
    font-size: 0.625rem;
    position: absolute;
    bottom: 20px;
    left: 20px;
}

@media only screen and (max-device-height: 736px) {
    .modalArea.barcode .popWrap {
        /*height:calc(100% - 60px);*/
        /* height:calc(100% - 20px);  */
        height: auto;
    }
    .modalArea.barcode .popWrap .contArea {
        /* margin-bottom: 15.52%; */
    }
    .modalArea.barcode2 .popWrap .contArea {
        margin-bottom: 19.64%;
    }
    .modalArea.barcode.barcode3 .box_barcode {
        margin-top: 4.87%;
    }
    .modalArea.barcode .slideWrap {
        /*display:none;*/
    }
    .modalArea.barcode .slideWrap #couponSlide {
        position: relative;
    }
    .modalArea.barcode.barcode3 .imgWrap {
        width: 40%;
        margin: 0 auto 5.25%;
    }
}

/*gnb*/
.barcode #modalBtGnb,
.barcode2 #modalBtGnb {
    padding: 0 45px;
}

.barcode #modalBtGnb li:nth-child(2) .icon,
.barcode2 #modalBtGnb li:nth-child(2) .icon {
    margin-top: -23px;
}
.barcode #modalBtGnb li:nth-child(3) .icon,
.barcode2 #modalBtGnb li:nth-child(3) .icon {
    margin-top: 0;
}

.barcode3 #modalBtGnb li {
    margin: auto;
}
.barcode3 #modalBtGnb li .icon {
    margin-top: -23px;
}
.barcode3 #modalBtGnb li:nth-child(2) .icon {
    margin-top: 0;
}

.barcode2 #modalBtGnb .btn_to,
.barcode #modalBtGnb .btn_to {
    margin-top: 0;
}
.barcode2 #modalBtGnb .btn_to .icon-gnb-pop::before,
.barcode #modalBtGnb .btn_to .icon-gnb-pop::before {
    width: 70px;
    height: 70px;
    background-image: url("../images/icon/menu/icon_gnb_pop.png");
}
.barcode2 #modalBtGnb .btn_to .icon-gnb-pop::after,
.barcode #modalBtGnb .btn_to .icon-gnb-pop::after {
    display: none;
}

/*menu*/
.modalArea.barcode .box_martName,
.modalArea.barcode2 .box_martName {
    width: 100%;
    border: 1px solid #f4f4f4;
    border-radius: 5px;
    background: #fff;
    box-shadow: 1px 3px 9px 4px #98a8ae14;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 3;
}
.modalArea.barcode .list_menu li,
.modalArea.barcode2 .list_menu li {
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #f4f4f4;
    padding: 0 24px 0 5px;
    margin: 0 16px;
    position: relative;
}
.modalArea.barcode .list_menu li strong,
.modalArea.barcode2 .list_menu li strong {
    color: #1c1c1c;
    font-size: 0.938rem;
    font-weight: 400;
}
.modalArea.barcode .list_menu li.select strong,
.modalArea.barcode2 .list_menu li.select strong {
    /* color: #F42D1F; */
    font-weight: 600;
}
.modalArea.barcode .list_menu li.select::after,
.modalArea.barcode2 .list_menu li.select::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 7px;
    /* border-radius: 50%; */
    vertical-align: middle;
    /* background: #F42D1F; */
    border-top: 1px solid #fd5050;
    border-right: 1px solid #fd5050;
    /* margin-left: 15px; */
    transform: rotate(135deg) translateY(calc(50% + 4px));
}
/*.modalArea.barcode .list_menu li.select::after,*/
/*.modalArea.barcode2 .list_menu li.select::after {*/
/*content:'';*/
/*width:15px;*/
/*height:13px;*/
/*background:url('../images/icon/icon_sel_menu.svg') no-repeat;*/
/*position:absolute;*/
/*top:17px;*/
/*right:0;*/

/*}*/

.modalArea.barcode .list_menu li a,
.modalArea.barcode2 .list_menu li a {
    display: inline-block;
}

/*.modalArea.barcode .list_menu li.select::after,*/
/*.modalArea.barcode2 .list_menu li.select::after {*/
/*content:'';*/
/*display:inline-block;*/
/*width:7px;*/
/*height:7px;*/
/*border-radius:50%;*/
/*vertical-align:middle;*/
/*background:#F42D1F;*/
/*margin-left:5px;*/
/*}*/
.modalArea.barcode .list_menu li:last-child,
.modalArea.barcode2 .list_menu li:last-child {
    border-bottom: none;
}
.modalArea.barcode .closeArea,
.modalArea.barcode2 .closeArea {
    border-bottom: none;
}

/*=============== barcode2 ===============*/
.modalArea.full.barcode2 {
    height: 100%;
    bottom: -100%;
    background: #fff;
}
.modalArea.full.barcode2 header {
    position: absolute;
}
.modalArea.full.barcode2 #modalBtGnb {
    position: fixed;
}
.modalArea.barcode2 .popWrap {
    top: 0;
}
.modalArea.barcode2 .topArea {
    padding-top: 25px;
    position: relative;
}
.modalArea.barcode2 .topArea > .btn_close {
    position: absolute;
    top: 29px;
    right: 25px;
}
.modalArea.barcode2 .box_tab {
    height: 50px;
    border-bottom: none;
    padding: 0 8.53%;
}
.modalArea.barcode2 .box_tab li {
    width: 50%;
    line-height: 50px;
    text-align: left;
}
.modalArea.barcode2 .box_tab li.active::after {
    width: 90%;
    bottom: 0;
}
.modalArea.full.barcode2 .popWrap .contArea {
    height: calc(100% - 103px);
    overflow-y: auto;
}
.modalArea.barcode2 .couponWrap {
    height: 100%;
    background: #f4f4f4;
    overflow-y: auto;
    padding: 0 0 159px;
}
.modalArea.barcode2 .box_subFilter .selectWrap.sub_filter {
    min-width: auto;
    height: 26px;
    line-height: 26px;
}
.modalArea.barcode2 .selectWrap.sub_filter .list_select > div {
    text-align: left;
}
.modalArea.barcode2 .couponWrap .down {
    width: 72px;
    height: 26px;
    border: 1px solid #fc6b6b;
    border-radius: 8px;
    font-size: 0.688rem;
    background: #ff6c6c;
}
.modalArea.barcode2 .couponWrap .down .icon::before {
    width: 12px;
    height: 12px;
    margin-left: 5px;
}
.modalArea.barcode2 .couponWrap .end {
    color: #8b8b8b;
    border: 1px solid #b4b4b4;
    background: none;
}
.modalArea.barcode2 .couponWrap .box_coupon {
    padding: 0 4.26%;
}
.modalArea.barcode2 .couponWrap .box_coupon li {
    align-items: center;
    min-height: 148px;
    height: auto;
    border-color: #c6c6c6;
    padding: 0;
    background: #fff;
    position: relative;
}
.modalArea.barcode2 .infoWrap {
    padding-left: 9.62%;
}
.modalArea.barcode2 .infoWrap .box_badge .badge {
    height: 12px;
    font-size: 0.5rem;
    line-height: 12px;
}
.modalArea.barcode2 .infoWrap .txt_desc {
    color: #8b8b8b;
    font-size: 0.688rem;
}
.modalArea.barcode2 .infoWrap .txt_title {
    font-size: 1.125rem;
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
}
.modalArea.barcode2 .infoWrap .txt_title span {
    color: #363636;
    font-size: 1.25rem;
    font-weight: bold;
}
.modalArea.barcode2 .infoWrap .num_date {
    font-size: 0.625rem;
    border-top: none;
}
.modalArea.barcode2 .downWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25.36%;
    height: 100%;
    font-size: 0.688rem;
    text-align: center;
    border-left: 1px dashed #e0e0e0;
    position: absolute;
    right: 0;
    top: 0;
}
.modalArea.barcode2 .downWrap .icon_down {
    display: block;
    width: 22px;
    height: 22px;
    border: 1.5px solid #ff6c6c;
    border-radius: 50%;
    margin: auto;
}
.modalArea.barcode2 .download .icon_down {
    border: none;
    margin-bottom: 3px;
}
.modalArea.barcode2 .download .icon_down .icon::before {
    width: 23px;
    height: 23px;
}
.modalArea.barcode2 .downWrap .txt_down {
    display: block;
    color: #ff6c6c;
    padding: 5px 0;
}
.modalArea.barcode2 .downWrap .txt_date {
    color: #8b8b8b;
}
.modalArea.barcode2 .box_coupon .btn_more {
    display: block;
    font-size: 0.875rem;
    color: #767676;
    margin: 34px auto 0;
}

/*m coupon*/
.modalArea.barcode2 .couponWrap .box_coupon .imgWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 74.64%;
    height: 100%;
}
.modalArea.barcode2 .couponWrap .box_coupon .imgWrap img {
    width: 100%;
}

/*used*/
.modalArea.barcode2 .couponWrap .box_coupon li.used {
    box-shadow: none;
}
.modalArea.barcode2 .used .infoWrap span,
.modalArea.barcode2 .used .infoWrap strong {
    color: #a3a3a3;
}
.modalArea.barcode2 .used .infoWrap .box_badge .badge {
    color: #fff;
    background: #a3a3a3;
}
.modalArea.barcode2 .used .downWrap {
    background: #a3a3a3;
    border: none;
    border-radius: 0 6px 6px 0;
}
.modalArea.barcode2 .used .downWrap .icon_down {
    border-color: #e0e0e0;
}
.modalArea.barcode2 .used .downWrap .txt_down {
    color: #e0e0e0;
}

/*menu*/
.modalArea.barcode2 .box_mart {
    width: 100%;
    padding: 0 8.53% 25px;
}
.modalArea.barcode2 .box_martName {
    border-color: #e0e0e0;
    top: 100%;
}

/*=============== barcode3 ===============*/
.modalArea.barcode .contArea > .box_title {
    display: block;
    font-weight: bold;
    padding: 58px 0 24px;
    margin: 0 16.8% 16px;
    border-bottom: 2px solid #000;
}
.modalArea.barcode3 .contArea > .box_title {
    padding-top: 10.39%;
}
.modalArea.barcode3 .box_benefit {
    padding: 0 16.5% 10.78%;
}
.modalArea.barcode .box_benefit strong {
    font-size: 1.063rem;
    font-weight: bold;
}
.modalArea.barcode .box_benefit p {
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.5rem;
}
.modalArea.barcode .box_option {
    padding-bottom: 10.78%;
    border-bottom: 6px solid #f3f4f8;
}
.modalArea.barcode .imgWrap {
    width: 54.4%;
    margin: 0 auto 42px;
}
.modalArea.barcode .imgWrap img {
    width: 100%;
}
.modalArea.barcode .buttonArea {
    padding: 0 16%;
    left: 0;
}
.modalArea.barcode .buttonArea .btn {
    width: 100%;
    height: 44px;
    font-size: 0.875rem;
    margin-bottom: 12px;
}
.modalArea.barcode .buttonArea .btn span {
    color: #fff;
    font-size: 0.875rem;
    font-weight: bold;
}

/*=============== tag pay ===============*/
.modalArea.tagPay .popWrap {
    min-height: 336px;
    border-radius: 24px 24px 0 0;
}
.modalArea.tagPay .contArea {
    text-align: center;
    border-radius: 24px 24px 0 0;
    padding: 20px 0;
}
.modalArea.tagPay p {
    font-size: 1.375rem;
    line-height: 1.875rem;
    padding-top: 35px;
}
.modalArea.tagPay .imgWrap {
    padding: 52px 0 39px;
}
.modalArea.tagPay .buttonArea {
    width: 67.73%;
    margin: 0 auto 40px;
    padding: 0;
}
.modalArea.tagPay .buttonArea .btn {
    height: 44px;
    color: #919191;
    border: 2px solid #c5c5c5;
    border-radius: 10px;
    background: #fff;
}

/*=============== g point ===============*/
.modalArea.gPoint .popWrap {
    z-index: 21;
}
.modalArea.gPoint .topArea {
    display: flex;
    text-align: center;
    justify-content: flex-end;
    height: 64px;
    padding-right: 22px;
}
.modalArea.gPoint .contArea {
    padding: 0;
}
.modalArea.gPoint .contArea .descWrap {
    border-top: none;
    padding: 0 14px 40px;
    margin: 0 10px;
}
.modalArea.gPoint .contArea .descWrap .txt_title {
    font-size: 1.25rem;
    padding-top: 0;
}
.modalArea.gPoint .contArea .descWrap .txt_desc {
    color: #464646;
    font-size: 0.938rem;
    font-weight: 400;
    line-height: 1.5rem;
}
.modalArea.gPoint .contArea .descWrap .txt_alert {
    color: #8b8b8b;
    font-size: 0.813rem;
    margin-top: 12px;
}
.modalArea.gPoint .contArea .descWrap .txt_alert .icon {
    padding-right: 5px;
    vertical-align: bottom;
}
.modalArea.gPoint .contArea .stateWrap {
}
.modalArea.gPoint .stateWrap .box_top {
    padding: 0 24px 20px;
}
.modalArea.gPoint .stateWrap .box_top span:first-child {
    display: block;
    font-size: 1.063rem;
    padding-bottom: 10px;
}
.modalArea.gPoint .stateWrap .box_top span:first-child strong {
    font-weight: bold;
}
.modalArea.gPoint .stateWrap .box_top span:last-child {
    font-size: 0.875rem;
}
.modalArea.gPoint .stateWrap .box_top strong {
    color: #fd5050;
}
.modalArea.gPoint .stateWrap table {
    display: block;
    width: calc(100% - 20px);
    margin: 0 10px 16px;
}
.modalArea.gPoint .stateWrap thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.modalArea.gPoint .stateWrap thead th {
    height: 44px;
    color: #fff;
    font-size: 0.875rem;
    font-weight: bold;
    vertical-align: middle;
    background: #fd5050;
    padding: 0 20px;
}
.modalArea.gPoint .stateWrap thead th:nth-child(2) {
}

.modalArea.gPoint .stateWrap tbody {
    display: block;
    height: 224px;
    overflow-y: auto;
}
.modalArea.gPoint .stateWrap tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.modalArea.gPoint .stateWrap tbody td {
    height: 56px;
    color: #1c1c1c;
    font-size: 0.875rem;
    text-align: center;
    line-height: 1.125rem;
    border-bottom: 1px solid #e5e5e5;
    vertical-align: middle;
    background: #f7f7f7;
}
.modalArea.gPoint .stateWrap tbody td:nth-child(2) {
}
.modalArea.gPoint .stateWrap tbody td strong {
    display: block;
    font-size: 0.875rem;
}
.modalArea.gPoint .stateWrap tbody td strong.numStyle {
    font-size: 0.813rem;
}
.modalArea.gPoint .stateWrap tbody td span {
    font-size: 0.75rem;
}
.modalArea.gPoint .stateWrap tbody td:first-child span {
    color: #8b8b8b;
}
.modalArea.gPoint .stateWrap tfoot {
}
.modalArea.gPoint .stateWrap tfoot tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    height: 50px;
    border-bottom: 1px solid #e5e5e5;
}
.modalArea.gPoint .stateWrap tfoot th {
    color: #1c1c1c;
    font-size: 0.938rem;
    font-weight: bold;
    text-align: left;
    vertical-align: middle;
    padding: 0 14px;
}
.modalArea.gPoint .stateWrap tfoot td {
    color: #fd5050;
    text-align: right;
    vertical-align: middle;
    padding: 0 14px;
}
.modalArea.gPoint .stateWrap tfoot td strong {
    color: #fd5050;
    font-weight: bold;
}
.modalArea.gPoint .stateWrap .box_notice {
    font-size: 0.813rem;
    line-height: 1.563rem;
    background: #f7f7f7;
    padding: 20px 16px 34px;
}
.modalArea.gPoint .stateWrap .box_notice li {
    color: #8b8b8b;
}
.modalArea.gPoint .stateWrap .box_notice li p {
    display: inline;
    color: #8b8b8b;
    font-weight: 400;
    padding-left: 6px;
}

/*=============== pay1 ===============*/
/*box refresh*/
header.refresh {
    height: 52px;
}
header.refresh .btn_close {
    color: #000;
    background: transparent;
    margin-left: 4.26%;
}
header.refresh .box_refresh {
    width: 80%;
    height: 52px;
    text-align: right;
    line-height: 52px;
    margin-right: 4.26%;
}
header.refresh .box_refresh span {
    display: inline-block;
    height: 100%;
    color: #4d4d4d;
    font-size: 0.75rem;
    font-weight: 400;
    vertical-align: top;
}
header.refresh .box_refresh .btn_refresh {
    height: 100%;
    background: transparent;
    padding-left: 10px;
}

/*card content*/
.card .topArea {
    padding: 104px 55px 44px;
}
.card .topArea .txt_title {
    color: #050505;
    font-size: 1.125rem;
    font-weight: bold;
}
.card .topArea .num_card {
    display: block;
    color: #7b7b7b;
    font-size: 0.875rem;
    font-weight: 400;
    margin-top: 5px;
}

/*card slide*/
#cardSlide .box_slide {
    text-align: center;
}
#cardSlide .box_slide {
    transition: all 0.5s ease;
}
#cardSlide .box_slide img {
    width: 100%;
}
#cardSlide .box_slide {
    transform: scale(0.8);
}
#cardSlide .box_slide.slick-current {
    transform: scale(1);
}
.card .slideWrap .box_page {
    width: 52px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    border-radius: 20px;
    background: #767676;
    margin: 10px auto;
}
.card .slideWrap .box_page span {
    color: #fff;
    font-size: 0.75rem;
}

/*=============== pay2 ===============*/
.pad .topArea {
    text-align: center;
    margin: 136px 0 187px;
}
.pad .topArea strong {
    color: #f42d1f;
    font-size: 1.125rem;
}
.pad .topArea span {
    display: block;
    color: #2e2e2e;
    font-size: 1.875rem;
    margin: 10px 0 47px;
}
.pad .topArea .box_psw {
    width: 53.33%;
    margin: auto;
}
.pad .topArea .box_psw li {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dedede;
}
.pad .topArea .box_psw li.active {
    background: #e50000;
}
.pad .contArea .box_pad {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
}
.pad .contArea .box_pad li {
    width: 25%;
    height: 7.88vh;
    color: #fff;
    font-size: 1.25rem;
    text-align: center;
    border-left: 1px solid #ef4c5f;
    border-bottom: 1px solid #ef4c5f;
    line-height: 7.88vh;
    background: #e50000;
}
.pad .contArea .box_pad .btn_delete {
    width: 50%;
    height: 7.88vh;
    color: #fff;
    border-left: 1px solid #ef4c5f;
    border-radius: 0;
    background: #e50000;
}

/*=============== pay2 ===============*/
footer {
    padding-bottom: 70px;
}

/*=============== loading ===============*/
.loading .contArea {
    width: 100%;
    height: 400px;
    padding: 0 4.26%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 30;
}
.loading .contArea .img_cha {
    display: block;
    width: 50%;
    text-align: center;
    position: absolute;
    left: 25%;
    bottom: -20px;
    animation: jump 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite alternate;
    z-index: 3;
}
@keyframes jump {
    0% {
        bottom: -20px;
    }
    100% {
        bottom: 140px;
    }
}
.loading .contArea .img_bg {
    width: 40%;
    height: 17px;
    border-radius: 50%;
    background: rgba(170, 170, 170, 0.9);
    position: absolute;
    bottom: 0;
    left: 30%;
    transform: scale(1);
    animation: shadow 0.5s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite
        alternate;
}
@keyframes shadow {
    0% {
        transform: scale(1);
        background: rgba(170, 170, 170, 0.9);
    }
    100% {
        transform: scale(0.6);
        background: rgba(170, 170, 170, 0.5);
    }
}
.loading .contArea .img_cha img {
    width: 70%;
    margin: auto;
}
.loading .bgWrap > span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
}
.loading .bgWrap span.red {
    opacity: 0;
    bottom: 132px;
    left: 30.33%;
    background: linear-gradient(45deg, #e22a00, #f77c2b);
    animation: flow1 1s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite;
}
@keyframes flow1 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        bottom: 132px;
        left: 30.33%;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        bottom: 320px;
        left: 28%;
    }
}
.loading .bgWrap span.spring {
    bottom: 172px;
    left: 33%;
    background: linear-gradient(45deg, #2af12b, #75ff40);
    animation: flow2 1s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite;
}
@keyframes flow2 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        bottom: 172px;
        left: 33%;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        bottom: 342px;
        left: 23.2%;
    }
}
.loading .bgWrap span.green {
    bottom: 182px;
    right: 30.33%;
    background: linear-gradient(45deg, #00b54a, #22d22d);
    animation: flow3 1s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite;
}
@keyframes flow3 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        bottom: 182px;
        right: 30.33%;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        bottom: 352px;
        right: 23.2%;
    }
}
.loading .bgWrap span.yellow {
    bottom: 159px;
    right: 36.2%;
    background: linear-gradient(45deg, #ffab1b, #f7cb2b);
    animation: flow4 1s cubic-bezier(0.17, 0.67, 0.32, 0.99) infinite;
}
@keyframes flow4 {
    0% {
        opacity: 0;
    }
    5% {
        opacity: 1;
        bottom: 159px;
        right: 36.2%;
    }
    80% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        bottom: 332px;
        right: 26.4%;
    }
}
.event .imgWrap img {
    width: 100%;
}
.box_barcode_contain {
    width: 100%;
    background-color: #fff;
    padding: 0 0 50px;
}
.pt160 {
    padding-top: 160px !important;
}
.pb120 {
    padding-bottom: 120px !important;
}
.sticky {
    position: sticky;
}

/* 2021/05/18 추가 */
#container.pd_10 {
    padding-top: 30px !important;
}
.tutorialWrap .imgBot {
    width: 80%;
    margin: -20px auto 0;
    padding-bottom: 85%;
    z-index: -1;
}
.tutorialWrap .txtBot {
    margin-top: 0;
}
.tutorialWrap {
    margin-bottom: 20px;
}
.tut-bot img {
    width: 72px;
    transform: translate(-50%, -50%);
    margin-left: -15px;
}
#container.pd_10 .buttonArea {
    position: fixed;
    left: 50%;
    top: 90%;
    transform: translateX(-50%);
}

/* bigger_barcode 추가 */
#wrap .bigger_wrap {
    padding: 30px;
    height: 100%;
}
.bigger_barcode {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100%;
    flex-direction: column;
}
.bigbarcode_header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.bigger_barcode .middle {
    transform: rotate(90deg) scale(1.3);
}

/* 221020 사은품 쿠폰 수정 - 차혜리 */
#couponSlide .box_slide {
    background-image: url(../images/img/img-barcode-coupon.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position-y: 6.5px;
}
#couponSlide .box_slide.event-pop button {
    height: 26px;
    line-height: 24px;
    font-size: 0.75rem;
}
#couponSlide .box_slide.event-pop button.gray {
    background-color: #a3a3a3 !important;
    border: none !important;
}
.coupon-freebie .box_tag {
    left: auto !important;
}
.coupon-freebie .box_title strong {
    padding-top: 25px !important;
}
.coupon-freebie .box_title p {
    font-size: 0.75rem !important;
    line-height: 1rem !important;
}

/* 221228 홈화면 box_tooltip 리뉴얼_이승미*/
.index .content .tooltip_address {
    display: block;
    padding: 0.56rem;
    margin: 1rem 1rem 0;
    border: 1px solid #ff6c6c;
    border-radius: 32px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6c6c;
}
.index .content .tooltip_address > span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #ff6c6c;
    padding-right: 0.2rem;
}

/* 220102 사업자 회원 추가) 사용중인 계정 정보 상단 표시 _이승미*/
header.index .user_account,
.index.gnb .user_account {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    background-color: #f7f8fa;
    border-radius: 50px;
    font-size: 0.875em;
    color: #3c3c3c;
    padding: 0.2rem 0.5rem 0.2rem 0.9rem;
    /* margin-right: 4.26%;*/
    max-width: 30%;
}
.index.gnb .user_account span {
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
header.index .user_account i.icon-btn-prev,
.index.gnb .user_account i.icon-btn-prev {
    background-color: #3c3c3c;
    padding: 0.5rem 0.75rem;
    border-radius: 100%;
}
header.index .user_account i.icon-btn-prev::before,
.index.gnb .user_account i.icon-btn-prev::before {
    filter: invert(1);
}
header.index.scroll .user_account {
    visibility: hidden;
}

/*=============== 230106 수산대전 전용 홈 추가_이승미 ===============*/

/*접속 홈 선택 화면*/
.susanHome {
    height: 100%;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: #ed474a;
}
.susanHome .homeType_box {
    width: 100%;
    flex-grow: 1;
}

.susanHome .homeType_box .box {
    position: relative;
    display: block;
    width: fit-content;
    margin: 0 auto;
}

.susanHome .homeType_box .box .txt_area {
    position: absolute;
}

/* 수산대전. top 38% -> 29% -> 26% 로 변경 */
.susanHome .homeType_box .box .txt_area.add {
    left: 35px;
    top: 26%;
    transform: translate(0, -50%);
    color: #767676;
    font-weight: 400;
    font-size: 0.75rem;
}

/* 수산대전. top 43% -> 35% -> 32% 로 변경 */
.susanHome .homeType_box .box .txt_area.martName {
    font-weight: 600;
    left: 35px;
    top: 32%;
    transform: translate(0, -30%);
}

.susanHome .homeType_box .box .txt_area.btnName {
    min-width: 150px;
    left: 50%;
    bottom: 18%;
    transform: translate(-55%, 0);
    color: #fff;
    min-width: 150px;
}

.susanHome .homeType_box .box img {
    height: 48vh;
    max-width: 100%;
}

.index.susan .listWrap .box_title .txt_title::before {
    background: #62cdf5;
}
/*header영역 반응형 처리*/
@media (max-width: 320px) {
    header.index.susan h1 {
        width: 90px;
    }
    header.index.susan div .backBtn img {
        width: 22px;
    }
    header.index.susan.scroll .topArea.sm .btn_address span {
        font-size: 0.8rem;
    }
}
@media (max-width: 280px) {
    header.index.susan h1 {
        width: 80px;
    }
    header.index.susan.scroll .topArea.sm .btn_address span {
        font-size: 0.75rem;
    }
}

/*=============== 230228 홈 상단 수산-일반매장  분기 탭 추가 ===============*/
header.index .home_type_tab {
    background: #fd5050;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: nowrap;
    padding-right: 11px;
}
header.index .home_type_tab .tab_logo {
    /* filter:  brightness(2); */
    padding: 1rem 0.5rem 0 0.5rem;
}
header.index .home_type_tab .tab_logo > img {
    width: 100%;
}
@media (max-width: 325px) {
    header.index .home_type_tab .tab_logo {
        width: 80px;
        padding-top: 1.25rem;
        margin: 0 auto;
    }
    header.index .tab_logo h1 {
        width: 100%;
    }
}
header.index .home_type_tab .tab_btn {
    flex: 1;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px 10px 0 0;
    margin-top: 0.5rem;
    position: relative;
    white-space: nowrap;
}
header.index .home_type_tab .tab_btn::after {
    content: "";
    position: absolute;
    background: url(../images/img/tab_btn_bg.svg);
    width: 11px;
    height: 10px;
    bottom: -1px;
    left: -11px;
    opacity: 0.4;
}
header.index .home_type_tab .tab_btn::before {
    content: "";
    position: absolute;
    background: url(../images/img/tab_btn_bg.svg);
    width: 11px;
    height: 10px;
    bottom: -1px;
    right: -11px;
    opacity: 0.4;
    transform: rotateY(180deg);
}
header.index .home_type_tab .tab_btn .tab_title {
    display: block;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    line-height: 50px;
}

header.index .home_type_tab .tab_btn .tab_title_logo {
    display: block;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 700;
    text-align: center;
    line-height: 60px;
}

header.index .home_type_tab .tab_btn .tab_title i {
    filter: grayscale(1) brightness(10);
    margin-bottom: 0.125rem;
    margin-right: 0.125rem;
}
header.index .home_type_tab .tab_btn.active {
    /*tab 활성화 되었을 때 스타일*/
    background: rgba(255, 255, 255, 1);
}
header.index .home_type_tab .tab_btn.active::after,
header.index .home_type_tab .tab_btn.active::before {
    opacity: 1;
}

header.index .home_type_tab .tab_btn.red.active .tab_title {
    color: #fd5050;
}
header.index .home_type_tab .tab_btn.blue.active .tab_title {
    color: #2d3edf;
}
header.index .home_type_tab .tab_btn.active .tab_title i {
    filter: none;
}

/*230104 수산대전 가이드 팝업 추가*/
.modalArea.coverPage .popWrap {
    padding: 0 0.5rem;
    height: 100%;
    width: 100%;
    border-radius: unset;
    background: unset;
}

.modalArea.coverPage .popWrap .guide_backbtn {
    display: block;
    width: fit-content;
    margin-top: 0.25rem;
    padding: 0.75rem;
    border-radius: 100%;
    border: 2px dashed #ffffff;
}
.modalArea.coverPage .popWrap .guide_text {
    margin-top: 1rem;
    margin-left: 10%;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #fd5050;
    border-radius: 10px;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.12));
    max-width: 270px;
    color: #fd5050;
    text-align: center;
}
.modalArea.coverPage .popWrap .guide_text:after {
    content: "";
    position: absolute;
    bottom: 102%;
    left: 10%;
    width: 30px;
    height: 10px;
    border-left: 1px solid #fd5050;
    border-top: 1px solid #fd5050;
    background-color: #ffffff;
    transform: rotate(19deg) translate(0, calc(50% + 2px));
}
.modalArea.coverPage .popWrap .buttonOut.guide_close {
    width: 100%;
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translate(-50px, 0);
}

/*230228 홈 상단 수산-일반매장  분기 탭 추가_가이드 팝업*/
.modalArea.coverPage .popWrap .tab_type_guide .guide_tab {
    /* width: calc(50% - 25px); */
    width: calc(33.3333% + 1rem);
    margin-top: 0.1rem;
    padding: 0.563rem 0.5rem;
    border: 2px dashed #ffffff;
    border-radius: 10px;
}
.modalArea.coverPage .popWrap .tab_type_guide .mart .guide_tab {
    /* margin-left: calc(100px - 1rem) */
    margin-left: calc(33.3333% - 10px);
}
.modalArea.coverPage .popWrap .tab_type_guide .delivery .guide_tab {
    /* margin-left: calc(50% + 1.75rem); */
    margin-left: calc(66.6666% - 10px);
}
.modalArea.coverPage .popWrap .tab_type_guide .guide_tab .tab_title {
    display: block;
    padding: 0.75rem 0;
    text-align: center;
    background: #ffffff;
    border-radius: 10px;
}
.modalArea.coverPage .popWrap .tab_type_guide .mart .guide_tab .tab_title {
    color: #fd5050;
}
.modalArea.coverPage .popWrap .tab_type_guide .delivery .guide_tab .tab_title {
    color: #2d3edf;
}
.modalArea.coverPage .popWrap .tab_type_guide .guide_text {
    padding: 1rem 1.5rem;
    margin-top: 1rem;
    max-width: 220px;
    text-align: center;
    background-color: #ffffff;
    border-radius: 20px;
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.12));
    position: relative;
}
.modalArea.coverPage .popWrap .tab_type_guide .mart .guide_text {
    color: #fd5050;
    border: 2px solid #fd5050;
    /* margin-left: 100px; */
    margin-left: 31%;
}
.modalArea.coverPage .popWrap .tab_type_guide .delivery .guide_text {
    color: #2d3edf;
    border: 2px solid #2d3edf;
    margin-left: calc(60% - 25px);
}

.modalArea.coverPage .popWrap .tab_type_guide .guide_text:after {
    content: "";
    position: absolute;
    bottom: calc(100% + 1px);
    left: 32%;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    transform: rotate(45deg) translate(0, calc(50% + 2px));
}
.modalArea.coverPage .popWrap .tab_type_guide .mart .guide_text:after {
    border-left: 2px solid #fd5050;
    border-top: 2px solid #fd5050;
}
.modalArea.coverPage .popWrap .tab_type_guide .delivery .guide_text:after {
    border-left: 2px solid #2d3edf;
    border-top: 2px solid #2d3edf;
    left: 62%;
}

@media screen and (max-width: 320px) {
    .modalArea.coverPage .popWrap .tab_type_guide .guide_tab .tab_title {
        font-size: 13px;
    }
}

/* 230516 쿠폰 사용 완료 ui 추가*/
.box_coupon-over {
    display: none;
    position: absolute;
    top: 6px;
    left: 0;
    background-image: url(../images/img/img-barcode-coupon-over.svg);
    width: 100%;
    height: 100%;
    background-size: contain;
    opacity: 0.8;
    background-repeat: no-repeat;
}
.box_slide.used .box_coupon-over {
    display: block;
}

/* 230629 결제수단 등록 */
.payment-img {
    text-align: center;
    padding: 3rem 0;
}
.payment-img img {
    position: relative;
    left: 14px;
}
.payment-text {
    text-align: center;
    margin-bottom: 1rem;
}
.payment-text h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}
.payment-text p {
    font-size: 0.875rem;
    font-weight: 400;
    color: #8b8b8b;
    line-height: 22px;
}
.payment-register {
    width: calc(100% - 2rem);
    margin: 1rem;
    padding: 1rem;
    text-align: center;
    border-radius: 12px;
    border: 1px solid #e8ecf0;
    background: #fff;
}
.payment-register span {
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: #9a9a9a;
    font-weight: 400;
}

.payment.box_barcode_contain {
    width: 100%;
    background-color: #fff;
    padding: 40px 32px;
}

.payment .box_barcode .txt_name {
    font-weight: 400;
}

.payment .box_barcode .txt_name strong {
    font-size: 1.2rem;
    letter-spacing: 0.5px;
}

.payment .txt_member .time {
    vertical-align: middle;
    color: #fd5050;
}

.payment .box_barcode .time_barcode {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
}

.payment .txt_member .refresh_barcode {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin: 0 0 4px;
    vertical-align: middle;
    background-size: contain;
}

.payment .txt_member,
.payment .barcode_area {
    margin-bottom: 1rem;
    position: relative;
}
.payment .barcode_area.pay_return {
    padding: 15px 20px 30px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
}
.payment .barcode_area > p {
    font-size: 1rem;
    line-height: 1.5rem;
    padding: 0 0 10px;
}
.payment .barcode_area.pay_return + .num_barcode {
    display: none;
    width: 100%;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.payment .barcode_pay_info {
    padding: 5px 5px 0;
    transition: 0.3s;
}
.payment .barcode_pay_info > p {
    font-size: 1rem;
    line-height: 1.5rem;
    color: #8b8b8b;
    text-decoration: underline;
}

/* 바코드 가로 돌리기 */
.barcode_wrap {
    margin: 0 0 15px;
    transition: 0.5s;
}
.barcode_wrap.on {
    transform: rotate(90deg) translate(calc(50% - 160px), 0);
    width: auto;
}
.barcode_wrap.on .barcode_area {
    width: calc(60vh + 40px);
    background: #fff;
}
.barcode_wrap.on .barcode_area img {
    display: block;
    width: 60vh;
    height: 20vw;
    max-height: 80px;
}
.barcode_wrap.on ~ .barcode_pay_info {
    opacity: 0;
}
.barcode_wrap > p {
    font-size: 14px;
    color: #fd5050;
    margin: -5px 0 0;
}
.barcode_wrap.on > p {
    display: none;
}
.barcode_notice {
    display: none;
}
.barcode_notice > p {
    padding: 10px 0;
    text-align: center;
    font-size: 14px;
    color: #fd5050;
}
.barcode_wrap.on + .barcode_notice {
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    background: #fff;
}
.box_barcode:has(.barcode_wrap.on) {
    height: 70vh;
}
#container:has(.barcode_wrap.on) {
    background: #fff;
    z-index: 999;
}

.payment-list {
    padding: 40px 20px;
}

.connect {
    display: flex;
    width: 100%;
    padding: 1rem;
    border-radius: 10px;
    background: #f9f9fc;
    align-items: center;
}

.connect .title {
    color: #1c1c1c;
    font-weight: 700;
    line-height: 24px;
}

.connect .title + span {
    display: inline-block;
    line-height: 24px;
    text-decoration: underline;
    color: #8b8b8b;
}

.connect-badge {
    display: none;
    padding: 6px 12px 8px 12px;
    border-radius: 100px;
    background: #fd5050;
    color: #fff;
    font-weight: 500;
    line-height: 1;
}

.lnb .swiper-scrollbar {
    width: 48px;
    height: 4px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 16px);
    z-index: 50;
    background: #e5e5e5;
    padding: 0 !important;
}
.lnb .swiper-scrollbar-drag {
    background: #a0a0a0;
}

/* 20240724 이미지 없는 상품 텍스트형 노출 추가 */
.index .listWrap .list_prod.txt {
}
.index .listWrap .list_prod + .list_prod.txt {
    padding-top: 0;
}
.index .listWrap .list_prod.txt > ul {
    display: block;
    overflow: visible;
}
.index .listWrap .list_prod.txt > ul > li {
    display: block;
    min-width: 0 !important;
    width: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid #e7ebef;
}
.index .listWrap .list_prod.txt > ul > li > a {
    min-height: 0;
    padding: 15px 50px 15px 15px;
    margin-right: 0;
    position: relative;
}
.index .listWrap .list_prod.txt > ul > li > a > .img_prod {
    display: none;
}
.index .listWrap .list_prod.txt > ul > li > a > .img_prod > img {
}
.index .listWrap .list_prod.txt > ul > li > a > .txt_name {
    /* display: inline; */
    min-height: 0;
    padding: 0;
    margin: 0;
    font-size: 16px;
    vertical-align: middle;
    border: none;
}
.index .listWrap .list_prod.txt > ul > li > a .box_badge {
    display: inline;
    left: auto;
    right: auto;
    top: auto;
    vertical-align: bottom;
    position: relative !important;
    margin: 0 !important;
}
.index .listWrap .list_prod.txt > ul > li > a .box_badge .badge {
    padding: 0 7px;
    font-size: 0.5rem;
    background: #fd5050;
    border-radius: 6px 6px 0 6px;
}
.index .listWrap .list_prod.txt > ul > li > a .badge_design {
    top: -4px;
    right: 2px;
    z-index: 0;
}
.index .listWrap .list_prod.txt > ul > li > a .badge_design > span {
    width: 45px;
    height: 45px;
    padding-top: 9px;
}
.index .listWrap .list_prod.txt > ul > li > a .box_badge.box_susan > span {
    margin: 0 2px;
}
.index .listWrap .list_prod.txt > ul > li > a > .list_price {
    min-height: 0;
    padding: 7px 0 0 30px;
}
.index .listWrap .list_prod.txt > ul > li > a > .list_price .num_pre {
    margin-right: 0;
}
.index .listWrap .list_prod.txt > ul > li > a > .list_price .num_disc {
    padding: 0 4px 0 0;
}
.index .listWrap .list_prod.txt > ul > li > a > .list_price .num_price {
}
.index
    .listWrap
    .list_prod.txt
    > ul
    > li
    > a
    > .list_price
    .num_price
    .numStyle {
}
.index .listWrap .list_prod.txt > ul > li > a > .box_order {
    position: absolute;
    bottom: 5px;
    right: 6px;
    padding: 0;
    z-index: 1;
}
.index .listWrap .list_prod.txt > ul > li > a > .box_order > li {
}
.index .listWrap .list_prod.txt > ul > li > a > .box_order > li .btn_buy {
}
.index .listWrap .list_prod.txt > ul > li > a > .btn_wish {
    bottom: 5px;
    left: 6px;
    padding: 0;
}

.index .listWrap .list_prod.txt > ul > li.soldOut::before {
    top: 15px;
    right: 10px;
}
.index .listWrap .list_prod.txt > ul > li.soldOut::after {
    height: auto !important;
    bottom: 0;
    border-radius: 0;
    z-index: 1;
}