@charset "UTF-8";
@import url(./font.css);

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

html {
    width: 100%;
    height: 100%;
    min-height: 100%;
    font-size: 10px;
}

body {
    position: relative;
    min-width: 320px;
    height: 100%;
    min-height: 100%;
    font-family: "KBFGText", sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    color: #000;
    line-height: 1.5;
    letter-spacing: -0.025em;
}

a {
    text-decoration: none;
    color: inherit;
}


/* position */
.abs {
    position: absolute !important
}

.rel {
    position: relative !important
}

.fixed {
    position: fixed !important
}

.sticky {
    position: sticky !important;
}


.nobd {
    border: none !important;
}

.noBg {
    background: none !important
}

.nopd {
    padding: 0 !important;
}

.notpd {
    padding-top: 0 !important;
}

.notmg {
    margin-top: 0 !important;
}

.tpd24 {
    padding-top: 24px;
}

.nobpd {
    padding-bottom: 0 !important;
}

.overHidden {
    overflow: hidden !important
}

.inline {
    display: inline !important;
}

.inblock {
    display: inline-block !important;
}

.block {
    display: block !important;
}

/* vertical-align */
.vab {
    vertical-align: bottom !important;
}

.vat {
    vertical-align: top !important;
}

.vam {
    vertical-align: middle !important;
}

/* 감추기 */
.blind {
    display: none !important
}

.hidden {
    visibility: hidden !important
}

.txt_bl {
    color: rgb(28, 141, 255);
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

/* 박스관련 */
.borderBox {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* background */


/* font-weight*/
.fwb {
    font-weight: 700 !important;
}

/* text 정렬 */
.tac {
    text-align: center !important;
}

.tal {
    text-align: left !important;
}

.tar {
    text-align: right !important;
}

input::placeholder {
    color: rgb(170, 174, 179);
}


/********** layout **********/
#coupon_wrapper {
    width: 100%;
}

.coupon_header {
    width: 100%;
    height: 55px;
    background: #fff;
    padding: 0 24px 0;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
}

.coupon_header .header_top {
    width: 100%;
    position: relative;
    display: table;
    height: 55px;
}

.coupon_header .header_top > h3 {
    text-align: left;
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    color: #000;
}

.coupon_header .header_top > h3 > button {
    border: 0;
    padding: 0 0 0 20px;
    font-size: 18px;
    background: url(../images/btn_back_48x48.png) left center no-repeat;
    background-size: auto 17px;
    color: #000;
}

.coupon_header .header_top > span {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
    width: 85px;
}

.coupon_container {
    width: 100%;
    padding: 55px 0 0 0;
    min-height: calc(100vh - 166px);
    position: relative;
}

.coupon_container .coupon_top {
    padding: 16px 24px 0;
}

.coupon_container .coupon_top > a {
    width: 100%;
    display: block;
    height: 44px;
    border-bottom: 2px solid #ebeef0;
    padding: 0;
    font-size: 16px;
    letter-spacing: -0.12px;
    color: #26282c;
    line-height: 44px;
    text-align: left;
    background: url(../images/icon_down.png) center right no-repeat;
    background-size: 12px;
}

.coupon_container .coupon_list {
    width: 100%;
    padding: 27.5px 24px 0;
}

.coupon_container .coupon_list .sum_num {
    width: 100%;
    font-size: 14px;
    letter-spacing: -0.1px;
    color: #26282c;
}

.coupon_container .coupon_list .sum_num > em {
    font-size: 15px;
    color: #287eff;
}

.coupon_container .coupon_list > ul {
    width: 100%;
    padding-top: 17px;
}

.coupon_container .coupon_list > ul > li {
    border: 1px solid #ebeef0;
    border-radius: 4px;
    box-shadow: 0 4px 7px 0 #d3d4d4;
    padding: 20px;
    background: #fff;
    margin-top: 16px;
}

.coupon_container .coupon_list > ul > li:first-child {
    margin: 0;
}

.coupon_container .coupon_list > ul > li .coupon_info {
    width: 100%;
    font-size: 0;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_img {
    display: inline-block;
    width: 100px;
    vertical-align: top;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_info {
    display: inline-block;
    width: calc(100% - 100px);
    vertical-align: top;
    padding-left: 14px;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_info .txt_brand {
    font-size: 13px;
    line-height: 17px;
    color: #287eff;
    letter-spacing: -0.1px;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_info .txt_name {
    font-size: 14px;
    line-height: 1.3;
    color: #26282c;
    letter-spacing: -0.1px;
    padding-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_info .txt_date {
    font-size: 13px;
    line-height: 18px;
    color: #696276;
    letter-spacing: -0.11px;
    padding-top: 10px;
}

.coupon_container .coupon_list > ul > li .coupon_info .product_send {
    width: 100%;
    margin-top: 16px;
    background: #eff1f3;
    border-radius: 4px;
    height: 40px;
    padding: 0 16px;
    font-size: 13px;
    letter-spacing: -0.1px;
    font-weight: 100;
    color: #8c949e;
    line-height: 40px;
}

.coupon_container .coupon_list .btn_area {
    width: 100%;
    padding-top: 33px;
    text-align: center;
}

.coupon_container .coupon_list .btn_area .btn_more {
    width: 100%;
    height: 44px;
    background: #fff;
}

.coupon_container .coupon_list .btn_area .btn_more > span {
    display: inline-block;
    padding-left: 17px;
    background: url(../images/combined_shape.png) center left no-repeat;
    background-size: 11px;
    font-size: 16px;
    letter-spacing: -0.2px;
    color: #26282c;
}

.none_product {
    position: absolute;
    text-align: center;
    width: calc(100% - 48px);
    top: 50%;
    margin-top: -55px;
}

.none_product > span {
    display: inline-block;
    padding-top: 88px;
    background: url(../images/i_con.png) top center no-repeat;
    background-size: 60px;
    font-size: 18px;
    text-align: center;
    color: #26282c;
}

.coupon_detail {
    width: 100%;
    padding: 0 24px 40px;
}

.coupon_detail .product_img {
    margin-top: 28px;
    width: 100%;
    position: relative;
}

.coupon_detail .product_img.expiry > img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.coupon_detail .product_img.complete > img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.coupon_detail .product_img.cancel > img {
    filter: grayscale(100%);
    opacity: 0.5;
}

.coupon_detail .product_img .expiry_dim {
    width: 100%;
    height: 100%;
    background: url(../images/icon_e.png) center center no-repeat;
    background-size: 130px;
    position: absolute;
    top: 0;
    z-index: 10;
}

.coupon_detail .product_img .complete_dim {
    width: 100%;
    height: 100%;
    background: url(../images/icon_c.png) center center no-repeat;
    background-size: 130px;
    position: absolute;
    top: 0;
    z-index: 10;
}

.coupon_detail .product_img .cancel_dim {
    width: 100%;
    height: 100%;
    background: url(../images/icon_cr.png) center center no-repeat;
    background-size: 130px;
    position: absolute;
    top: 0;
    z-index: 10;
}

.coupon_detail .product_img > img {
    width: 100%;
}

.coupon_detail .product_info_box {
    width: 100%;
    padding: 48px 0 0;
}

.coupon_detail .product_info_box > ul {
    width: 100%;
}

.coupon_detail .product_info_box > ul > li {
    padding-top: 20px;
    width: 100%;
    font-size: 0;
}

.coupon_detail .product_info_box > ul > li:first-child {
    padding: 0;
}

.coupon_detail .product_info_box > ul > li .title {
    display: inline-block;
    line-height: 1.3;
    width: 70px;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: -0.11px;
    color: #696e76;
    vertical-align: top;
}

.coupon_detail .product_info_box > ul > li .info {
    display: inline-block;
    line-height: 1.3;
    width: calc(100% - 70px);
    text-align: right;
    font-size: 16px;
    font-weight: 100;
    letter-spacing: -0.11px;
    color: #26282c;
    vertical-align: top;
}

.coupon_notice {
    width: 100%;
    border-top: 8px solid #f7f7f8;
    padding: 0 24px;
}

.coupon_notice > ul {
    width: 100%;
}

.coupon_notice > ul > li {
    width: 100%;
}

.coupon_notice > ul > li .q_ar {
    width: 100%;
}

.coupon_notice > ul > li:first-child .q_ar > button {
    border: 0;
}

.coupon_notice > ul > li:first-child .q_ar > button.on {
    background: url(../images/icon_up.png) right center no-repeat;
    background-size: 12px;
    border-top: 0;
}

.coupon_notice > ul > li .q_ar > button {
    width: 100%;
    height: 60px;
    background: url(../images/icon_down_s.png) right center no-repeat;
    background-size: 12px;
    text-align: left;
    padding: 0;
    font-size: 16px;
    font-weight: 100;
    color: #26282c;
    letter-spacing: -0.2px;
    border-top: 1px solid #ebeef0;
}

.coupon_notice > ul > li .q_ar > button.on {
    background: url(../images/icon_up.png) right center no-repeat;
    background-size: 12px;
    border-top: 1px solid #484b51;
}

.coupon_notice > ul > li .a_ar {
    width: 100%;
    border-top: 1px solid #ebeef0;
    border-bottom: 1px solid #484b51;
    padding: 32px 0 47px;
}

.coupon_notice > ul > li .a_ar > p {
    font-size: 16px;
    line-height: 23px;
    letter-spacing: 0.2px;
    font-weight: 100;
    color: #26282c;
}


.terms_area {
    width: 100%;
    padding: 27px 24px 40px;
}

.terms_area > ul.terms_tab {
    width: 100%;
    background: #ebeef0;
    font-size: 0;
}

.terms_area > ul.terms_tab > li {
    width: 50%;
    display: inline-block;
    border: 3px solid #ebeef0;
    background: #ebeef0;
    height: 38px;
    line-height: 38px;
    font-size: 15px;
    text-align: center;
    color: #696e76;
    letter-spacing: -0.09px;
}

.terms_area > ul.terms_tab > li.active {
    width: 50%;
    display: inline-block;
    border: 3px solid #ebeef0;
    background: #fff;
    height: 38px;
    color: #26282c;
}

.trems_content .sort_ar {
    width: 100%;
    padding: 22px 0 0;
}

.trems_content .sort_ar > button {
    width: 100%;
    height: 44px;
    border-bottom: 2px solid #ebeef0;
    padding: 0;
    font-size: 16px;
    letter-spacing: -0.12px;
    color: #26282c;
    line-height: 44px;
    text-align: left;
    background: url(../images/icon_down.png) center right no-repeat;
    background-size: 12px;
}

.trems_content .in_text {
    padding-top: 40px;
}

.trems_content .in_text > p {
    padding-top: 5px;
    font-size: 14px;
    color: #262626;
    font-weight: 100;
    letter-spacing: -0.1px;
}

.trems_content .in_text > p > img {
    /*width: 90%;*/
    padding: 10px 5%;
    width: 100%;
}

.trems_content .in_text > h5 {
    padding-top: 60px;
    padding-bottom: 15px;
    font-size: 16px;
    color: #262626;
    font-weight: 400;
    letter-spacing: -0.1px;
}

.trems_content .in_text > h5:first-child {
    padding-top: 0;
}


footer {
    margin-top: 45px;
    width: 100%;
}

.footer_top {
    width: 100%;
    height: 50px;
    border-top: 1px solid #ebeef0;
}

.footer_top > ul {
    width: 100%;
    text-align: center;
}

.footer_top > ul > li {
    display: inline-block;
    padding: 16px 8px;
    line-height: 17px;
    font-size: 13px;
    font-weight: 100;
    color: #484b51;
}

.footer_top > ul > li.bold {
    font-weight: 400;
}

.footer_top > ul > li > span {
    display: inline-block;
    padding-right: 18px;
    background: url(../images/icon_down_s.png) center right no-repeat;
    background-size: 10px;
}

.footer_top > ul > li > span.active {
    background: url(../images/icon_up.png) center right no-repeat;
    background-size: 10px;
}

.bottom_info {
    width: 100%;
    border-top: 1px solid #ebeef0;
    padding: 16px 24px;
}

.bottom_info > h4 {
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.11px;
    color: #484b51;
}

.bottom_info .info_ar {
    font-size: 13px;
    font-weight: 100;
    line-height: 20px;
    letter-spacing: -0.1px;
    color: #484b51;
    padding-top: 8px;
}

.bottom_info .info_ar.none_pd {
    padding: 0;
}

.bottom_info > button {
    display: inline-block;
    margin-top: 8px;
    padding-left: 0;
    padding-right: 16px;
    background-size: 6px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: -0.1px;
    color: #484b51;
}

.copy {
    height: 36px;
    width: 100%;
    background: #f8f8f8;
    text-align: center;
    line-height: 36px;
    font-size: 12px;
    color: #aab0b8;
    font-weight: 100;
}

.btn_top {
    display: none;
    width: 46px;
    height: 46px;
    background: url(../images/btn_top.png) no-repeat;
    background-size: 46px;
    position: fixed;
    right: 24px;
    bottom: 106px;
    opacity: 0.5;
}

.btn_top.on {
    display: inline-block;
}

.btn_back {
    display: none;
    width: 46px;
    height: 46px;
    background: url(../images/btn_back_46.png) no-repeat;
    background-size: 46px;
    position: fixed;
    left: 24px;
    bottom: 106px;
    opacity: 0.5;
}

.btn_back.on {
    display: inline-block;
}

#solt_pop {
    display: none;
    background: #fff;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 36px 24px;
    position: fixed;
    bottom: 0;
    top: auto;
    margin-top: -253px;
}

#solt_pop > h4 {
    font-size: 20px;
    color: #26282c;
    line-height: 24px;
}

#solt_pop > button {
    width: 24px;
    height: 24px;
    background: url(../images/icon_close.png) center center no-repeat;
    background-size: 16px;
    position: absolute;
    padding: 0;
    right: 24px;
    top: 36px;
}

#solt_pop > ul {
    width: 100%;
    padding-top: 32px;
}

#solt_pop > ul > li {
    height: 42px;
    border-bottom: 1px solid #dde1e4;
}

#solt_pop > ul > li > span {
    font-size: 16px;
    letter-spacing: -0.2px;
    color: #8c949e;
    width: 100%;
    height: 42px;
    vertical-align: top;
}

#solt_pop > ul > li > span label {
    width: 100%;
    line-height: 42px;
    vertical-align: top;
}

#solt_pop > ul > li > span > input[type="radio"]:checked + label {
    color: #26282c;
}


.select_box {
    padding-top: 22px;
}

.select_box > a {
    width: 100%;
    display: block;
    height: 44px;
    border-bottom: 2px solid #ebeef0;
    padding: 0;
    font-size: 16px;
    letter-spacing: -0.12px;
    color: #26282c;
    line-height: 44px;
    text-align: left;
    background: url(../images/icon_down.png) center right no-repeat;
    background-size: 12px;
}

.check_ar {
    width: 100%;
    padding: 30% 24px 40%;
    height: calc(100vh - 55px);
}

.check_ar > h3 {
    padding-top: 88px;
    background: url(../images/i_con.webp) top center no-repeat;
    background-size: 60px;
    text-align: center;
    font-size: 18px;
    letter-spacing: -0.2px;
    color: #26282c;
    line-height: 25px;
}

.check_ar > p {
    text-align: center;
    padding-top: 20px;
    color: #696e76;
    font-size: 16px;
    line-height: 23px;
}

button.btn_out {
    position: absolute;
    width: 100%;
    height: 52px;
    background: #ffd338;
    color: #26282c;
    font-size: 20px;
    letter-spacing: -0.25px;
    bottom: 0;
}

.check_ar .table_in {
    width: 100%;
    margin-top: 48px;
    border-top: 1px solid #8c949e;
}

.check_ar .table_in > li {
    width: 100%;
    display: table;
    border-bottom: 1px solid #ebeef0;
}

.check_ar .table_in > li .title {
    width: 68px;
    background: #f7f7f8;
    display: table-cell;
    vertical-align: middle;
    font-size: 14px;
    font-weight: 100;
    letter-spacing: -0.11px;
    color: #26282c;
    text-align: center;
}

.check_ar .table_in > li .info {
    width: calc(100% - 68px);
    background: #ffff;
    display: table-cell;
    vertical-align: middle;
    font-size: 15px;
    font-weight: 100;
    letter-spacing: -0.1px;
    color: #26282c;
    padding: 17px 14px;
}


.pop_notice {
    width: calc(100% - 48px);
    background: #fff;
    display: none;
}

.pop_notice .pop_content {
    width: 100%;
    padding: 32px 24px;
}

.pop_notice .pop_content .txt_notice {
    width: 100%;
    max-height: 67vh;
    overflow-y: auto;
}

.pop_notice .pop_content .txt_notice > img {
    width: 100%;
}

.pop_notice .pop_content h2 {
    font-size: 20px;
    color: #26282c;
    letter-spacing: -0.14px;
    padding-bottom: 26px;
}

.pop_notice .pop_content p {
    font-size: 16px;
    font-weight: 100;
    line-height: 23px;
    letter-spacing: -0.2px;
    color: #26282c;
}

.pop_notice > button {
    width: 100%;
    height: 52px;
    background: #ffd338;
    color: #26282c;
    font-size: 20px;
    letter-spacing: -0.25px;
}


.Sort_pop {
    display: none;
    transition: all 0.5s 0.1s;
    background: #fff;
    width: 100%;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding: 36px 24px;
    position: fixed;
    bottom: auto;
    top: 100%;
}

.dim {
    width: 100%;
    height: 100%;
    display: none;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    overflow: hidden;
}

.Sort_pop.active, .dim.active {
    display: block;
}

.Sort_pop.active {
    margin-top: -254px;
}

.pop_inner {
    width: 100%;
}

.pop_inner > h4 {
    font-size: 20px;
    color: #26282c;
    line-height: 24px;
}

.pop_inner > a {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/icon_close.png) center center no-repeat;
    background-size: 16px;
    position: absolute;
    padding: 0;
    right: 24px;
    top: 36px;
}

.pop_inner > ul {
    width: 100%;
    margin-top: 32px;
    height: 126px;
    overflow-y: auto;
}

.pop_inner > ul > li {
    height: 42px;
    border-bottom: 1px solid #dde1e4;
}

.pop_inner > ul > li > span {
    font-size: 16px;
    letter-spacing: -0.2px;
    color: #8c949e;
    width: 100%;
    height: 42px;
    vertical-align: top;
    display: block;
}

.pop_inner > ul > li > span label {
    width: 100%;
    line-height: 42px;
    vertical-align: top;
    display: block;
}

.pop_inner > ul > li > span > input[type="radio"]:checked + label {
    color: #26282c;
}

@media (max-width: 320px) {
    .footer_top > ul > li {
        display: inline-block;
        padding: 16px 4px;
        line-height: 17px;
        font-size: 11px;
        font-weight: 100;
        color: #484b51;
    }
}