@charset "utf-8";
@import url(reset.css);

body {
    -webkit-font-smoothing: antialiased;
}

/*header*/
#header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    height: 55px;
    line-height: 55px;
    background: #f6f8fa;
}

#header.color {
    background: #003f93;
}

#header.gray {
    background: #f6f8fa;
}

#header.color button {
    background: transparent;
    color: #fff;
    position: absolute;
    left: 20px;
    padding: 0;
}

#header.color button i {
    padding-right: 5px;
}

#header .logo {
    font-size: 16px;
    font-weight: 400;
    padding-left: 20px;
    text-align: left;
    line-height: 55px;
}

#header .logo img {
    height: 20px;
    vertical-align: middle;
}

#header .subtitle {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    line-height: 55px;
    padding-left: 55px;
}

#header .subtitle.left {
    padding-left: 20px;
}

#header.color .subtitle {
    color: #fff;
}

#header .subtitle.shop,
#header .logo.shop {
    text-align: center;
    padding-left: 0;
}

#header .menuBtn {
    position: absolute;
    left: 20px;
}

#header .cart {
    position: absolute;
    right: 55px;
}

#header .rightBtn {
    position: absolute;
    right: 20px;
}

#header p span {
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #fff;
    color: #00285d;
    font-weight: 500;
    font-size: 10px;
    border-radius: 100%;
    position: absolute;
    top: 10px;
    right: -7px;
    text-align: center;
}

#header p span.none {
    background: #aaa;
}

#header .submenuBtn {
    position: absolute;
    left: 55px;
}

.menuBtn img, .rightBtn img, .submenuBtn img, .logoutBtn2 img,
.cart img {
    width: 24px;
    vertical-align: middle;
}

/* 고정 bottom */
.fixingMenu {
    width: 100%;
    min-width: 280px;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 55px;
    z-index: 10;
    border-top: 1px solid #e8e8e8;
    padding: 0;
    margin: 0;
}

.fixingMenu ul {
    display: flex;
    width: 100%;
    text-align: center;
}

.fixingMenu ul li {
    width: 25%;
    vertical-align: top;
    padding: 0;
    position: relative;
}

.fixingMenu ul li a {
    display: block;
    padding: 4px;
    color: #222 !important;
}

.fixingMenu ul li a:hover {
    color: #222;
}

.fixingMenu ul li a > img {
    width: 22px;
    margin: 4px 0 5px;
}

.fixingMenu ul li a span {
    display: block;
    font-size: 1rem;
}

.bottom-qr-box {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 100%;
    background-image: linear-gradient(165deg, #003f93 0%, #4a1986 100%);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .09);
}

.bottom-qr-box img {
    position: absolute;
    width: 24px;
    top: 50%;
    margin-top: 0 !important;
    margin-left: -12px !important;
    transform: translateY(-50%);
}

/* 전체메뉴 */
.menu-con-box {
    position: relative;
    background: #f6f8fa;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.menu-con-box .my-info-box .profile {
    position: relative;
    display: inline-block;
}

.menu-con-box .my-info-box .info-name {
    display: inline-block;
    padding-left: 15px;
    padding-top: 10px;
    vertical-align: top;
    color: #222;
}

.menu-con-box .my-info-box .info-name .name {
    color: #222;
    font-size: 1.6rem;
}

.menu-con-box .my-info-box .info-name .txt {
    color: #999;
    font-size: 1.2rem;
    margin-top: 5px;
}

.menu-con-box .edit {
    font-size: 1.2rem;
    background: #edf1f5;
    border-radius: 18px;
    position: absolute;
    top: 0;
    right: 0;
    height: 34px;
    width: 70px;
    color: #8c9eaf;
    text-align: center;
    line-height: 34px;
    font-weight: 500;
    transition: 0.3s;
}

.menu-con-box .edit:active {
    background: #e4ebf1;
}

.menu-tit {
    font-size: 14px;
    color: #888b92;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 10px;
    margin-top: 10px;
}

.text-menu + .menu-tit {
    margin-top: 20px;
}

.text-menu:last-child {
    border-bottom: 0;
}

.menu-icon-list {
    width: 100%;
}

.menu-icon-list:after {
    display: block;
    clear: both;
    content: '';
}

.menu-icon-list li {
    float: left;
    width: 23.5%;
    margin-right: 2%;
    text-align: center;
    margin-bottom: 10px;
}

.menu-icon-list li:nth-child(4n) {
    margin-right: 0;
}

.menu-icon-list li a h4 {
    text-align: center;
    font-weight: 300;
    font-size: 12px;
    margin-top: 8px;
}

.text-menu {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.text-menu:after {
    display: block;
    clear: both;
    content: '';
}

.text-menu li {
    float: left;
    width: 50%;
    padding-left: 15px;
    position: relative;
    font-size: 14px;
    margin-bottom: 5px;
}

.text-menu li:before {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    content: '';
    display: block;
    margin-top: -1px;
    top: 50%;
    left: 0;
    background: #ddd;
}

.text-menu li a {
    display: block;
    line-height: 1.7;
    color: #222;
}

.lnb-company-info {
    padding-top: 15px;
    color: #999;
    line-height: 1.3;
}

.lnb-company-info strong {
    color: #888b92;
    margin-bottom: 5px;
    display: block;
}

.lnb-company-info a {
    color: #888b92 !important;
    line-height: 20px;
    font-weight: 500;
}

/* splash */
.splash {
    height: 100vh;
    background-color: #f9e1b9;
    text-align: center;
    position: relative;
}

.splash img {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/*================================== main layout ===================================*/
/* main layout */
.container {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0 60px 0;
    margin-top: 55px;
}

.sub-content .gradation-con-box {
    border-radius: 0;
}

.gradation-con-box {
    position: relative;
    background: linear-gradient(to bottom, #003f93, #4a1986);
    padding: 20px;
    border-bottom-right-radius: 30px;
}

.my-info-box {
    width: 100%;
    position: relative;
}

.my-info-box .info-name {
    width: calc(100% - 100px);
    font-size: 2rem;
    color: #fff;
    display: inline-block;
}

.my-info-box .info-name .name {
    font-size: 2rem;
    color: #fff;
}

.my-info-box .info-name .txt {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 0;
}

/* wallet */
.gradation-con-box .my-info-box.wallet .info-name .txt {
    font-size: 1.2rem;
    font-weight: 400;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.7);
}

.gradation-con-box .my-info-box.wallet .edit {
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 18px;
    position: absolute;
    top: 50%;
    right: 0;
    height: 36px;
    margin-top: -18px;
    width: 75px;
    color: #fff;
    text-align: center;
    line-height: 36px;
    font-weight: 500;
    transition: 0.3s;
}

.mypayWrap.wallet {
    border-radius: 15px;
    margin-top: 20px;
}

.mypayWrap.wallet .payNumber .charge-btn {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    height: 34px;
    line-height: 31px;
    border-radius: 18px;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    width: 66px;
    text-align: center;
    font-weight: 500;
    border: 2px solid rgba(255, 255, 255, 0.5);
    transition: 0.3s;
}

.mypayWrap.wallet .payNumber .charge-btn:active {
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* 프로필 영역 */
.my-info-box .profile {
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    top: 0;
    right: 0;
}

.my-info-box .profile .img-box {
    width: 60px;
    height: 60px;
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 24px;
}

.my-info-box .profile .img-box::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
}

.my-info-box .profile .img-box img {
    width: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

.con-box {
    position: relative;
    padding: 2rem 1.5rem;
}

.con-box.white {

    background: #fff;
}

.con-box.gray {
    background: #f6f8fa;
}

.con-box-top {
    position: relative;
    padding: 20px 20px 0;
}

.con-box-bottom {
    position: relative;
    padding: 0px 20px 20px;
}

.con-box-color {
    position: relative;
    padding: 20px;
    background: #001b45;
}

.con-box-color .main-con-box {
    box-shadow: none;
}

.main-tit {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 15px;
    position: relative;
}


/* 아이콘 + 제목 */
.wrap-items .ico-tit {
    position: relative;
    overflow: hidden;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 30px;
    margin-bottom: 15px;
}

.wrap-items .ico-tit a {
    float: right;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.5);
}

.wrap-items .ico-tit a i {
    padding-left: 3px;
    font-size: 10px;
    line-height: 12px;
    color: rgba(0, 0, 0, 0.5);
    vertical-align: unset;
}

/* Layout */
.line-con-box > li {
    position: relative;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
    border: 1px solid #eaebec;
    overflow: hidden;
    padding: 10px;
}

.line-con-box > li + li {
    margin-top: 5px;
}

.main-con-box {
    position: relative;
    background: #fff;
    border-radius: 20px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
    border: 1px solid #eaebec;
    overflow: hidden;
}

.main-con-box.p20 {
    padding: 20px;
}

.main-con-box + .main-con-box {
    margin-top: 10px;
}

.main-con-box h3 {
    width: auto;
    font-size: 1.4rem;
    vertical-align: middle;
    line-height: 30px;
    font-weight: 500;
}

.main-con-box h3 .reset {
    background: #f7f7f7;
    border-radius: 100%;
    height: 22px;
    line-height: 22px;
    width: 22px;
    vertical-align: middle;
    padding: 0;
    margin-left: 3px;
}

.main-con-box h3 .reset i {
    font-size: 1.3rem;
    color: #c2c2c7;
    vertical-align: middle;
    line-height: 20px;
}

.box-tit {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 10px 15px;
    line-height: 30px;
    vertical-align: middle;
}

.box-tit h3 {
    line-height: 30px;
}

.box-tit .more {
    margin-left: auto;
    color: #999;
    display: block;
    position: relative;
    padding-right: 15px;
    font-size: 1.3rem;
}

.box-tit .more:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 0;
    background: url(../images/more-ico.png);
    background-size: 10px;
    margin-top: -5px;
    width: 10px;
    height: 10px;
}


/* 박스 내 컨텐츠 */
.main-con-box .box-tit {
    padding: 10px 15px 0 15px;;
}

/* 어두운 배경 있는 버전 */
.con-box-color .box-tit {
    padding: 0 0 15px 5px;

}

.con-box-color .box-tit h3 {
    color: #fff;
    font-size: 1.6rem;
}

.con-box-color .box-tit .more {
    color: #fff;
}

.board-list {
    margin-bottom: 5px;
}

.board-list li {
    border-top: 1px solid #e8e8e8;
    padding: 0 15px;
}

.board-list li .txt {
    width: calc(100% - 110px);
    height: 18px;
    line-height: 18px;
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.board-list li .price {
    margin-left: auto;
    font-weight: 600;
}

.board-list li .date {
    margin-left: auto;
    color: #999999;
}

.board-list li a {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 15px 0;
    font-size: 1.4rem;
}

.board-list li:first-child {
    border-top: 0;
}

.inquiry-box {
    position: relative;
}

.inquiry-box .txt {
    width: calc(100% - 70px);
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    margin-bottom: 3px;
}

.inquiry-box .txt span {
    font-weight: 600;
    color: #003f93;
    padding-right: 5px;
    line-height: 18px;
    vertical-align: top;
}

.inquiry-box .date4 {
    position: absolute;
    right: 0;

}

.list-content .status,
.inquiry-box .status {
    border-radius: 5px;
    position: relative;
    text-align: left;
    padding-left: 30px;
    height: 30px;
    width: 66px;
    line-height: 30px;
    background: #e6ecf1;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -15px;
    color: #a1aab3;
    font-size: 1.3rem;

}

.list-content .status::before,
.inquiry-box .status::before {
    content: '';
    display: block;
    position: absolute;
    background: url(../images/small-check-ico.png);
    background-size: 10px;
    width: 10px;
    height: 10px;
    left: 10px;
    top: 50%;
    margin-top: -5px;
}

.list-content .status.on,
.inquiry-box .status.on {
    border-radius: 5px;
    position: relative;
    text-align: left;
    padding-left: 30px;
    height: 30px;
    width: 66px;
    line-height: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -15px;
    font-size: 1.3rem;
    background: #4bb6fa;
    color: #fff;
}

.list-content .status.on::before,
.inquiry-box .status.on::before {
    content: '';
    display: block;
    position: absolute;
    width: 10px;
    height: 10px;
    left: 10px;
    top: 50%;
    margin-top: -5px;
    background: url(../images/small-check-ico-on.png);
    background-size: 10px;
}

/* wallet */
.sub-content .board-list li a {
    display: block;

}

.sub-content .board-list li a .date2 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #999;
}

.inquiry-box .dayico {
    font-size: 1.2rem;
    color: #999;
    padding-left: 18px;
    position: relative;
    line-height: 20px;
}

.inquiry-box .dayico::before {
    position: absolute;
    top: 50%;
    left: 0;
    background: url(../images/clock-ico.png);
    width: 12px;
    height: 12px;
    background-size: 12px;
    margin-top: -6px;
    content: '';
}

.sub-content .board-list li a .line {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.main-con-box + .main-con-box {
    margin-top: 15px;
}

.sub-content .board-list li a .date3 {
    font-size: 1.4rem;
    color: #222;
}

/* 공지사항 */
.main-notice {
    width: 100%;
    margin: 20px 0;
    color: #fff;
}

.main-notice a {
    position: relative;
    width: 100%;
    font-size: 1.4rem;
    vertical-align: middle;
    display: block;
}

.main-notice a .tit {
    color: #fff;
    opacity: 0.7;
    width: 45px;
    font-weight: 500;
    letter-spacing: -0.08rem;
    display: inline-block;
    height: 18px;
}

.main-notice a .txt {
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left: 45px;
    width: calc(100% - 125px);
    height: 18px;
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    color: #fff;
}

.main-notice a .date {
    position: absolute;
    font-weight: 300;
    top: 50%;
    height: 18px;
    margin-top: -9px;
    right: 0;
}

/* 지갑 */
.main-wallet {
    position: relative;
    border-radius: 16px;
    text-align: center;
}

.main-wallet .main-pay-box {
    background: #fff;
    padding: 25px 10px 15px;
    border-radius: 14px;

}

.main-wallet .main-pay-box h3 {
    color: #222;
    line-height: 1.5;
    font-size: 1.5rem;
}

.main-wallet .main-pay-box p button {
    margin-left: 5px;
    font-size: 15px;
    background: #f6f8fa;
    border-radius: 30px;
    width: 24px;
    height: 24px;
    line-height: 20px;
    color: #aaaaaa;
    border-radius: 100%;
    font-size: 8px;
    transition: .3s;
}

.main-wallet .main-pay-box p button:active {
    background: #e2fbff;
}

.main-wallet .main-pay-box p {
    color: #222;
    font-weight: 700;
    line-height: 1.3;
}

.main-wallet .main-pay-box p span:first-child {
    font-size: 2.6rem;
}

.main-wallet .main-pay-box p span:last-child {
    font-size: 1.6rem;
    padding-left: 3px;
    vertical-align: text-top;
}

.main-wallet .quick-pay {
    text-align: center;
    background: #001330;
    display: flex;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.main-wallet .quick-pay li {
    float: left;
    text-align: center;
    width: 50%;
}

.main-wallet .quick-pay li.w100 {
    width: 100%;
}

.main-wallet .quick-pay li.left {
    position: relative;

}

.main-wallet .quick-pay li.left::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 1px;
    height: 20px;
    margin-top: -10px;
    background: rgba(255, 255, 255, 0.3);
    content: '';
    display: block;
}

.main-wallet .quick-pay li a {
    padding: 12px 10px;
    display: block;
    transition: .3s;
    line-height: 30px;
}

.main-wallet .quick-pay li a:active {

}

.main-wallet .quick-pay li a span {
    padding-left: 30px;
    position: relative;
    font-size: 14px;
    color: #fff;
}

.main-wallet .quick-pay li a span.left:before {
    width: 16px;
    height: 16px;
    background: url(../images/quick-pay-icon4.png);
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.main-wallet .quick-pay li a span.right:before {
    width: 16px;
    height: 16px;
    background: url(../images/quick-pay-icon3.png);
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.main-wallet .coupon-box {
    padding: 13px 15px 12px;
    background: #222;
}

.main-wallet .coupon-box a {
    display: flex;
    color: #fff;
    font-size: 1.4rem;
}

.main-wallet .coupon-box a span.tit {
    position: relative;
    padding-left: 30px;
}

.main-wallet .coupon-box a span.amount {
    margin-left: auto;
}

.main-wallet .coupon-box a span.tit:before {
    width: 18px;
    height: 13px;
    background: url(../../images/ticket-ico.png);
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 2px;
    left: 0;
}

/* 복합결제내역 및 정산내역 상세*/
.payment-recipe-top {
    position: relative;
    padding: 2rem 2rem 1rem;
}

.payment-recipe-top .state {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
    font-weight: 400;
    background: #f1f6f7;
    color: #a0a8ab;
    border-radius: 15px;
    padding: 5px 10px;
    width: auto;
    display: inline-block;
    height: auto;
    line-height: 1;
}

.payment-recipe-top .state.cancel { /* 결제취소 */
    background: #ffebea;
    color: #ec4956;
}

.payment-recipe-top .state.enroll { /* 환불접수 */
    background: #e9f3fd;
    color: #4378cc;
}

.payment-recipe-top .tit {
    font-size: 1.6rem;
    color: #222;
    font-weight: 600;
    margin-bottom: 7px;
    padding-right: 65px;
}

.payment-recipe-top .number {
    font-size: 1.3rem;
    color: #999;
    margin-bottom: 3px;
}

.payment-recipe-top .date {
    font-size: 1.3rem;
    color: #999;
}

.payment-recipe-top .number span,
.payment-recipe-top .date span {
    font-weight: 500;
    color: #666;
    padding-left: 5px;
}

/* 배너 */
.main-banner {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 15px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.03);
}

.main-banner img {
    display: block;
    width: 100%;
}

.main-banner .banner-slider {
    width: 100%;
}

.main-banner .swiper-pagination {
    position: absolute;
    text-align: center;
}

.main-banner .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 1);
    opacity: .5;
}

.main-banner .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 15px;
    letter-spacing: -0.08rem;
}

/* 서비스 바로가기 */
.quick-menu-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    margin-top: 10px;
}

.quick-menu-list + * {
    margin-top: 20px;
}

.quick-menu-list li {
    width: 33.3%;
}

.quick-menu-list li a {
    display: block;
    cursor: pointer;
}

.quick-menu-list li a div {
    position: relative;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    background-color: #e6e9ed;
    border-radius: 100%;
}

.quick-menu-list li a div:before {
    content: '';
    width: 70px;
    height: 70px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -35px;
    margin-left: -35px;
    background-image: url(../images/main-service-ico.png);
    background-repeat: no-repeat;
    background-size: 210px;
    background-position: 0 0;
}

.quick-menu-list li a div.menu-ico2:before {
    background-position: -70px 0;
}

.quick-menu-list li a div.menu-ico3:before {
    background-position: -140px 0;
}

.quick-menu-list li a div.menu-ico4:before {
    background-position: -210px 0;
}

.quick-menu-list li a h4 {
    text-align: center;
    font-weight: 500;
    font-size: 1.4rem;
    margin-top: 8px;
    color: #222;
}

/* 가장 인기있는 모바일상품권 */
.wrap-items .ranking {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    border-radius: 4px;
    background: rgba(28, 191, 183, 0.8);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

/* 지금 뜨는 가맹점 */
.wrap-items .recom {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    border-radius: 4px;
    background: rgba(255, 174, 0, 0.8);
    height: 22px;
    line-height: 22px;
    text-align: center;
    padding: 0 5px;
}

.wrap-items .item-slide .swiper-slide.shop {
    position: relative;
    font-size: 1.4rem;
    padding-right: 0.5rem;
    width: 130px;
    box-sizing: border-box;
}

.wrap-items .item-slide .swiper-slide.shop .thumbnail-wrap {
    width: 120px;
    height: 80px;
}

/* 추천 가맹점*/
.main-recommend-shop li {
    float: left;
    width: 50%;
    padding-right: 10px;
}

.main-recommend-shop li:nth-child(2n) {
    padding-left: 10px;
    padding-right: 0;
}

.main-recommend-shop:after {
    display: block;
    clear: both;
    content: '';
}

.main-recommend-shop li .shop-box {
    text-align: center;
}

.main-recommend-shop li .shop-box .thumbnail-wrap {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    max-width: 300px;
    max-height: 300px;
    margin-bottom: 10px;
}

.main-recommend-shop li .shop-box .shop {
    font-size: 1.4rem;
    margin-bottom: 20px;
}

/*====================================================================================================*/

/* 검색 카테고리 */
.menu-slide {
    width: 100%;
    margin-bottom: 10px;
}

.menu-slide .swiper-container {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
}

.menu-slide .swiper-slide {
    position: relative;
    width: 25%;
    /*max-width: 100px;*/
    box-sizing: border-box;
    text-align: center;
    overflow: hidden;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.menu-slide .swiper-slide a {
    width: 100%;
    display: inline-block;
    display: -webkit-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
}

.menu-slide .swiper-slide a h4 {
    color: #000;
    text-align: center;
    font-size: 13px;
    margin-top: 10px;
    font-weight: 300;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.menu-slide .swiper-slide a h5 {
    margin-bottom: 10px;
    color: #999;
    font-size: 10px;
    font-weight: 200;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}


/* 상단 2차 tab */
.tabFixed {
    position: fixed;
    top: 55px;
    left: 0;
    z-index: 100;
    background: #fff;
    width: 100%;
}

.tab_wrap {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.tab_wrap li {
    display: inline-block;
    float: left;
    width: 50%;
    box-sizing: border-box;
}

.tab_wrap li a {
    font-weight: 400;
    font-size: 14px;
    line-height: 39px;
    display: block;
    position: relative;
    color: #888b92;
    border-bottom: 1px solid #eee;
}

.tab_wrap .tab02 a {
    background: #fff;
    color: #000;
    border-bottom: 1px solid #000;
}

.tab_wrap li a.active span {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 9px;
    display: block;
    width: 15px;
    line-height: 15px;
    height: 15px;
    background: #18c9ba;
    border-radius: 8px;
    color: #fff;
}


/*카드 계좌관리*/
.simpleEdit {
    margin: 30px 0 0 25px;
}

.simpleEdit .txt1 {
    margin-top: 5px;
    letter-spacing: -0.05rem;
}

.arrow {
    border: solid #555;
    border-width: 0 1px 1px 0;
    vertical-align: middle;
    display: inline-block;
    padding: 3px;
}

.arrow.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.bgTit {
    width: 100%;

    background: #ebeff3;
    color: #666;
    border-top: 1px solid #e1e2e4;
    border-bottom: 1px solid #e1e2e4;
    font-size: 1.5rem;
    padding-left: 20px;
    font-weight: 500;
    position: relative;
    height: 40px;
    line-height: 40px;
}

.bgTit button {
    font-size: 11px;
    color: #333;
    border-radius: 0px;
    position: absolute;
    top: 0;
    right: 0;
    height: 38px;
    line-height: 38px;
    padding-left: 15px;
    font-weight: 500;
}

.bgTit button i {
    padding: 0 5px 0px;
}

.mypage-info + .bgTit {
    border-top: 0;
}

/* 안내문구 */
.guidF {
    position: relative;
    margin: 15px 20px;
    color: #232732;
}

.guidF i {
    color: #aaa;
}

.guidF strong {
    display: inline-block;
    padding-left: 5px;
    font-size: 13px;
}

.guidF-list {
    margin-top: 5px;
}

.guidF-list li {
    position: relative;
    padding-left: 15px;
    padding-bottom: 2px;
    letter-spacing: -0.05rem;
    line-height: 1.3;
    word-break: keep-all;
    color: #666;
}

.guidF-list li:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    background: #aab9bb;
    top: 6px;
    left: 5px;
    box-sizing: none;
}

.guidF-list li span {
    color: #317174;
    vertical-align: unset !important;
    margin-left: 0;
    font-weight: 600;
}

/*선물하기*/
.color-box {
    padding: 0 20px;
    background: #282a3c;
    color: #fff;
    line-height: 70px;
    height: 70px;
}

.color-box span {
    display: block;

}

.color-box span em {
    font-style: normal;
    font-size: 14px;
}

.color-box span em:last-child {
    float: right;
    font-size: 18px;
    font-weight: 700;
}

.backBg {
    background-image: linear-gradient(160deg, #361cbe 0%, #3e0077 100%);
    padding: 20px 0 60px 0;
    text-align: center;
}

.backBg + .shadowForm {
    margin-top: -60px;
    padding: 20px;
}

.backBg + .point-box {
    margin-top: -100px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .09);
}

.backBg img {
    display: block;
    margin: 0 auto;
}

.backBg i {
    font-size: 40px;
    color: #fff;
}

.backBg p {
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    padding-top: 10px;
    padding-bottom: 15px;
}

.shadowForm {
    position: relative;
    margin: 20px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .03);
    -webkit-box-shadow: 1px 3px 9px 0 rgb(0 0 0 / 15%);
    box-shadow: 1px 3px 9px 0 rgb(0 0 0 / 15%);
    overflow: hidden;
}

.shadowForm .basicF {
    display: block;
    text-align: left;
    font-weight: 500;
    color: #161616;
    font-size: 14px;
}

.userId {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.userId strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0;
}

.userId span {
    display: block;
    color: #888;
    font-size: 14px;
    font-weight: 400;
}

.shadowForm .basicF span {
    line-height: 1.3;
}

.shadowForm .basicF strong {
    float: right;
    font-size: 18px;
    letter-spacing: -.3px;
}

.blueBtn {
    padding: 12px 30px;
    margin-top: 20px;
    letter-spacing: -.5px;
    background: #edf1f5;
    color: #232732;
    font-size: 13px;
    border-radius: 3px;
    width: 100%;
}

.rightB {
    border-radius: 4px;
    float: right;
    font-weight: 500;
    padding: 3px 10px;
    background: #317174;
    color: #fff;
}

.listB {
    float: right;
    font-size: 14px;
    font-weight: 700;
    background: #fff;
}

.listB span {
    margin-left: 5px;
}

/*이용내역 없을 때*/
.listNone {
    text-align: center;
    line-height: 46px;
    color: #a7a8aa;
}

.listNone .noneMark {
    display: block;
    margin: 0 auto;
    padding-top: 20px;
    max-width: 80px;
    width: 100px;
}

.listNone span {
    font-size: 1.2rem;
}

.no_result {
    width: 100%;
    min-height: 100px;
    text-align: center;
    color: #222;
    font-size: 1.4rem;
    padding: 30px 0;
}

.ico_wrap {
    position: relative;
    display: block;
    width: 81px;
    height: 81px;
    margin: auto;
    background-color: #e8ecef;
    border-radius: 50%;
    margin-bottom: 25px;
}

.ico_wrap .ico_point:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 22px;
    background: url(../images/ico_point.png);
    transform: translate(-50%, -50%);
}

.no_result p {
    color: #999;
}

/*이용내역 small tab*/
.tab_wrap.ver02 {
    width: 100%;
    height: 36px;
    text-align: center;
    overflow: hidden;
    background: #fff;
    border-bottom: none;
}

.tab_wrap.ver02 li {
    display: inline-block;
    margin-right: 15px;
    float: left;
    width: auto;
}

.tab_wrap.ver02 li a {
    color: #aaa;
    font-size: 13px;
    line-height: 34px;
}

.tab_wrap.ver02 .tab02 a {
    color: #000;
    font-weight: 900;
    background: none;
}

/*INPAY*/
.user img.eLogo {
    width: 50%;
    max-width: 120px;
    margin-bottom: 15px;
    display: inline-block;
}

.shadowForm.bgGreen {
    background-image: linear-gradient(120deg, #317174 0%, #93d3d8 100%);
    border: none;
}

.shadowForm.bgGreen a {
    color: #fff;
}

.shadowForm.dep2 {
    display: inline-block;
    min-width: 42%;
    margin-right: 0;
}

.shadowForm.dep2 + .shadowForm.dep2 {
    margin-left: 0;
    margin-right: 20px;
    float: right;
}

.backBg + .point-box {
    margin-top: -100px;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .09);
}

.shadowForm .basicF {
    display: block;
    text-align: left;
    font-weight: 500;
    color: #161616;
    font-size: 14px;
}

.shadowForm .basicF span {
    line-height: 1.3;
}

.shadowForm .basicF strong {
    float: right;
    font-size: 18px;
    letter-spacing: -.3px
}

.payForm {
    letter-spacing: -.5px;
    position: relative;
    margin: 0 auto;
    max-width: 400px;
}

.payForm span {
    font-weight: 400;
    color: #666;
    font-size: 14px;
}

.payForm strong {
    display: block;
    font-size: 16px;
    font-weight: 500;
    line-height: 50px;
    word-break: keep-all;
    border-bottom: 1px solid #eeeef4;
}

.payForm strong > span {
    color: #232732;
    font-size: 23px;
    margin-right: 2px;
    font-weight: 900;
}

.payForm .pointT {
    font-size: 14px;
    font-weight: 500;
    color: #232732;
    margin-right: 5px;
}

.payForm .radiusBtn {
    text-align: center;
    padding: 0 3px;
    background: #317174;
    position: absolute;
    right: 0;
    top: 23px;
    border-radius: 20px;
}

.payForm .radiusBtn li {
    width: auto;
    display: inline-block;
}

.payForm .radiusBtn li a {
    display: block;
    line-height: 12px;
    margin: 10px 0;
    padding: 0 5px;
    width: 100%;
    font-weight: 500;
    font-size: 13px;
    color: #fff;
    border-right: 1px solid rgba(255, 255, 255, .2);
}

.payForm .radiusBtn li:nth-child(2) {
    margin-left: -4px;
}

.payForm .radiusBtn li:last-child > a {
    border-right: none;
}

.payForm .cardBarcode {
    border-bottom: 1px solid #eeeef4;
    padding: 10px 0;
    text-align: center;
}

.payForm .cardBarcode img {
    width: 90%;
}

.payForm .cardNum {
    font-size: 11px;
    color: #434756;
    letter-spacing: 3px;
    margin: 10px 0 20px;
}

.payForm .btn2 {
    text-align: center;
}

.payForm .btn2 li {
    width: 32%;
    display: inline-block;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.payForm .btn2 li:last-child {
    border-right: none;
}

.payForm .btn2 li a {
    display: block;
    width: 100%;
    text-align: center;
    color: #888;
    font-weight: 400;
    font-size: 11px;
    letter-spacing: -0.5px;
}

.payForm .btn2 li a img {
    height: 14px;
    width: auto;
    margin-right: 5px;
}

.payForm .amount {
    width: 50%;
    float: left;
    padding: 5px 0;
}

.payForm .amount li {
    color: #666;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 500;
}

.payForm .amount li.price {
    letter-spacing: -1px;
    font-size: 14px;
    text-align: right;
    padding-right: 8px;
}

.payForm .amount li.price span {
    color: #232732;
    font-weight: 700;
    font-size: 16px;
}

.payForm.ver02 {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    margin-top: 32vh;
}

.countdown.ver02 {
    text-align: center;
    margin-top: 30px;
}

.basicBtn {
    position: fixed;
    clear: both;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 52px;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
    width: 100%;
}

.basicBtn button {
    opacity: 1;
    width: 100%;
    letter-spacing: 1px;
    background: #18c9ba;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    line-height: 50px;
    float: left;
}

.basicBtn button.left {
    width: 50%;
    background: #fff;
    color: #888;
    border-top: 1px solid #ddd;
}

.basicBtn button.right {
    width: 50%;
    border-top: 1px solid #18c9ba;
    color: #fff;
}

.basicBtn button.offBtn {
    letter-spacing: 0;
    background: #bfc0c5;
}

.basicInput {
    box-sizing: border-box;
    padding: 0 20px;
}

/*여백있는 bottom 버튼*/
.bottom-btn {
    position: fixed;
    clear: both;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 10px;
    width: 100%;
}

.bottom-btn.bx-gr {
    box-shadow: -1px -2px 10px 0px rgb(0 0 0 / 10%), -4px -1px 6px 4px rgb(255 255 255 / 17%);
}

.bottom-btn.gray {
    background: #f6f8fa;
}

.bottom-tit {
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    margin: 10px 0 20px;
}

.bottom-tit span {
    float: right;
    color: #003f93;
    font-size: 16px;
    font-weight: 600;
}

.bottom-btn button {
    opacity: 1;
    width: 100%;
    background-image: linear-gradient(165deg, #003f93 0%, #4a1986 100%);
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    line-height: 46px;
    float: left;
    border-radius: 24px;
    border: 1px solid #003f93;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1), -4px -1px 6px 4px rgba(255, 255, 255, 0.17);
}

.bottom-btn button.left {
    width: 49.2%;
    background: #fff;
    color: #888 !important;
    border: 1px solid #ddd;
}

.bottom-btn button.left.w100,
.bottom-btn button.right.w100 {
    width: 100%;
    margin-left: 0;
}

.bottom-btn button.left + button {
    margin-left: 1.6%;
}

.bottom-btn button.right {
    width: 49%;
    color: #fff;
}

.bottom-btn button.left.gray {
    background: #888b92;
    color: #fff !important;
    border: 1px solid #888b92;
}

.basicInput2 {
    box-sizing: border-box;
    padding: 0 20px;
}

.login-content .bottom-btn {
    background: transparent;
}

.bottom-btn .fix-btn-box {
    display: flex;
    justify-content: space-between;
}

.bottom-btn .fix-btn-box.col2 button {
    width: 49.4%;
}

/*input 기본스타일*/
.basicInput select {
    width: 100%;
    padding: 0 6px;
    height: 40px;
    background: #fff;
}

.txt4 {
    position: relative;
    background: tra;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    line-height: 16px;
}

.basicInput .input_half {
    float: left;
    width: 49%;
    margin-right: 1%;
}

.basicInput .input_fullbox {
    clear: both;
}

.txt5 {
    font-size: 14px;
    font-weight: 500;
}

.basicInput label {
    width: auto;
    font-weight: 700;
    font-size: 13px;
    color: #232732;
    text-align: left;
    position: relative;
    overflow: hidden;
}

.basicInput .txt1 {
    padding: 15px 0 8px;
    width: auto;
    font-weight: 700;
    font-size: 13px;
    color: #232732;
    text-align: left;
    position: relative;
    overflow: hidden;
}


.input-box {
    position: relative;
    text-align: left;
    color: #222;
}

.input-box + .input-box {
    margin-top: 5px;
}

.txt2 {
    position: relative;
}

.txt2 textarea {
    border: none;
    width: 100%;
    font-size: 13px;
    min-height: 150px;
    line-height: 31px;
    padding: 5px 10px;
    background-color: #f6f6f6;
    color: #232732;
    outline: none;
    margin-top: 10px;
    border-radius: 8px;
}

.gray-guide-box,
.guide_txt {
    color: #666;
    line-height: 17px;
    text-align: left;
    word-break: keep-all;
}

.gray-guide-box i,
.guide_txt i {
    color: #b4bac7;
    padding-right: 3px;
}

.guide_txt .strong {
    color: #18c9ba;
    font-weight: 500;
}

.guide_txt2 {
    font-size: 13px;
    text-align: left;
    line-height: 1.6;
    color: #317174;
    word-break: keep-all;
}

.guide_txt3 {
    font-size: 13px;
    text-align: left;
    line-height: 1.6;
    color: #18c9ba;
    word-break: keep-all;
}

.inputButton {
    background: none;
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    padding: 0 10px;
    border: none;
    font-size: 12px;
    font-weight: 900;
}

/*input 제목*/
.txt {
    font-size: 1.4rem;
    font-weight: 500;
    text-align: left;
    color: #222;
}

.group-tit {
    font-size: 1.5rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}

.input-tit {
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
    color: #222;
    margin-bottom: 10px;
    position: relative;
}

.input-tit + .input-box {
    margin-top: 10px;
}

.input-box + .system-txt {
    margin-top: 10px;
}

.system-txt {
    font-size: 1.2rem;
    color: #0059b9;
}

.input-tit span {
    color: #888;
    padding-left: 5px;
    font-weight: 400;
    font-size: 12px;
}

.orderSheet-info .strong {
    color: #003f93;
    font-weight: 500;
}

.txt3 + .small-recipt {
    margin-top: 5px;
}

.label-tit {
    display: block;
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: left;
    color: #222;
    margin-bottom: 1rem;
}

.label-tit button {
    color: #999;
    float: right;
    background: transparent;
    text-decoration: underline;
    font-size: 1.2rem;
}

.label-tit .guide {
    font-size: 1.2rem;
    color: #4f565a;
    font-weight: 400;
    padding-left: .5rem;
}

/* 추가 삭제 버튼*/
.input-tit .add-btn {
    background: #66a9ff;
    position: absolute;
    top: 0;
    right: 60px;
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin-left: 3px;
    width: 55px;
    color: #fff;
    border-radius: 4px;
    padding: 0;
}

.input-tit button span {
    color: #fff;
    padding: 0 5px 0 0;
    font-size: 1rem;
}

.input-tit .delete-btn {
    background: #6c757d;
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    height: 24px;
    line-height: 24px;
    margin-left: 3px;
    width: 55px;
    color: #fff;
    border-radius: 4px;
    padding: 0;
}


/*첨부파일*/
.file-upload {
    width: calc(100% - 100px);
    display: inline-block;
    border-radius: 4px;
    background: #fff;
    border: 1px solid #ddd;
    position: relative;
}

.file-upload input[type="file"] { /* 파일 필드 숨기기 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.file-upload input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.file-upload label {
    display: inline-block;
    padding: .5em .75em;
    color: #999;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fdfdfd;
    cursor: pointer;
    border: 1px solid #ebebeb;
    border-bottom-color: #e2e2e2;
    border-radius: .25em;
}

.file-upload button.delete {
    color: #999;
    background: transparent;
    position: absolute;
    right: 0;
    width: 40px;
    height: 38px;
    line-height: 38px;
}

/* named upload */
.file-upload .upload-name {
    width: calc(100% - 40px);
    display: inline-block;
    padding: 5px 10px;
    font-size: inherit;
    font-family: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #ffffff;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 38px;
}

.form-box label.inp-btn {
    font-size: 12px;
    line-height: 38px;
    padding: 0;
    font-weight: 500;
    background: #ffffff;
    outline: none;
    position: absolute;
    top: 0;
    right: 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    width: 95px;
    color: #222;
}

/*버튼스타일*/
.fullBtn { /* 포인트 색상 */
    display: inline-block;
    background-image: linear-gradient(165deg, #003f93 0%, #4a1986 100%);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, .1), -4px -1px 6px 4px rgba(255, 255, 255, 0.17);
    width: 100%;
    line-height: 42px;
    color: #fff !important;
    font-size: 1.4rem;
    font-weight: 500;
    text-align: center;
    border-radius: 21px;
}

.fullBtn span.cartCount {
    border-radius: 50%;
    background: #fff;
    color: #003f93;
    display: inline-block;
    height: 23px;
    width: 23px;
    vertical-align: middle;
    line-height: 23px;
    margin-right: 10px;
    font-size: 13px;
    font-weight: 500;

}

.fullBtn2 { /* 흰 배경 회색 라인 */
    display: inline-block;
    width: 100%;
    line-height: 38px;
    color: #999;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 21px;
    transition: 0.3s;

}

.line-btn { /* 흰 배경 회색 라인 */
    display: inline-block;
    width: 100%;
    line-height: 38px;
    color: #999;
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 4px;
    transition: 0.3s;

}

.fullBtn2:active {
    background: rgba(0, 0, 0, 0.02);
}

.fullBtn3 { /* 포인트 색상 라인 */
    display: inline-block;
    background: #fff;
    width: 100%;
    line-height: 38px;
    border: 1px solid #003f93;
    color: #003f93 !important;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    border-radius: 4px;
}


.fullBtn4 { /* 회색 버튼 */
    display: inline-block;
    width: 100%;
    line-height: 38px;
    color: #fff;
    background: #6c757d;
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    border: 1px solid #6c757d;
    padding: 0;
    border-radius: 21px;
    transition: 0.3s;
}

.fullBtn4:active {
    background: #696d77;
}

.more-btn {
    margin: 0 auto;
    display: block;
    width: 130px;
    line-height: 38px;
    color: #888b92;
    background: #fff;
    font-size: 1.4rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #ddd;
    transition: 0.3s;
}

.more-btn:active {
    margin: 0 auto;
    display: block;
    width: 130px;
    line-height: 38px;
    color: #888b92;
    background: rgba(0, 0, 0, 0.02);
    font-size: 1.4rem;
    border-radius: 6px;
    text-align: center;
    border: 1px solid #ddd;
}

.more-btn i {
    font-size: 10px;
    padding-left: 5px;
    vertical-align: middle;
}

.basicInput .unit {
    float: none;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
}

.basicInput .unit dd {
    border: none;
    border-right: 1px solid #ddd;
    padding: 6px 0;
    display: inline-block;
    width: 20%;
    float: left;
    font-size: 11px;
    border-radius: 0px;
}

.basicInput .unit dd:active {
    background: #e9ecef;
}

.basicInput .unit dd:last-child {
    border-right: none;
}

.basicInput .unit:after {
    content: "";
    display: block;
    clear: both;
}

.containerTit {
    font-size: 16px;
    text-align: left;
    font-weight: 700;
    padding: 5px 0;
    letter-spacing: -0.5px;
    color: #232732;
    position: relative;
}

.containerTit .divisionWrap {
    text-align: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    position: absolute;
    top: 3px;
    right: 10px;
}

.containerTit .divisionWrap dd {
    display: inline-block;
    font-weight: 400;
    border-right: 1px solid #ddd;
    padding: 5px 7px;
    font-size: 11px;
    float: left;
    letter-spacing: -.5px;
}

.containerTit .divisionWrap dd:last-child {
    border-right: none;
}

.containerTit .divisionWrap dd:hover {
    color: #000;
    font-weight: 500;
}

.containerTit .divisionWrap:after {
    content: "";
    display: block;
    clear: both;
}

/*INPAY메인배경변경*/
.type_gray {
    min-height: -webkit-calc(100vh - 55px);
    min-height: calc(100vh - 55px);
    background: #f6f8fa; /*f2f4f7*/
}

.type_gray2 {
    min-height: -webkit-calc(100vh - 55px);
    min-height: calc(100vh - 55px);
    background-image: linear-gradient(165deg, #fff 0%, #f0f4f8 100%);
}

.point-box {
    background: #fff;
    margin-bottom: 15px;
    margin: 0 20px;
    text-align: left;
    cursor: pointer;
    border-radius: 15px;
    box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, .1), -4px -1px 6px 4px rgba(255, 255, 255, 0.17);
    overflow: hidden;
}

.point-menu {
    margin-top: 5px;
    max-width: 400px;
    margin: 0 auto;
}

.point-menu > li {
    color: #333;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    border-bottom: 1px solid #eeeef4;
}

.point-menu > li:last-child {
    margin-top: 5px;
    border-bottom: 0;
}

.point-menu li a.menu_tit {
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 500;
    position: relative;
    padding: 10px 0;
}

.point-menu li a.menu_tit:hover {
    text-decoration: none;
    font-weight: 700;
    color: #000;
}

.point-menu li a.menu_tit img {
    width: 25px;
    margin: 0 10px 0 20px;
}

.point-menu li a.menu_tit p {
    font-size: 14px;
    display: inline-block;
    text-align: right;
    position: absolute;
    top: -4px;
    right: 15px;
    vertical-align: center;
    padding-top: 18px;
    color: #aaa;
}

.point-menu li strong {
    color: #111;
    margin-right: 3px;
}

.point-menu li a.menu_tit p span {
    margin-right: 5px;
}

.point-menu li a.menu_tit span i {
    -webkit-transition: 3s, -webkit-transform 3s;
    transition: 3s, transform 3s;
}

.point-menu li ul {
    display: none;
    border-top: 1px solid #f0f0f0;
    text-align: left;
}

.point-menu li ul li {
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    height: 30px;
    background: #f7f7f7;
    padding-left: 25px;
    line-height: 30px;
    color: #aaa;
}

.point-menu li ul li span {
    float: right;
    padding-right: 20px;
    color: #aaa;
}

.point-menu li ul p {
    float: right;
    padding-right: 20px;
    color: #aaa;
}

.point-menu li table {
    display: none;
    border-top: 1px solid #f0f0f0;
    width: 100%;
    background: #f7f7f7;
    font-size: 12px;
    color: #aaa;
    font-weight: 500;
    letter-spacing: -0.05rem;
}

.point-menu li table th {
    padding-left: 20px;
    font-weight: 500;
}

.point-menu li table td {
    text-align: right;
    padding: 10px 20px 10px 0;
    color: #aaa;
}

/* QR 결제방법 */
.payment-option-top {
    background: #003f93;
    padding: 40px 20px 60px 20px;
    text-align: center;
}

.payment-option-top .tit {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

.payment-option-top .txt {
    color: #fff;
    font-size: 1.4rem;
    margin-top: 10px;
    font-weight: 300;
}

.payment-option-top + .payment-option-box {
    margin-top: -25px;
}

.payment-option-box {
    position: relative;
    margin: 10px 15px 10px;
    cursor: pointer;
    background: #fff;
    overflow: hidden;
    z-index: 10;
    border-radius: 4px;
    -webkit-box-shadow: 0px 1px 6px 0 rgb(0 0 0 / 8%);
    box-shadow: 0px 1px 6px 0 rgb(0 0 0 / 8%);
}

.con-box .payment-option-box {
    margin: 0;
}

.con-box .payment-option-box + .payment-option-box {
    margin-top: 10px;
}

.payment-option-box a {
    display: block;
    padding: 30px 5px 30px 20px;
    transition: 0.3s;
}

.payment-option-box.ver2 a {
    padding: 30px 20px 20px 20px;
}

.payment-option-box a:active {
    background: rgba(0, 0, 0, 0.01);
}

.payment-option-box .payment-ico {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-image: url(../images/payment-ico.png);
    background-repeat: no-repeat;
    background-size: 80px;
    background-position: 0 0;
}

.payment-option-box .payment-ico.ico2 {
    background-position: -40px 0;
}

.payment-option-box .payment-txt {
    display: inline-block;
    width: calc(100% - 70px);
    padding-left: 15px;
}

.payment-option-box .payment-txt .tit {
    font-size: 1.6rem;
    font-weight: 500;
}

.payment-option-box .payment-txt .txt {
    font-size: 1.3rem;
    font-weight: 400;
    color: #999;
    margin-top: 5px;
}

/* 결제수단 */
h3.payment-top-tit {
    font-size: 1.2rem;
    color: #222;
    padding: 10px 20px;
    background: rgba(24, 201, 186, 0.1);
    border-top: 1px solid rgba(24, 201, 186, 0.2);;
    border-bottom: 1px solid rgba(24, 201, 186, 0.2);;
}

.payment-method-box {
    background: #fff;
}

.payment-method-detail .balance {
    margin-bottom: 20px;
}

.payment-method-box .payment-method-tit {
    position: relative;
    background: #fff;
    padding: 0 20px;
    height: 46px;
}

.payment-method-box + .payment-method-box {
    border-top: 1px solid #e8e8e8;
}

.payment-method-box .payment-method-tit h3 {
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 46px;
}

.payment-method-box .payment-method-tit span {
    position: absolute;
    right: 45px;
    top: 0;
    text-align: right;
    font-size: 1.4rem;
    line-height: 46px;
}

.payment-method-box .payment-method-tit button {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 46px;
    background: transparent;
}

.payment-method-box .payment-method-detail {
    padding: 20px 20px 0 20px;
    background: #fff;
    border-top: 1px solid #e8e8e8;
}

.payment-method-box .payment-method-detail .giftcard-list li {
    border-bottom: none;
    padding-bottom: 20px;
}

.payment-method-box .payment-method-detail .giftcard-list li + li {
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

.payment-method-box .payment-method-detail .giftcard-list li .giftcard-info .thumbnail-wrap {
    width: 60px;
    height: 60px;
    margin-left: 5px;
}

.payment-method-box .payment-method-detail .giftcard-list li .giftcard-info .giftcard-text {
    width: calc(100% - 110px);
    width: -webkit-calc(100% - 110px);
    padding-top: 0;
    margin: 0 0 0 10px;
}

.payment-method-box .payment-method-detail .giftcard-list li .giftcard-group {
    padding: 0;
}

.payment-method-box .payment-method-detail .giftcard-date p {
    padding: 8px 12px;
    text-align: right;
    background: #f7f7f7;
    border: none;
    border-radius: 4px;
    margin-top: 15px;
    color: #666;
    font-size: 1.2rem;
}

.payment-method-box .payment-method-detail .giftcard-list li .use-input-box {
    margin-top: 15px;
}

/* 검색 */
.search-input-box {
    padding: 10px 15px;
    box-sizing: border-box;
}

.search-input-box .text-box {
    display: inline-block;
    width: calc(100% - 70px);
    width: -webkit-calc(100% - 70px);
}

.search-input-box .text-box input {
    font-size: 1.4rem;
    padding: 0 10px;
    border-radius: 4px;
}

.search-input-box .btn {
    width: 65px;
    display: inline-block;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    background: #222;
    border-radius: 0;
    float: right;
    border-radius: 4px;
}

.search-input-box .btn input {
    font-size: 1.4rem;
    background: #222;
    height: 38px;
    line-height: 38px;
    border: none;
    border-radius: 0;
    color: #fff;
    padding: 0;
}


/* 상품권결제 상품권 이미지 */
.giftcard-img-wrap {
    width: 100%;
    text-align: center;
}

.giftcard-img-wrap img {
    width: 100%;
    max-width: 400px;
}

/* QR 화면 */
.qrImg {
    display: block;
    width: 80%;
    max-width: 160px;
    margin: 0 auto;
    clear: both;
}

.qrImg img {
    width: 100%;
}

.countdown {
    font-weight: 500;
    margin: 20px 0;
    font-size: 1.2rem;
    color: #666;
    text-align: center;
}

.countdown span {
    color: #222;
    padding-left: 5px;
}


/* 결제비밀번호설정 */
.passwordForm {
    text-align: center;
    padding-top: 10vh;
    letter-spacing: -0.5px;
}

.passwordForm h1 {
    font-size: 20px;
    font-weight: 700;
    color: #212429;
}

.passwordForm h2 {
    margin: 12px 0;
    font-size: 13px;
    font-weight: 500;
    color: #868f96;
}

.passwordForm input {
    height: 40px;
    width: 40px;
    margin: 10px 2px;
    text-align: center;
    border-radius: 0;
    color: #232732;
    font-size: 12px;
    background: none;
    border: none;
    border-bottom: 3px solid #232732;
}

.fixedBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.fixedBottom p {
    font-size: 11px;
    color: #888;
    line-height: 1.2;
    text-align: center;
    padding: 20px 10px;
}

.fixedBottom .bottomBtn button {
    width: 100%;
    letter-spacing: 1px;
    background: #18c9ba;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 500;
    border: none;
    line-height: 55px;
}

.keyboardF {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    padding: 20px;
    background: #003f93;
}

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

.keyboardF li.none {
    background: #003f93 !important;
}

.keyboardF .except img {
    width: 40px;
}

.keyboardF.col4 li {
    width: 25%;
    line-height: 6rem;
}

.keyboardF.col4 li.col2 {
    width: 50%;
}

.keyboardF.col4 li .bgicon {
    width: 30px;
}

.keyboardF li {
    float: left;
    width: 33.3%;
    line-height: 8.5vh;
    color: #fff;
    font-weight: 500;
    font-size: 1.6rem;
    text-align: center;
}

.keyboardF li button {
    background: transparent;
    color: #fff;
    width: 70px;
    height: 70px;
    border-radius: 15px;
    transition: 0.3s;
}

.keyboardF li button:active {
    background: #001d43;
}

.keyboardF li:nth-child(10n) {
    font-size: 12px;
}

.keyboardF li:nth-child(3n) {
    border-right: none;
}

.paymentBg h1 {
    text-align: center;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    padding: 50px 0;
}

.paymentBg h1 i {
    display: block;
    font-size: 60px;
    margin-bottom: 10px;
}

/* 가맹점앱 결제금액입력 */
.paymentPay {
    margin: 15px 15px 10px;
}

.paymentPay li {
    position: relative;
    text-align: left;
}

.bgInput {
    background: #eff0f4;
    height: 40px;
    width: 100%;
    border: none;
    margin: 15px 0 0;
    padding: 0 30px;
    font-size: 17px;
    font-weight: 700;
    box-sizing: border-box;
    text-align: right;
}

.bgInput + span {
    display: block;
    position: absolute;
    right: 8px;
    bottom: 12px;
    font-size: 17px;
    font-weight: 700;
}

.inputP {
    color: #888;
    text-align: left;
    padding: 10px 5px;
}

.inputP span {
    display: inline-block;
    float: right;
}

/* 결제결과이미지 */
.bottom-table-wrap {
    background: #fff;
    padding: 15px;
    border-radius: 16px;
    margin-bottom: 15px;
    border: 1px solid #eaebec;
}

.bottom-table-wrap .result-info {
    width: 100%;
    font-size: 1.4rem;
    color: #222;
    margin: 0;
}

.bottom-table-wrap .result-info th {
    width: 120px;
    text-align: left;
    padding: 8px 0;
    color: #888b92;
    font-weight: 400;
}

.bottom-table-wrap .result-info tr:first-child {
    padding-top: 0;
}

.result-info th span.line {
    position: relative;
    padding-left: 20px;
    font-size: 1.3rem;
}

.result-info th span.line:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: solid #e8e8e8;
    border-width: 0 0 2px 2px;
    content: '';
}

.bottom-table-wrap .result-info td {
    text-align: right;
    padding: 5px 0;
}

.bottom-table-wrap .result-info td strong {
    font-size: 16px;
    color: #003f93;
}

.bottom-table-wrap .result-info tfoot th,
.bottom-table-wrap .result-info tfoot td {
    font-size: 1.6rem;
    font-weight: 500;
    color: #000;
}

.order-img {
    text-align: center;
    padding-top: 40px;
}

.order-img i {
    font-size: 56px;
    color: #003f93;
}

.order-img .order-title {
    padding-top: 20px;
    padding-bottom: 10px;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.5;
}

.order-img p span {
    font-size: 1.6rem;
    font-weight: 400;
}

.order-img .order-txt {
    font-size: 1.6rem;
    color: #666;
    font-weight: 400;
    padding-bottom: 10px;
    text-align: center;
}

/* 결제결과테이블 */
.result-info {
    width: 100%;
    padding: 10px;
    font-size: 13px;
    color: #222;
    margin: 20px 0 0;
}

.result-info thead th,
.result-info thead td {
    padding-top: 20px;
}

.result-info th {
    width: 120px;
    text-align: left;
    padding: 8px 0;
    color: #888;
    font-weight: 400;
}

.result-info tr:first-child {
    padding-top: 20px;
}

.result-info td {
    text-align: right;
    padding: 8px 0;
}

.result-info tfoot th,
.result-info tfoot td {
    padding-bottom: 20px;
}

.result-info td strong {
    font-size: 16px;
}

/* 복합결제완료 */
.complex-result-box {
    background: #f3f3f3;
    padding: 5px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 20px;
}

.complex-result-box h3 {
    font-size: 1.4rem;
    color: #a9acb4;
    padding: 8px 10px 10px;
    font-weight: 600;
}

.complex-result-box .result-info {
    margin: 0;
}

.complex-result-box + .complex-result-box {
    margin-top: 10px;
}

.complex-result-box .result-detail {
    border-radius: 10px;
    background: #fff;
    padding: 10px 15px;
}

.complex-result-box .result-detail + .result-detail {
    margin-top: 5px;
}

/* 마이페이지 */
.myInfo {
    position: relative;
    width: 100%;
}

.myInfo h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.6;
}

.myInfo span {
    display: inline-block;
    font-size: 14px;
    color: #888b92;
    font-weight: 200;
    line-height: 1.8;
}

.myInfo button.edit {
    position: absolute;
    top: 50%;
    right: 20px;
    background: #f1f2f9;
    color: #888b92;
    line-height: 30px;
    border-radius: 15px;
    margin-top: -15px;
    padding: 0 15px;
}

.mypage-info {
    color: #999;
    width: 100%;
    font-size: 14px;
}

.mypage-info tr {
    border-bottom: 1px solid #eeeff1;
}

.mypage-info th {
    text-align: left;
    line-height: 3;
    padding-left: 20px;
    font-weight: 400;
}

.mypage-info td {
    text-align: right;
    padding-right: 20px;
    color: #232732;
    font-weight: 300;
}

.my-edit-btn {
    border-radius: 6px;
    color: #888b92;
    border: 1px solid #ddd;
    background: #fff;
    font-weight: 400;
    font-size: 12px;
    padding: 6px 10px;
    margin-left: 8px;
}

.my-edit-btn:active {
    background: rgba(0, 0, 0, 0.05);
}

.color-btn {
    color: #888b92 !important;
    padding: 10px;
    text-align: center;
    display: block;
    font-weight: 400;
    text-decoration: underline !important;
}

.color-btn i {
    font-size: 10px;
    padding-left: 5px;
}

/* 계좌관리 */
.accountW {
    padding: 0 20px;
    background: #fff;
}

.accountW:after {
    content: "";
    display: block;
    clear: both;
}

.accountW p {
    text-align: center;
    line-height: 1.5;
    padding: 20px 0px 10px;
    word-break: keep-all;
}

.accountW p strong {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #232732;
}

.accountHistory li {
    border-bottom: 1px solid #eee;
    padding: 12px 0 10px;
}

.accountHistory li a {
    display: inline-block;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    padding: 5px 0;
    vertical-align: middle;
}

.accountHistory li a strong {
    display: inline-block;
    font-weight: 500;
    font-size: 13px;
    color: #444;
    margin-bottom: 7px;
    line-height: 1.2;
}

.accountHistory li a span {
    display: inline-block;
    font-size: 12px;
    color: #888;
}

.accountHistory li a span.boxTxt {
    margin-left: 6px;
    border: 1px solid #ccc;
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 10px;
    letter-spacing: -0.5px;
    background: #fff;
}

.accountHistory li button {
    background: none;
    vertical-align: middle;
    height: 24px;
    width: 24px;
}

.accountHistory li button img {
    width: 10px;
}

/* 알림내역 */

.push_list .show_detail {

    padding: 2.5rem 2rem;

    position: relative;

    width: 100%;

    display: flex;

}

.push_list .show_detail.new {

    background: rgba(0, 63, 147, 0.07);

}

.push_list .show_detail .push_icon {

    position: relative;

    width: 50px;

    height: 50px;

    background: #f6f8fa;

    border-radius: 100%;

    overflow: hidden;

    display: block;

}

.push_list .show_detail.new .push_icon {

    background: #fff;

}

.push_list .show_detail .push_icon:before {

    content: '';

    display: block;

    width: 50px;

    height: 50px;

    position: absolute;

    margin-top: -25px;

    margin-left: -25px;

    top: 50%;

    left: 50%;

    background: url(../images/push_icon.png) no-repeat;

    background-size: 50px;

    background-position: 0 -50px;

}

.push_list .show_detail.new .push_icon:before {

    background-position: 0 0;

}

.push_list .show_detail .push_txt {

    width: calc(100% - 6.5rem);

    margin-left: 1.5rem;

    margin-top: 0.5rem;

}

.push_list .show_detail .push_txt p {

    font-size: 1.4rem;

    color: #222;

    line-height: 1.4;

    font-weight: 500;

    letter-spacing: -0.05rem;

}

.push_list .show_detail .push_txt h6 {

    color: rgba(0, 0, 0, 0.5);

    font-size: 1.2rem;

    margin-top: 1rem;

}


/*알림 목록,관리*/
.pushHistory {
    width: 100%;
}

.pushHistory li {
    padding: 15px 20px;
    position: relative;
    min-height: 55px;
}

.pushHistory li.pushNew {
    background: #f6f7f9;
    border-bottom: 1px solid #f3f3f3;
}

.pushHistory li.withdrawal {
    border-top: 1px solid #eaebec;
    border-bottom: 1px solid #eaebec;
    padding: 0;
    color: #555;
}

.pushHistory li.withdrawal a {
    display: block;
    padding: 15px 20px;
}

.pushHistory li.withdrawal .tit strong {
    display: block;
    font-weight: 500;
    font-size: 1.5rem;
    color: #222;
    line-height: 25px;
}

.pushHistory li .tit {
    display: inline-block;
    width: -webkit-calc(100% - 50px);
    width: calc(100% - 50px);
    vertical-align: middle;
}

.pushHistory li .tit strong {
    display: block;
    font-weight: 500;
    font-size: 1.5rem;
    color: #222;
    line-height: 25px;
}

.pushHistory li .tit span {
    display: inline-block;
    font-size: 12px;
    color: #888b92;
    word-break: keep-all;
    line-height: 1.3;
    margin-top: 5px;
}

.pushHistory li button {
    background: none;
    text-align: center;
    vertical-align: bottom;
    height: 24px;
    width: 20px;
    position: absolute;
    right: 15px;
    bottom: 18px;
}

.pushHistory li button img {
    width: 12px;
}

.pushHistory li .pushDate {
    color: #a2a5af;
    font-size: 10px;
    font-weight: 300;
    position: absolute;
    right: 18px;
    top: 18px;
}

.pushHistory li.pushTit {
    padding: 15px 20px 5px;
}

.pushHistory li.pushTit > h1 {
    font-size: 1.6rem;
    font-weight: 500;
    padding: 10px 0 6px;
}

.pushHistory li.pushTit > h1 > span {
    float: right;
    padding-right: 10px;
}

.pushHistory li.pushTit > span {
    font-size: 1.2rem;
    display: block;
    line-height: 1.3;
    color: #aaa;
}

.agree_box {
    width: 50px;
    height: 25px;
    position: absolute;
    right: 14px;
    top: 15px;
}

.agree_box i {
    line-height: 25px;
    text-align: right;
    position: absolute;
    right: 15px;
    top: 0;
    color: #aaa;
}

.agree_box input[type=checkbox] {
    display: none;
}

.agree_box input[type=checkbox] + label {
    margin-bottom: 0;
    display: inline-block;
    cursor: pointer;
    width: 50px;
    min-height: 23px;
    background: url('../images/amount_off.png') left center/40px no-repeat;
}

.agree_box input[type=checkbox]:checked + label {
    background-image: url('../images//amount_on.png');
}


/* 검색조건설정 */
.search_wrap {
    padding: 10px 15px;
    box-sizing: border-box;
    text-align: center;
}

.search-box {
    padding: 0 5px;
    box-sizing: border-box;
    text-align: center;
    background: #fff;
}

#SearchDiv {
    line-height: 40px;
    box-sizing: border-box;
    background: #f6f6f6;
    border-top: 1px solid #eeeff1;
    border-bottom: 1px solid #eeeff1;
    padding: 0 15px;
    text-align: left;
}

#SearchDiv:after {
    content: "";
    display: block;
    clear: both;
}

.category #SearchDiv {
    border-top: none;
}

#SearchDiv .trans_msg {
    color: #666;
    display: inline-block;
    font-size: 12px;
    width: -webkit-calc(100% - 83px); /* for Chrome, Safari */
    width: calc(100% - 83px);
}

#SearchDiv .trans_msg input {
    vertical-align: top;
    line-height: 40px;
    background: #f1f1f1;
}

#SearchDiv span {
    color: #666;
}

#SearchDiv button {
    float: right;
    font-size: 11px;
    line-height: 40px;
    display: inline-block;
    color: #666;
    font-weight: 700;
    padding: 0;
    background: none;
}

#SearchDiv button i {
    font-size: 11px;
    color: #999;
    line-height: 40px;
}

/*20230616 추가*/
#SearchDiv button span {
    font-size: 12px;
    padding-left: 3px;
    line-height: 40px;
    font-family: "Pretendard", sans-serif;
    font-weight: 500;
    color: #999;
}

#Searchfrm {
    text-align: center;
    padding: 0;
}

.inputForm .txt1 {
    padding: 15px 0 8px;
    width: auto;
    font-weight: 400;
    font-size: 1.4rem;
    color: #222;
    text-align: left;
}

.inputForm .txt2 {
    position: relative;
    text-align: left;
}

.inputForm .txt2 input,
.inputForm .txt2 select {
    display: inline-block;
    background: #f6f6f6;
    border-radius: 8px;
    border: 0;
}

.term_search {
    width: 100%;
    vertical-align: middle;
    text-align: center;
    margin-bottom: 5px;
}

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

.term_search li {
    float: left;
    font-weight: 300;
    text-align: center;
    width: 19%;
    margin-right: 1%;
    font-size: 12px;
    margin-top: 0 !important;
}

.term_search li button {
    width: 100%;
    line-height: 25px;
    border-radius: 4px;
    font-weight: 400;
    color: rgba(35, 39, 50, 0.7);
    background: #edeff1;
    transition: 0.3s;
}

.term_search li button:active {
    background: rgba(0, 63, 147, 0.1);
    color: rgba(35, 39, 50, 1);
}

.term_search li:last-child {
    margin-right: 0;
    width: 20%;
}

.date-wrap {
    margin-top: 10px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.date-wrap input {
    width: 48%;
    text-align: left;
}

.date-wrap span {
    display: inline-block;
    width: 4%;
}

/* 20240129 ios 날짜 검색 영역 수정 */
.search-date-box {
    background: #fff;
    border: 1px solid #e8e8e8;
    display: flex;
    width: 100%;
    border-radius: 4px;
    justify-content: space-between;
    align-items: flex-start;
}

.search-date-box .date-input {
    width: 48%;
}

.search-date-box p {
    width: 4%;
    line-height: 38px;
    text-align: center;
}

.date-input input[type="date"] {
    position: relative;
    padding: 0 30px 0 10px;
    background: url(../images/calendar-ico2.png) no-repeat right 10px center / 16px auto;
    width: 100%;
    line-height: 40px;
    height: 40px;
    display: inline-block;
    text-align: left !important;
    color: #222;
    font-size: 1.4rem;
    vertical-align: middle;
    border: 0;
    -webkit-appearance: none; /* 화살표 없애기 for chrome*/
    -moz-appearance: none; /* 화살표 없애기 for firefox*/
    appearance: none /* 화살표 없애기 공통*/
}

.date-input input[type="date"]::-webkit-clear-button,
.date-input input[type="date"]::-webkit-inner-spin-button {
    display: none;
}

.date-input input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 100%;
    height: 100%;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

.date-input input[type="date"]::before {
    content: attr(data-placeholder);
    width: 100%;
}

.date-input input[type="date"]:valid::before {
    display: none;
}

.date-input input[date-placeholder]::before {
    font-size: 1.4rem;
    padding-left: 16px;
}

/* 검색버튼 */
.tr_wrap {
    margin: 20px 0 0px;
}

.tr_wrap button {
    width: 49%;
    line-height: 28px;
    font-weight: 500;
}

.BlueBtn_m {
    color: #fff;
    background-color: #333;
    border: 1px solid #333;
    box-sizing: border-box;
}

.BlueBtn_mline {
    color: #444;
    background: none;
    border: 1px solid #828282;
    box-sizing: border-box;
}

/* filter */
.filter input[type=radio] {
    display: none;
}

.filter input[type=radio] + label,
.filter input[type=radio] + label {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 8px 15px;
    margin-right: 3px;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    letter-spacing: -0.3px;
    font-size: 1.3rem;
}

.filter input[type=checkbox]:checked + label,
.filter input[type=radio]:checked + label {
    background: #003f93;
    color: #fff;
    border: 1px solid #003f93;
}

/* 내역 리스트 */
.mypay_tbmenu {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
}

.mypay_tbmenu > li {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.mypay_tbmenu li .history-info {
    position: relative;
    height: 60px;
}

.history-info .date {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    color: #888;
}

.history-info .title {
    position: absolute;
    bottom: 20px;
    left: 0;
    color: #222;
    font-size: 1.4rem;
}

.history-info .method {
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 1.2rem;
    color: #999;
}

.history-info .price {
    position: absolute;
    bottom: 18px;
    right: 0;
    color: #222;
    font-weight: 400;
    font-size: 1.4rem;
}

.history-info .price strong {
    margin-right: 3px;
    font-weight: 600;
    font-size: 1.6rem;
}

.history-info .price.minus {
    color: #da2a4d;
}

.history-info .price.plus {
    color: #003f93;
}

.history-info .status {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 1.2rem;
    color: #999;
}

.history-info .balance {
    position: absolute;
    bottom: 0px;
    right: 0;
    color: #999;
    font-weight: 400;
    font-size: 1.2rem;
}

.history-info .method .line {
    position: relative;
    padding-left: 1.6rem;
}

.history-info .method .line::before {

    position: absolute;

    display: block;

    content: '';

    clear: both;

    width: 1px;

    height: 10px;

    background: #ccc;

    top: 4px;

    left: 8px;

}


/* 공지사항 */
.notice-wrap .c_notice {
    border-bottom: solid 1px #e1e1e1;
}

.notice-wrap .c_notice-question {
    position: relative;
    cursor: pointer;
    background: #fff;
}

.notice-wrap .c_notice-question .acc-tit {
    font-size: 13px;
    font-weight: 350;
    padding: 20px;
    line-height: 1;
    display: table;
    table-layout: fixed;
    width: 100%;

}

.notice-wrap .c_notice-question .acc-tit.on .txt {
    font-weight: 600;
    color: #003f93;
}

.notice-wrap .c_notice-question .acc-tit > * {
    display: table-cell;
    vertical-align: middle;
}

.notice-wrap .c_notice-question .acc-tit .txt {
    padding-right: 40px;
    font-size: 1.4rem;
    line-height: 1.5;
}

.notice-wrap .c_notice-question .acc-tit .txt span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

.notice-wrap .c_notice-question .acc-tit .txt span.date {
    font-size: 12px;
    color: #888b92;
    padding-top: 5px;
}

.notice-wrap .c_notice-question .acc-tit .txt span.category {
    font-size: 12px;
    color: #888b92;
    display: block;
    padding-bottom: 5px;
}

.notice-wrap .c_notice-answer {
    border-top: solid 1px #e1e1e1;
    background-color: #f6f6f6;
    display: none;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0;
    padding: 15px 20px;
    text-align: left;
    word-break: keep-all;
}

.notice-wrap .c_notice-answer > * {
    vertical-align: top;
    display: table-cell;
}

.notice-wrap .c_notice-answer img {
    width: 100%;
    padding: 10px 0;
}

.notice-wrap .c_notice-expanded {
    transition: all .3s ease-in-out;
}

.notice-wrap .c_notice-toggle {
    background: transparent;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    height: 8px;
    width: 8px;
    transition: all .3s ease-in-out;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -4px;
}

.notice-wrap .c_notice-toggle_open {
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    transform: rotate(-224deg);
}

.filter-slide .swiper-slide {
    position: relative;
    display: inline-block;
    width: auto;
    margin-right: 0.5rem;
}

/* FAQ */
.notice-wrap .c_notice-answer em.ico {
    padding-right: 5px;
    font-weight: 700;
    color: #97a4ff;
}

.notice-wrap .c_notice-question .acc-tit .txt em.ico {
    padding-right: 5px;
    font-weight: 700;
    color: #18c9ba;
}

/* FAQ 카테고리 */


.faq-category-slide {
    padding: 0 10px;
    border-bottom: 1px solid #e8e8e8;
}

.faq-category-slide li {
    position: relative;
    display: inline-block;
    width: auto;
}

.faq-category-slide li a.on::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -20px;
    background: #222;
}

.faq-category-slide li:last-child:after {
    width: 0;
    height: 0;
}

.faq-category-slide li a {
    display: block;
    padding: 0 15px;
    font-size: 1.4rem;
    color: #999;
    height: 46px;
    line-height: 46px;
    transition: 0.3s;
}

.faq-category-slide li a.on {
    color: #222;
    font-weight: 700;
}

.faq-category-slide li a:active {
    color: #000;
}

/* 공지사항 */
.noticeWrap {
    width: 100%;
    word-break: keep-all;
}

.notice_list li {
    width: 100%;
    position: relative;
    border-top: 1px solid #eee;
}

.notice_list li.new {
    background: #edf6ff;
}

.notice_list li:last-child {
    border-bottom: 1px solid #eee;
}

.noticeWrap .notice_list li.new .txt .tit,
.noticeWrap .notice_list li.new .txt .date {
    color: #003f93;
    font-weight: 600;
}

.noticeWrap .notice_list a {
    cursor: pointer;
    display: block;
}

.noticeWrap .notice_list .txt {
    font-size: 1.4rem;
    color: #222;
    font-weight: 400;
    line-height: 1.3 !important;
    padding: 20px;
}

.noticeWrap .notice_list .txt .tit {
    font-size: 1.4rem;
    display: block;
    color: #222;
    width: calc(100% - 50px);
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.noticeWrap .notice_list .txt .date {
    font-size: 1.2rem;
    display: block;
    color: #999;
    margin-top: 5px;
}

.noticeWrap .notice_list .txt .category {
    font-size: 1.2rem;
    color: #888b92;
    display: block;
    padding-bottom: 5px;
}

.noticeWrap .notice_list span.ico {
    top: 50%;
    right: 20px;
    margin-top: -8px;
    position: absolute;
    vertical-align: top;
    font-size: 1.2rem;
    font-weight: bold;
    color: #aaa;
    line-height: 16px;
}


/* 게시판 수정 */
.board-btn-wrap {
    padding: 15px 0;
    text-align: right;
}

.board-btn-wrap button {
    padding: 8px 15px;
    display: inline-block;
    font-size: 1.3rem;
    color: #fff;
    background: #6c757d;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: 500;
}

.board-btn-wrap button.delete {

}

.board-btn-wrap button.edit {
    border: 1px solid #d4e0e9;
    color: #707c89;
    background: #d4e0e9;
}

/* 토글 */
.toggle {
    background: transparent;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    height: 8px;
    width: 8px;
    transition: all .3s ease-in-out;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -4px;
}

.toggle_open {
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    transform: rotate(-224deg);
}

/*1:1문의*/
.noticeWrap .notice_list li.question {
    border-bottom: 1px solid #e8e8e8;
    padding: 20px;
}

.noticeWrap .notice_list .list-content {
    position: relative;
}

.noticeWrap .notice_list .list-content span {
    position: absolute;
    right: 0;
    bottom: 0;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px 10px;
    background: #aaacb7;
    color: #fff;
    font-weight: 500;
    float: right;
    /*display: inline;*/
}

.noticeWrap .notice_list .list-content span.wait {
    background: #18c9ba;
    border: 1px solid #18c9ba;
    color: #fff;
}

.noticeWrap .notice_list .list-content span.delete {
    border: 1px solid #bbb;
    color: #222;
    background: #fff;
    margin-right: 70px;
}

.noticeWrap .notice_list .list-content h4 {
    font-size: 14px;
    width: 80%;
    color: #222;
    font-weight: 400;
    word-break: keep-all;
    width: calc(100% - 120px);
    width: -webkit-calc(100% - 120px);
}

.noticeWrap .notice_list .list-content > p {
    font-size: 12px;
    padding-top: 5px;
    color: #999;
}

.boardHeadline {
    padding: 20px;
    border-bottom: 1px solid #eee;
    max-height: 100px;
}

.boardHeadline .boardDate {
    color: #999;
    margin-top: 10px;
    font-size: 1.2rem;
}

.boardHeadline .boardTitle {
    font-size: 1.5rem;
    word-break: break-all;
}

.boardDetail {
    padding: 20px;
    font-size: 1.4rem;
    line-height: 1.7;
    color: #666;
    word-break: break-all;
    white-space: normal;
    height: calc(100vh - 320px);
    height: -webkit-calc(100vh - 320px);
    overflow-y: scroll;
}

.boardDetail.terms {
    overflow-y: auto;
    height: auto;
}

.boardDetail .tit {
    font-size: 1.1rem;
    border: 1px solid #e8e8e8;
    background: rgba(0, 63, 147, 0.1);
    color: #222;
    padding: 0 6px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 3px;
    vertical-align: top;
}

.boardDetail .txt {
    width: calc(100% - 40px);
    display: inline-block;
    font-size: 1.4rem;
    font-weight: 400;
    text-align: left;
    color: #222;
    line-height: 1.4;
}

/* 답변 */
.reply {
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #e8e8e8;
}

.reply h3 {
    font-size: 14px;
}

.reply h3 span {
    font-size: 11px;
    border-radius: 15px;
    border: 1px solid #aaa;
    color: #232732;
    padding: 0px 7px;
    margin-right: 5px;
}

.reply .date {
    font-size: 12px;
    color: #222;
}

.reply .date span {
    color: #aaa;
    padding-right: 10px;
}


.reply > div.date
.reply p.reply-content {
    font-size: 12px;
    line-height: 1.7;
    margin-top: 10px;
    word-break: break-all;
}

/* 문의하기 */
.terms_box {
    position: relative;
    overflow: auto;
    margin: 8px 0 16px;
    height: 80px;
    padding: 15px;
    background: #ebeff3;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 8px;
}

.check_info {
    font-size: 12px;
    text-align: left;
    word-break: keep-all;
    letter-spacing: -1px;
}

.check_info > .check_box:not(:first-child) {
    margin-left: 13px;
}

.check_info .check_box label {
    line-height: 20px;
    color: #333;
    margin-bottom: 0;
}

.check_info .check_box input[type=checkbox] {
    display: none;
}

.check_info .check_box input[type=checkbox] + label {
    font-size: 14px;
    text-align: left;
    display: inline-block;
    cursor: pointer;
    padding: 5px 0 5px 30px;
    line-height: 23px;
    background: url(../images/i_check_off.png) left/23px no-repeat;
    font-weight: 300;
}

.check_info .check_box input[type=checkbox]:checked + label {
    background-image: url(../images/i_check_on.png);
}


/* 이용약관 */
.check_agree {
    margin: 15px;
    display: block;
}

.check_agree label {
    line-height: 18px;
    color: #333;
    margin-bottom: 0;
    font-size: 13px;
}

.check_agree input[type=checkbox] {
    display: none;
}

.check_agree input[type=checkbox] + label {
    text-align: left;
    font-weight: normal;
    display: inline-block;
    cursor: pointer;
    padding-left: 30px;
    line-height: 20px;
    background: url(../images/small-check-off.png) left/20px no-repeat;
    font-weight: 500;
}

.check_agree input[type=checkbox]:checked + label {
    background-image: url(../images/small-check-on.png);
}

.check_agree strong {
    float: right;
    margin-top: 5px;
    color: #888;
    font-weight: 300;
}

.dropSearch {
    padding: 0;
}

.dropSearch select {
    width: 100%;
    border: none;
    padding: 5px 10px 5px 20px;
    border-bottom: 1px solid #ddd;
    background: #fff;
    color: #222 !important;
    border-radius: 0;
}


/* 회사정보 */
.compaybox {
    padding: 20px;
}

.compaybox h2.bold {
    font-size: 1.4rem;
    padding-bottom: 10px;
    color: #222;
    font-weight: 500;
}

.compaybox table {
    vertical-align: top;
    line-height: 1.4;
    width: 100%;
    font-size: 13px;
}

.compaybox table tr {
    border: 1px solid #dfdfdf;
}

.compaybox table th {
    width: 120px;
    background: #efefef;
    padding: 10px 5px 10px 10px;
    border-right: 1px solid #dfdfdf;
    font-weight: 400;
}

.compaybox table td {
    background: #fff;
    padding: 10px 5px 10px 10px;
    word-break: keep-all;
    font-weight: 400;
    color: #666;
}

.compaybox p {
    padding-top: 15px;
    line-height: 20px;
    font-size: 13px;
    color: #999;
}

/* 회원가입 */
.login-backBg {
    background-image: linear-gradient(165deg, #4b5262 0%, #333644 100%);
    padding-bottom: 200px;
}

.login-backBg + .shadowForm {
    margin-top: -190px;
    padding: 15px 0;
}

.login-content {
    width: 100%;
    padding: 0 20px;
    background: #f6f8fa;
    min-height: -webkit-calc(100vh - 0px);
    min-height: calc(100vh - 0px);
}

.login_logo {
    width: 100%;
    padding: 80px 20px 30px;
    text-align: center;
}

.login_logo img {
    width: 120px;
    text-align: center;
}

.login_logo h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}

.login_logo p {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 200;
    line-height: 1.5;
    color: #222;
    text-align: center;
}

.Explanation_box {
    text-align: center;
    line-height: 1.3;
    font-size: 12px;
    color: #444;
    padding: 20px 0;
}

.Explanation_box h1 {
    font-size: 18px;
    font-weight: 600;
    color: #232732;
    margin-bottom: 10px;
}

.Explanation_box p {
    font-size: 14px;
    line-height: 1.6;
}

.sub_btn {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    padding: 0 10px;
    border: none;
    font-size: 12px;
    font-weight: 900;
}

.txt1.join {
    font-weight: 500;
    padding-bottom: 0;
}

.join_txt {
    position: relative;
    background: #fff;
    box-sizing: border-box;
    line-height: 16px;
    height: 40px;
    width: 100%;
}

.join_txt input {
    border-bottom: 1px solid #ddd;
    text-align: left;
    position: absolute;
    top: 0;
    left: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    padding-left: 0;
}

.join_txt .sub_btn {
    width: 26%;
    border-radius: 20px;
    border: 1px solid #bbb;
    font-weight: 600;
    height: 34px;
    line-height: 32px;
}

.join_txt input[type=radio] {
    display: none;
}

.join_txt input[type=radio] + label {
    text-align: center;
    font-weight: 400;
    cursor: pointer;
    margin-right: 15px;
}

.join_txt input[type=radio] + label span {
    position: relative;
    padding-left: 25px;
    text-align: left;
    color: #232732;
    line-height: 20px;
}

.join_txt input[type=radio] + label span:before {
    background: url(../images/check-off.png) no-repeat;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-size: 20px;
}

.join_txt input[type=radio]:checked + label span:before {
    background: url(../images/check-on.png) no-repeat;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    background-size: 20px;
}

.check_info button {
    background: #fff;
}

.check_info button i.right {
    margin-left: 5px;
}

.check_info .check_box.bold input[type=checkbox] + label {
    font-weight: 600;
}

.article_text {
    line-height: 18px;
    margin-bottom: 20px;
    color: #666;
    word-wrap: break-word;
}

.terms-wrap h3 {
    font-size: 1.6rem;
    margin-bottom: 5px;
    font-weight: 500;
    color: #222;
    text-align: center;
}

.terms-wrap h4 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    font-weight: 500;
    color: #222;
}

.terms-wrap h5 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #222;
}

.terms-wrap h6 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #222;
}

.terms-wrap p {
    line-height: 18px;
    margin-bottom: 20px;
    color: #666;
    word-wrap: break-word;
}

.check_info.magin10 {
    margin: 10px 0;
}

.login-backBg .login_logo p {
    color: #fff;
    font-size: 16px;
    font-weight: 300;
}

.login-backBg .login_logo img {
    width: 150px;
}

/* 2023-04-18 회원가입 */
.join-title {
    width: 100%;
    padding: 1.5rem;
    position: relative;
}

.join-title h2 {
    line-height: 30px;
    font-size: 2.4rem;
    font-weight: 600;
    color: #000;
}

.join-title p {
    font-size: 1.4rem;
    padding-top: 5px;
    line-height: 1.4;
    font-weight: 300;
}

ol.join-process {
    text-align: center;
    padding: 1.5rem 1.5rem 0 0;
    position: absolute;
    right: 0;
    top: 0;
}

ol.join-process li {
    display: inline-block;
    padding: 0 5px;
    position: relative;
    width: auto;
    min-width: auto;
}

ol.join-process li span {
    background: #bbc1c5;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    color: #ffffff;
    line-height: 1;
    font-size: 0px;
    font-weight: 700;
    width: 6px;
    height: 6px;
    display: inline-block;
    line-height: 20px;
}

ol.join-process li.on span {
    background: #003f93;
    width: 24px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    font-size: 12px;
}

.join-terms-wrap {
    padding: 1.5rem;
}

.join-terms-wrap .all-terms-check {
    text-align: left;
    word-break: keep-all;
    margin-bottom: 2rem;
}

.join-terms-wrap .all-terms-check .check_box input[type=checkbox] {
    display: none;
}

.join-terms-wrap .all-terms-check .check_box input[type=checkbox] + label {
    width: 100%;
    font-size: 1.5rem;
    border-radius: 6px;
    text-align: left;
    display: block;
    cursor: pointer;
    padding: 1.5rem 1.5rem 1.5rem 5rem;
    line-height: 1.5;
    background: url(../images/i_check_off.png) 15px /23px no-repeat;
    background-color: #fff;
    font-weight: 500;
    border: 1px solid #dee2e6;
    color: #888b92;
}

.join-terms-wrap .all-terms-check .check_box input[type=checkbox]:checked + label {
    background-image: url(../images/i_check_on.png);
    background-color: #fff;
    border: 1px solid #222;
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 10%), -4px -1px 6px 4px rgb(255 255 255 / 17%);
    color: #000;
}

.join-terms-wrap .check_agree {
    margin: 15px 0;
    line-height: 2.5rem;
    display: block;
    position: relative;
}

.join-terms-wrap .check_agree button {
    background: transparent;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -15px;
}

.join-terms-wrap .check_agree input[type=checkbox] + label {
    text-align: left;
    font-weight: normal;
    display: block;
    width: calc(100% - 30px);
    width: -webkit-calc(100% - 30px);
    cursor: pointer;
    padding-left: 30px;
    line-height: 20px;
    background: url(../images/small-check-off.png) left/20px no-repeat;
    font-weight: 500;
}

.join-terms-wrap .check_agree input[type=checkbox] + label span.small-guide {
    display: block;
    font-weight: 300;
    color: #666;
    font-size: 12px;
}

.join-terms-wrap .check_agree input[type=checkbox]:checked + label {
    background-image: url(../images/small-check-on.png);
}

.form-box input.box-input.button {
    width: calc(100% - 85px);
}

.form-box button.check-btn {
    border: 1px solid #ddd;
    background: #e8eef3;
    color: #999;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 40px;
    font-size: 1.3rem;
    border-radius: 4px;
    transition: 0.1s;
}

.form-box button.check-btn:active {
    background: #e2e8ec;
}

.join-complete-box {
    padding: 1.5rem;
    text-align: center;
}

.join-complete-box img {
    width: 70px;
    padding-top: 8rem;
}

.join-complete-box h5 {
    font-size: 2.2rem;
    padding: 2rem 0 0.75rem;
    font-weight: 700;
}

.join-complete-box p {
    font-size: 1.4rem;
    line-height: 1.5;
    color: #666;
}

.join-complete-box p span {
    display: block;
}

i.confirm-ico {
    padding-top: 5rem;
    font-size: 5rem;
    color: #18c9ba;
}

/*// 2023-04-18 회원가입*/

/* 비밀번호 변경안내 */
.pw-info-box {
    width: 100%;
    display: table;
}

.pw-info-box .pw-img {
    display: table-cell;
    width: 50px;
    vertical-align: top;
    padding-top: 5px;
}

.pw-info-box .pw-img em {
    width: 50px;
    height: 50px;
    background: url(../images/pass_ico1.png) no-repeat;
    display: inline-block;
    background-size: cover;
}

.pw-info-box .pw-txt {
    display: table-cell;
    padding: 0 0 0 15px;
    width: auto;
    vertical-align: middle;
    text-align: left;
    vertical-align: middle;
}

.pw-info-box .pw-txt h3 {
    font-size: 1.8rem;
    font-weight: 700;
}

.pw-info-box .pw-txt p.tit {
    font-size: 1.5rem;
    color: #000;
    word-break: keep-all;
    margin-top: 0.5rem;
    line-height: 1.4;
    font-weight: 300;
}

.pw-info-txt {
    border-radius: 8px;
    background: #ebeff3;
    color: #666;
    padding: 15px;
    margin-top: 2rem;
    font-size: 1.4rem;
    line-height: 1.5;
    word-break: keep-all;
}

.pw-info-box .pw-txt .color,
.pw-info-txt p .color {
    color: #003f93;
}


/*로그인*/
.main-con-box .login_logo {
    padding: 10px 0 20px;
}

.login_formli .form-group {
    margin-bottom: 10px;
}

.login_formli li i {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 12px;
    color: #bbc2c8;
    font-size: 14px;
}

.login_formli input {
    padding-left: 35px;
    margin-top: 0;
    border-radius: 25px;
    background: transparent !important;
    border: 1px solid #bec6d3;
    font-weight: 200;
    font-size: 14px;
}

.password_search {
    font-size: 14px;
    width: 100%;
    text-align: center;
    margin: 20px 0 10px;
    font-weight: 500;
    color: #000;
}

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

.password_search li {
    float: left;
    width: 50%;
    border-right: 1px solid #aaa;
}

.password_search li + li {
    margin-top: 0 !important;
}

.password_search li a {
    font-weight: 300;
}

.password_search li:last-child {
    border-right: none;
}

.login-btn {
    width: 100%;
    padding: 20px 0 0;
    text-align: center;
}

.login-btn button {
    display: inline-block;
    background: #003f93;
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 8%), -4px -1px 6px 4px rgb(255 255 255 / 8%);
    width: 100%;
    line-height: 42px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 500;
    border-radius: 21px;
    text-align: center;
}

.login-btn a.join {
    display: inline-block;
    width: 100%;
    line-height: 38px;
    color: #003f93;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    text-align: center;
    margin-top: 10px;
    border: 1px solid #003f93;
    padding: 0;
}

.login-btn a.join:active {
    background: rgba(0, 0, 0, 0.02);
}

.join_btn {
    width: 100%;
    padding: 20px 0 0;
    text-align: center;
}

/* 로그인비밀번호찾기 */
.findBtn {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: #888;
    margin-top: 20px;
}

.findBtn a {
    color: #003f93 !important;
    margin-left: 10px;
}

/* 환불신청 */
.serviceInfo {
    padding: 20px 20px 10px;
}

.serviceInfo h2 {
    font-size: 16px;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.serviceInfo h2 img {
    width: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.serviceInfo p {
    line-height: 17px;
    color: #666;
    word-break: keep-all;
}

.serviceInfo .donwnBox li {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    background: #f3f3f3;
}

.serviceInfo .donwnBox li:first-child {
    margin-top: 15px;
}

.serviceInfo .donwnBox li a {
    text-decoration: none;
    color: #232732;
    font-size: 15px;
    font-weight: 500;
    position: relative;
    display: block;
    padding: 20px;
}

.serviceInfo .donwIcon {
    position: absolute;
    top: 16px;
    right: 15px;
    width: 10px;
}

.serviceInfo .donwIcon img {
    width: 20px;
    float: right;
}

.serviceInfo .infoList li {
    line-height: 20px;
}

.serviceInfo .infoList li::before {
    content: "";
    width: 3px;
    height: 3px;
    display: inline-block;
    margin-bottom: 3px;
    border-radius: 50%;
    margin-right: 3px;
    background-color: #bbb;
}

.serviceInfo p.csInfo {
    background: #f3f3f3;
    border: 1px solid #eee;
    padding: 10px 15px;
    margin-top: 20px;
    border-radius: 8px;
    line-height: 20px;
}

/* 내역 상세 table */
.orderSheet-info-wrap {
    padding: 0;
}

.ordersheet-tit {
    font-size: 1.4rem;
    font-weight: 500;
    background: #f8fafb;
    color: #97a5b3;
    border-bottom: 1px solid #eaebec;
    padding: 10px 15px;
}

table.orderSheet-info {
    width: 100%;
    font-size: 1.2rem;
    color: #222;
    margin: 10px 0;
}

table.orderSheet-info th {
    width: 115px;
    text-align: left;
    padding: 8px 0 8px 20px;
    font-weight: 400;
    color: #999;
}

table.orderSheet-info td {
    text-align: right;
    padding: 8px 20px 8px 0;
}

table.orderSheet-info td strong {
    font-size: 1.4rem;
}

table.orderSheet-info td button {
    margin-left: 7px;
    border-radius: 4px;
    padding: 6px 8px;
    font-size: 12px;
}

table.orderSheet-info th span.line {
    position: relative;
    padding-left: 20px;
    font-size: 1.3rem;
}

table.orderSheet-info th span.line:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: solid #e8e8e8;
    border-width: 0 0 2px 2px;
    content: '';
}

table.orderSheet-info tr.datail td,
table.orderSheet-info tr.datail th {
    font-size: 1.2rem;
}

table.orderSheet-info tfoot td,
table.orderSheet-info tfoot th {
    padding: 15px 20px;
}

table.orderSheet-info tfoot th.tit {
    font-weight: 500;
    font-size: 1.6rem;
    color: #222;
}

table.orderSheet-info tfoot td.total {
    font-weight: 500;
    font-size: 1.6rem;
}

table.orderSheet-info tfoot td.total {
    font-weight: 500;
    font-size: 1.6rem;
}


/*error 페이지*/
#notfound {
    position: relative;
    height: 100vh;
    background-color: #fff;
}

#notfound .notfound {
    width: 100%;
    position: absolute;
    left: 0;
    top: 45%;
    margin-top: -170px;
    text-align: center;
    padding: 0 20px;
}

.notfound .notfound-404 h1 span {
    font-size: 16px;
    letter-spacing: 0px;
    font-weight: 500;
    line-height: 14px !important;
}

.notfound .notfound-404 h1 strong {
    font-weight: 800;
    line-height: 100px !important;
    font-size: 80px;
    letter-spacing: 3px;
    color: #003f93;
}

.notfound p {
    word-break: keep-all;
    color: #444;
    font-size: 13px;
    margin-top: 30px;
    margin-bottom: 30px;
    line-height: 1.4 !important;
}

.notfound p strong {
    font-weight: 500;
    font-size: 16px;
    line-height: 2.2 !important;
}

.notfound a {
    font-size: 13px;
    color: #666;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid #bbb;
    display: inline-block;
    padding: 8px 30px;
    font-weight: 400;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
}

.notfound a.homeB {
    background: #003f93;
    color: #fff;
    border: 1px solid #003f93;
}

.card-design {
    height: 50px;
    border-top: 15px solid #001b45;
    border-right: 15px solid #001b45;
    border-left: 15px solid #001b45;
    background: #fff;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    position: relative;
}

.card-design .tit {
    font-weight: 700;
    color: #cfd5dd;
    text-align: center;
    margin-top: 10px;
}

.card-design .grip {
    position: absolute;
    bottom: -15px;
    width: 102px;
    left: 50%;
    margin-left: -51px;
}

/* 가맹점 안내 */
.shop-banner {
    position: relative;
    border-radius: 8px;
    background: #e5eeff;
    padding: 2.5rem 2rem 2rem 2rem;
}

.shop-banner::before {
    content: '';
    position: absolute;
    right: 2rem;
    top: 2rem;
    width: 50px;
    height: 50px;
    display: block;
    background: url(../images/shop_bg.png) 0 0 /50px no-repeat;
}

.shop-banner .tit {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.8);
    width: calc(100% - 70px);
    word-break: keep-all;
}

.shop-banner-btn {
    width: 100%;
    font-size: 1.4rem;
    font-weight: 500;
    height: 3.6rem;
    line-height: 3.4rem;
    border-radius: 4px;
    background: #4d99ff;
    color: #fff;
}

/* 가맹점 조회 */
.shop-info {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem 2rem 2rem;
}

.shop-info .shop-address {
    width: calc(100% - 68px);
    padding-right: 1.5rem;
    color: #666;
}

.shop-info button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
    background: #e0edff;
}

.shop-info button i {
    color: #4d99ff;
    font-size: 1.4rem;
}

.modal-select-btn {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    padding: 1.5rem;
    display: block;
    width: 100%;
    position: relative;
}

.modal-select-btn i {
    position: absolute;
    right: 1.5rem;
    line-height: 2rem;
    top: 50%;
    margin-top: -1rem;
}

.input-txt {
    text-align: left;
    color: #888;
}

.modal-select-btn + .modal-select-btn {
    margin-top: 1rem;
}

/* 내 지갑 */
.mypayWrap {
    padding: 20px;
    color: #001b45;
    background: #001b45;
}

.mypayWrap.color {
    background: #003f93;

}

.mypayWrap .card-number {
    margin-top: 10px;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.mypayWrap h3.payTitle {
    font-size: 1.6rem;
    text-align: left;
    color: #fff;
}

.mypayWrap h3.payTitle span {
    font-size: 12px;
    padding-left: 5px;
    color: #888b92;
    font-weight: 300;
}

.mypayWrap .card-number {
    margin-top: 7px;
    letter-spacing: 0;
    font-weight: 300;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
}

.mypayWrap .expiry-date {
    margin-top: 7px;
    letter-spacing: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    text-align: right;
}

.coin-box {
    margin-top: 10px;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px 15px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
}

.coin-box .amount {
    float: right;
}

p.payNumber {
    text-align: right;
    font-size: 2.6rem;
    font-weight: 700;
    letter-spacing: 0;
    color: #fff;
    position: relative;
    margin-top: 5px;
}

p.payNumber span.unit {
    padding-left: 3px;
    font-size: 20px;
    font-weight: 400;
}

.mypayWrap .payNumber .charge-btn {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -17px;
    height: 34px;
    line-height: 34px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    font-size: 1.4rem;
    width: 80px;
    text-align: center;
    font-weight: 500;
    transition: 0.3s;
}

.mypayWrap .payNumber .charge-btn:active {
    background: rgba(0, 0, 0, 0.5);
}

.btn-account {
    float: right;
    background: #fff;
    font-size: 12px;
    letter-spacing: -0.05rem;
    color: #888b92;
    padding: 2px 5px;
    border-radius: 3px;
}

.btn-account i {
    padding-left: 3px;
    font-size: 9px;
}

p.payNumber button {
    font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.1);
    width: 30px;
    height: 30px;
    line-height: 16px;
    vertical-align: middle;
    border-radius: 100%;
    margin-left: 5px;
    transition: 0.3s;
}

p.payNumber button img {
    width: 16px;
}

p.payNumber button:active {
    background: rgba(0, 0, 0, 0.2);
}

.point-card {
    position: relative;
    border-radius: 10px;
    width: 100%;
    background-color: #1cbfb7;
    box-shadow: 0 2px 3px 0 rgb(0 0 0 / 9%);
}

.mypayWrap .small-recipt th {
    width: 135px;
    text-align: left;
    padding: 4px 0;
    color: #888;
    font-weight: 400;
}

.mypayWrap .small-recipt td {
    text-align: right;
    padding: 4px 0;
    color: #fff;
}

.mypayWrap .small-recipt td .amount {
    font-size: 1.4rem;
    font-weight: 500;
}

.mypayWrap .small-recipt td .amount i {
    margin-left: 10px;
    vertical-align: revert;
    font-size: 1.2rem;
}

.mypayWrap .small-recipt span {
    position: relative;
    padding-left: 15px;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
}

.mypayWrap .small-recipt .tit:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 5px;
    border: solid rgba(255, 255, 255, 0.5);
    border-width: 0 0 1px 1px;
    content: '';
}


.account-list-btn {
    background: #fff;
    color: #222;
    padding: 5px 12px;
    border-radius: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.4rem;
}

.search-wrap {
    display: flex;
    padding: 3px;
    background: #f7f7f7;
    border: 1px solid #e8e8e8;
    margin-top: 5px;
}

.search-wrap input {
    width: calc(100% - 143px);
    border-radius: 4px;
    margin: 0 3px;
    font-size: 1.4rem;
}

.search-wrap button {
    width: 40px;
    background: transparent;
    color: #666;
    border-radius: 4px;
}

.search-wrap button:active {
    background: rgba(0, 0, 0, 0.03);
}

.search-wrap button.search {
    width: 100px;
    font-size: 1.2rem;
    background: transparent;
}

.search-wrap button.search:active {
    background: rgba(0, 0, 0, 0.03);
}

.point-card .small-recipt th {
    width: 180px;
}

.small-recipt {
    width: 100%;
    font-size: 12px;
    margin-top: 10px;
}

.small-recipt th {
    width: 120px;
    text-align: left;
    padding: 4px 0;
    color: #888;
    font-weight: 400;
}

.small-recipt td {
    text-align: right;
    padding: 4px 0;
}

.small-recipt td .amount {
    font-size: 1.4rem;
    font-weight: 500;
}

.small-recipt td .amount i {
    margin-left: 10px;
    vertical-align: revert;
    font-size: 1.2rem;
}

.small-recipt span {
    position: relative;
    padding-left: 15px;
    font-size: 1.4rem;
    line-height: 1;
}

.small-recipt .tit:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 6px;
    height: 5px;
    border: solid #fff;
    border-width: 0 0 1px 1px;
    content: '';
}

.small-recipt td strong {
    color: #18c9ba;
    font-size: 14px;
}

.point-card .small-recipt .tit {
    color: #fff;
}

.point-card .quick-pay {
    text-align: center;
    margin-top: 15px;
}

.point-card .quick-pay:after {
    content: '';
    display: block;
    clear: both;
}

.point-card .quick-pay li {
    float: left;
    text-align: center;
    width: 49%;
}

.point-card .quick-pay li:first-child {
    margin-right: 2%;
}

.point-card .quick-pay li a {
    padding: 15px 10px;
    display: block;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 5px;
    transition: .3s;
    color: #fff;
}

.point-card .quick-pay li a:active {
    background: rgba(0, 0, 0, 0.1);
}

.point-card .quick-pay li a span {
    padding-left: 30px;
    position: relative;
    font-size: 1.5rem;
}

.point-card .quick-pay li a span.left:before {
    width: 16px;
    height: 16px;
    background: url(../../images/quick-pay-icon3.png);
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.point-card .quick-pay li a span.right:before {
    width: 16px;
    height: 16px;
    background: url(../../images/quick-pay-icon4.png);
    background-size: cover;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.accout-area {
    width: 100%;
    padding: 15px 0;
    color: #fff;
    position: relative;
    margin-top: 20px;
}

.accout-area .tit {
    padding: 2px 5px;
    font-size: 10px;
    height: 18px;
    background: #3a166b;
    color: #fff;
    margin-right: 5px;
    border-radius: 3px;
    font-style: normal;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -11px;
    display: block;
}

.accout-area .txt {
    display: block;
    width: calc(100% - 90px);
    position: absolute;
    top: 50%;
    margin-top: -9px;
    left: 33px;
    height: 18px;
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    color: #fff;
    font-size: 1.2rem;

}

.accout-area .edit {
    position: absolute;
    right: 0;
    color: #fff;
    height: 18px;
    top: 50%;
    margin-top: -9px;
}

.accout-area .edit i {
    font-size: 10px;
    padding-left: 5px;
    color: #fff;
}


.my-icon-list {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
}

.my-icon-list:after {
    display: block;
    clear: both;
    content: '';
}

.my-icon-list li {
    float: left;
    width: 33.3%;
    text-align: center;
}

.my-icon-list li:last-child {
    margin-right: 0;
}

.my-icon-list li a {
    display: block;
}

.my-icon-list li a div {
    margin: 0 auto;
    width: 70px;
    height: 70px;
    border-radius: 24px;
    position: relative;
    background-color: #fff;

}

.my-icon-list li a div:before {
    background-image: url(../images/wallet-menu-ico.png);
    background-size: 180px;
    content: '';
    width: 60px;
    height: 60px;
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -30px;
    margin-left: -30px;
    background-repeat: no-repeat;
}

.my-icon-list li a div.my-ico2:before {
    background-position: -60px 0;
}

.my-icon-list li a div.my-ico3:before {
    background-position: -120px 0;
}

.my-icon-list.main li a div:before {
    background-image: url(../images/main-service-ico.png);
}

.my-icon-list li a h4 {
    text-align: center;
    font-weight: 400;
    color: #222;
    font-size: 1.4rem;
    margin-top: 10px;
}

.point-wrap {
    border-radius: 6px;
    background: #e6f5f4;
    padding: 10px;
    margin-top: 10px;
    display: block;
}

.point-wrap.alarm {
    background: #fff2d7;
}

.point-wrap.gray {
    background: #f7f7f7;
    margin-top: 0;
    display: flex;
}

.point-wrap + .point-wrap {
    margin-top: 7px;
}

.point-wrap a {
    display: flex;
}

.point-wrap span.tit {
    padding-left: 30px;
    position: relative;
    color: #999999;
    font-size: 1.4rem;
    font-weight: 500;
}

.point-wrap.alarm span.tit {
    color: #e8a823;
}

.point-wrap span.tit:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    background: url(../../images/small-point-ico.png) no-repeat;
    background-size: 20px;
}

.point-wrap.alarm span.tit:before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 0;
    width: 20px;
    height: 20px;
    background: url(../../images/alarm-ico.png) no-repeat;
    background-size: 20px;
}

.point-wrap span.amount {
    margin-left: auto;
    font-size: 1.4rem;
    font-weight: 500;
}

.point-wrap span.amount i {
    padding-left: 10px;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.2);
    vertical-align: revert;
}

/* 내 지갑 요약 정보*/
.sum-box {
    position: relative;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .09);
    padding: 15px;
}

.sum-box + .sum-box {
    margin-top: 15px;
}

.recent-list > li a.more {
    position: absolute;
    top: 15px;
    right: 15px;
    line-height: 20px;
    font-size: 11px;
    color: #888;
    padding-right: 15px;
}

.recent-list h2 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.recent-list h3 {
    font-size: 14px;
    line-height: 16px;
    margin-bottom: 5px;
    font-weight: 300;
    color: #000 !important;
}

.recent-list span.date {
    color: #888b92;
    font-size: 12px;
    font-weight: 200;
    line-height: 20px;
}

.recent-list span.price {
    font-size: 15px;
    font-weight: 700;
    float: right;
    line-height: 20px;
    color: #000 !important;
}


/* form-box */
.form-box {
    width: 100%;
    padding: 20px;
}

.form-box.white {
    background: #fff;
}

.form-box.pd0 {
    padding: 0;
}

.form-box .form-item .col2 {
    display: flex;
    justify-content: space-between;
}

.form-box .form-item + .form-item {
    margin-top: 2rem;
}

.form-box .form-item:last-child {
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 20px;
}

.form-box ul li:last-child .form-group {
    margin-bottom: 0;
}

.form-box ul li .col2 {
    width: 100%;
}

.form-box ul li .col2::after {
    display: block;
    clear: both;
    content: '';
}

.form-box ul li .col2 > * {
    width: 49%;
    margin-right: 2%;
    float: left;
}

.form-box ul li .col2 select:last-child {
    margin-right: 0;
}

/*half radio*/
.group-radio {
    margin-top: 10px;
    width: 100%;
}

.half-radio {
    position: relative;
}

.half-radio + div {
    margin-top: 10px;
}

.half-radio input[type=radio] {
    display: none;
}

.half-radio input[type=radio] + label {
    display: block;
    padding-left: 25px;
    font-size: 14px;
    font-weight: 300;
    line-height: 20px;
}

.half-radio .label-circle:before {
    width: 20px;
    height: 20px;
    border: 5px solid #ced2db;
    background-color: #fff;
    box-sizing: border-box;
}

.group-radio input[type=radio]:checked + .label-circle:after {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 5px solid #003f93;
}

.half-radio .label-circle:before, .half-radio .label-circle:after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
}

.basicInput .accoutT_W {
    border-top: 1px solid #000;
    padding: 10px 0;
}

.basicInput ul li table.accountT {
    width: 100%;
    font-size: 12px;
    color: #222;
}

.basicInput ul li table.accountT th {
    width: 120px;
    text-align: left;
    padding: 5px 0;
    font-weight: 500;
}

.basicInput ul li table.accountT td {
    text-align: right;
    padding: 5px 0;
}

.basicInput ul li .accoutT_Button {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    background: #fff;
    color: #222;
    font-weight: 600;
}

.inputboxWrap {
    width: 100%;
    border: 1px solid #222;
    border-radius: 4px;
    margin-bottom: 10px;
    background: #fff;
}

.inputboxWrap input {
    border: none;
}

.inputboxWrap .inputbox {
    background: #fff;
    width: -webkit-calc(100% - 30px);
    text-align: right;
    font-size: 24px;
    font-weight: 800;
    height: 50px;
    color: #000;
    border: none;
}

.inputboxWrap .pay {
    font-weight: 600;
    font-size: 14px;
    text-align: right;
    vertical-align: sub
}

/* 가맹점 리스트 메인 */
h1.shopmainTit {
    font-size: 15px;
    font-weight: 600;
    padding: 16px 20px 13px;
    position: Relative;
    letter-spacing: -0.05rem;
}

h1.shopmainTit i {
    color: #8ec43d;
    padding-right: 5px;
}

h1.shopmainTit.ver02 {
    font-size: 12px;
    font-weight: 300;
    color: #888b92;
    letter-spacing: -0.03rem;
}

h1.shopmainTit.ver02 strong {
    color: #003f93;
}

.location {
    padding: 0px 20px;
    line-height: 30px;
    font-size: 11px;
    color: #888b92;
    background: #fff;
}

.location i {
    color: #003f93;
    padding-right: 5px;
}

.location span {
    vertical-align: middle;
}

.location img {
    width: 15px;
    margin-right: 3px;
}

.location button {
    float: right;
    background: none;
    font-weight: 300;
    padding: 0;
    color: #555;
}

.location button .arrow {
    margin: 0 2px;
    vertical-align: middle;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: solid #555;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
}

/* 20230828 쿠폰몰 배너 슬라이드 수정 */
.topBanner {
    position: relative;
    text-align: center;
}

.topBanner a img {
    width: 100%;
}

.topBanner .banner-slider {
    width: 100%;
}

.topBanner .swiper-pagination {
    text-align: left;
    left: 15px;
}

.topBanner .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 1);
    opacity: .5;
}

.topBanner .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    border-radius: 15px;
    letter-spacing: -0.08rem;
}

.shopBanner {
    width: 100%;
}

.searchShop {
    position: relative;
    margin: 10px 20px 0;
    font-size: 11px;
}

.searchShop input, .searchShop button {
    background: none;
    vertical-align: middle;
}

.searchShop .search-box {
    font-size: 14px;
    color: #000;
    width: 100%;
    height: 40px;
    background: #fff;
    border: 1px solid #eaebec;
    border-radius: 20px;
    position: relative;
}

.searchShop .search-box input {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 50px);
    width: -webkit-calc(100% - 50px);
    border: none;
    padding-left: 15px;
    margin: 0;
    text-align: left;
}

.searchShop button.searchIcon {
    border: none;
    position: absolute;
    top: 5px;
    right: 15px;
    cursor: pointer;
    padding: 2px;
}

.searchShop button.searchIcon img {
    width: 18px;
}

.searchShop button.searchKind {
    height: 44px;
    color: #fff;
    background-color: #138343;
    border-radius: 5px;
    min-width: 70px;
    float: right;
    margin-left: 2px;
    padding: 0 10px;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, .03);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .09);
}

.shopMenu {
    width: 100%;
    text-align: center;
}

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

.shopMenu li {
    float: left;
    width: 23.5%;
    margin-right: 2%;
    text-align: center;
    margin-bottom: 10px;
}

.shopMenu li:last-child {
    margin-right: 0;
}

.shopMenu li a {
    display: block;
    color: #232732;
    font-weight: 300;
    font-size: 13px;
}

.shopMenu li a div {
    margin: 0 auto;
    width: 75px;
    height: 75px;
    border-radius: 16px;
}

.shopMenu li a div.menu-ico1 {
    background: url(/dist/img/front2/main-menu-ico1.png) center center no-repeat;
    background-size: cover;
    background-color: #eff2f6;
}

.shopMenu li a div.menu-ico2 {
    background: url(/dist/img/front2/main-menu-ico2.png) center center no-repeat;
    background-size: cover;
    background-color: #eff2f6;
}

.shopMenu li a div.menu-ico3 {
    background: url(/dist/img/front2/main-menu-ico3.png) center center no-repeat;
    background-size: cover;
    background-color: #eff2f6;
}

.shopMenu li a div.menu-ico4 {
    background: url(/dist/img/front2/main-menu-ico5.png) center center no-repeat;
    background-size: cover;
    background-color: #eff2f6;
}

.shopMenu li a h4 {
    margin-top: 10px;
    font-weight: 300;
    font-size: 1.3rem;
}

/*검색 카테고리*/
.bestItem {
    width: 100%;
    margin-bottom: 10px;
    padding-left: 20px;
}

.bestItem .swiper-container {
    width: 100%;
    height: 100%;
    padding-bottom: 10px;
    padding-right: 40px;
}

.bestItem .swiper-slide {
    text-align: center;
    overflow: hidden;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.bestItem .swiper-slide a {
    width: 100%;
    display: inline-block;
    display: -webkit-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    word-break: break-all;
}

.bestItem .swiper-slide a h4 {
    color: #222;
    font-size: 13px;
    margin-top: 10px;
    font-weight: 500;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.bestItem .swiper-slide a h5 {
    color: #999;
    font-size: 10px;
    font-weight: 200;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.bestItem .swiper-slide a h6 {
    color: #343434;
    font-size: 10px;
    font-weight: 400;
    overflow: hidden;
    margin: 0;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.bestImg {
    width: 100%;
    height: 25vw;
    line-height: 0;
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.bestImg img {
    width: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

.listWrap {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    padding: 0 20px;
}

.listWrap li {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 20px;
    border-radius: 5px;
    overflow: hidden;
}

.listWrap li a {
    display: block;
    width: 100%;
}

.listWrap li a .listWrap_tit {
    font-size: 14px;
    color: #333;
    text-align: left;
    padding: 10px 0 5px;
}

.listWrap li a .listWrap_tit .listWrap_name {
    display: inline-block;
    font-weight: 500;
    width: -webkit-calc(100% - 90px);
    width: calc(100% - 90px);
}

.listWrap li a .listWrap_tit .listWrap_Kinds {
    display: inline-block;
    max-width: 85px;
    color: #18c9ba;
    font-size: 11px;
    float: right;
    text-align: right;
    letter-spacing: -1px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 6px;
    padding: 2px 5px;
    background: rgba(24, 201, 186, 0.15);
}

.listWrap li a .listWrap_info {
    color: #333;
    text-align: left;
    padding: 0 10px;
    font-size: 11px;
    line-height: 15px;
    word-break: keep-all;
}

.listWrap li a strong {
    display: inline-block;
    width: 100%;
    text-align: right;
    padding: 0 10px 15px;
}

.listWrap li a > .location {
    border: none;
    padding: 0;
    line-height: 20px;
}

.wrapImg {
    width: 100%;
    height: 44vw;
    max-height: 380px;
    line-height: 0;
    display: inline-block;
    overflow: hidden;
    position: relative;
    border-radius: 16px;
}

.wrapImg img {
    width: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}


/* 위치변경, 필터검색, QR검색 */
.searchBox {
    background: #fff;
}

.searchBox:after {
    content: "";
    display: block;
    clear: both;
}

.searchBox p {
    text-align: center;
    line-height: 1.5;
    padding: 20px 20px 10px;
    word-break: keep-all;
}

.searchBox p strong {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #232732;
}

.searchBox p span {
    font-weight: 200;
    padding-top: 10px;
    text-align: left !important;
    display: inline-block;
}

a.searchBoxBtn {
    display: inline-block;
    width: -webkit-calc(100% - 40px);
    width: calc(100% - 40px);
    margin: 20px;
    line-height: 42px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    background-image: linear-gradient(120deg, #361cbe 0%, #3e0077 100%);
    text-align: center;
}

a.searchBoxBtn img {
    width: 13.2px;
    margin-right: 5px;
    vertical-align: middle;
}

.locationWrap {
    padding: 0 20px;
}

.locationWrap input {
    margin-top: 5px;
    vertical-align: top;
    width: -webkit-calc(100% - 99px);
    width: calc(100% - 99px);
    border: none;
    background: #f6f6f6;
    border-radius: 6px;
}

.locationWrap input:-moz-read-only {
    background-color: #f6f6f6
}

/* For Firefox */
.locationWrap input:read-only {
    background-color: #f6f6f6
}

.locationWrap button {
    width: 90px;
    background: #fff;
    font-size: 12px;
    height: 40px;
    border: 1px solid #bbb;
    border-radius: 6px;
    font-weight: 500;
    margin: 5px 0 0 5px;
}

.locationHistory {
    width: 100%;
}

.locationHistory li {
    border-bottom: 1px solid #eee;
    padding: 12px 20px 10px;
}

.locationHistory li a {
    display: inline-block;
    width: -webkit-calc(100% - 30px);
    width: calc(100% - 30px);
    padding: 5px 0;
    vertical-align: middle;
}

.locationHistory li a strong {
    display: inline-block;
    font-weight: 500;
    font-size: 13px;
    color: #444;
    margin-bottom: 7px;
    line-height: 1.2;
}

.locationHistory li a span {
    display: inline-block;
    font-size: 12px;
    color: #888;
}

.locationHistory li a span.boxTxt {
    border: 1px solid #ccc;
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 10px;
    letter-spacing: -0.5px;
}

.locationHistory li button {
    background: none;
    vertical-align: middle;
    height: 24px;
    width: 24px;
}

.locationHistory li button img {
    width: 10px;
}

.qrBox {
    width: 100%;
    height: 100%;
    padding: 50px 0;
    border-bottom: 1px solid #f0f0f0;
}

.qrBox .qrScan {
    width: 60%;
    padding-bottom: 60%;
    margin: 0 auto;
    background: url(/dist/img/front2/qrScan.png) no-repeat center center;
    background-size: 100% 100%;
}

.qrText {
    text-align: center;
    margin-top: 20px;
    line-height: 18px;
}

.filterWrap {
    margin: 0 20px;
    border-top: 1px solid #efefef;
    padding: 10px 0;
}

p + .filterWrap {
    border-top: none;
}

.filterTit {
    font-size: 14px;
    color: #444;
    letter-spacing: -0.3px;
    margin: 12px 0;
    font-weight: 700;
}

.filterWrap select {
    margin: 0 1px 8px;
}

.filterC input[type=checkbox], .filterC input[type=radio] {
    display: none;
}

.filterC input[type=checkbox] + label, .filterC input[type=radio] + label {
    display: inline-block;
    text-align: center;
    cursor: pointer;
    padding: 9px 14px;
    margin: 0 1px 8px;
    color: #666;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 17px;
    letter-spacing: -0.3px;
    font-size: 11px;
}

.filterC input[type=checkbox]:checked + label, .filterC input[type=radio]:checked + label {
    background: #18c9ba;
    color: #fff;
    border: 1px solid #18c9ba;
}

/* 주변가맹점 */
.mapWrap {
    background-position: 50% 50%;
    background-size: cover;
    height: 320px;
    background-image: url(../images/mapSample.png);
    border-bottom: 1px solid #efefef;
    margin-bottom: 10px;
}

.mapWrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.filterWrap.ver02 {
    text-align: center;
    margin: 0 10px;
}

.filterWrap.ver02 > #filterC input[type=checkbox] + label {
    margin: 4px 1px;
}

.searchShop + h1.shopmainTit {
    padding: 7px 20px 15px;
}

.termSearch {
    text-align: center;
    padding: 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    position: absolute;
    top: 3px;
    right: 10px;
}

.termSearch dd {
    display: inline-block;
    font-weight: 400;
    border-right: 1px solid #ddd;
    padding: 5px 7px;
    font-size: 11px;
    float: left;
    letter-spacing: -.5px;
}

.termSearch dd:last-child {
    border-right: none;
}

.termSearch dd:hover {
    color: #000;
    font-weight: 500;
}

.termSearch:after {
    content: "";
    display: block;
    clear: both;
}

/* 가맹점리스트 */
.shopList {
    clear: both;
}

.detailList {
    width: 100%;
    background: #fff;
}

.detailList > li {
    padding: 15px;
    border-bottom: 1px solid #efefef;
    position: relative;
    min-height: 70px;
}

.detailList > li:last-child {
    border-bottom: 0;
}

.detailList > li a {
    display: inline-block;
    width: 100%;
}

.detailList .Information {
    display: inline-block;
    width: -webkit-calc(100% - 120px); /* for Chrome, Safari */
    width: calc(100% - 120px);
    margin-left: 10px;
    vertical-align: middle;
    padding-top: 5px;
}

.detailList .Information h6 {
    font-size: 12px;
    margin-bottom: 10px;
}

.detailList .listName {
    font-size: 1.4rem;
    color: #222;
    font-weight: 500;
    letter-spacing: -0.5px;
    margin-bottom: 5px;
    position: relative;
}

.detailList .listKind {
    font-weight: 400;
    display: inline-block;
    margin-bottom: 5px;
    font-size: 10px;
    color: #888;
    background: rgba(0, 63, 147, 0.1);
    padding: 1px 3px;
}

.detailList h4 strong {
    display: inline-block;
    padding: 1px 3px;
    font-size: 10px;
    background: rgba(24, 201, 186, 0.1);
    font-weight: 300;
    color: #339b92;
    margin: 0 3px;
    border-radius: 3px;
}

.detailList h4 strong img {
    width: 12px;
    height: auto;
    vertical-align: middle;
    display: inline-block;
    margin-right: 3px;
}

.detailList .add {
    line-height: 20px;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.2rem;
    color: #666;
}

.detailList .thumbnail-wrap {
    width: 70px;
    height: 70px;
    border-radius: 6px;
    display: inline-block;
    border: 1px solid #ddd;
    vertical-align: top;
    overflow: hidden;
    position: relative;
}

.tagArea {
    display: block;
    background: #fff;
    margin-top: 5px;
}

.tagArea .tag {
    display: inline-block;
    font-size: 1rem;
    background: #edeff1;
    border-radius: 3px;
    color: #637381;
    height: 18px;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 3px 5px;
    vertical-align: middle;
}

/* 가맹점상세 */
.shopDetail {
    position: relative;
}

.con-box h4.name {
    text-align: left;
    font-size: 17px;
    color: #232732;
    font-weight: 600;
    position: relative;
    padding: 10px 0;
}

.con-box .discount {
    font-size: 20px;
    font-weight: 600;
    line-height: 16px;
}

.con-box .discount del {
    font-weight: 300;
    color: #999;
    padding-right: 3px;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}

.con-box .discount span {
    padding-right: 3px;
    color: #18c9ba;
}

.con-box .coupon {
    font-size: 20px;
    font-weight: 600;
    line-height: 16px;
    color: #18c9ba;
}

.shopDetail .detail_visTop a {
    display: inline-block;
    width: 62px;
    height: 52px;
    line-height: 50px;
    text-align: center;
}

.shopDetail .detail_visTop img {
    width: 22px;
    cursor: pointer;
}

.shopDetail > .wrapImg {
    width: 100%;
    height: 60vw;
    border-radius: 0;
}

.shopDetail > .wrapImg.giftImg {
    height: 300px;
}

.shopDetail h4 {
    text-align: left;
    font-size: 17px;
    color: #232732;
    font-weight: 700;
    padding: 15px 0 10px;
    position: relative;
}

.shopDetail h4 .shop {
    display: inline-block;
    width: calc(100% - 60px);
    word-break: break-all;
}

.shopDetail h4 .like-check {
    font-weight: 400;
    display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #888;
}

.shopDetail .desc {
    text-align: left;
    font-size: 12px;
    color: #888;
    padding: 8px 0 0;
    word-break: keep-all;
    line-height: 1.5;
    font-weight: 200;
}

.shopDetail > a.searchBoxBtn {
    color: #317174;
    border: 1px solid #317174;
}

/*가맹점 디테일 상단*/
.shopDetail .detail_visTop {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    height: 55px;
    line-height: 55px;
    width: 100%;
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.shopDetail .detail_visTop button {
    width: 24px;
    height: 24px;
    left: 20px;
    position: absolute;
    background: url(../images/backBtn3.png) no-repeat;
    top: 15px;
    background-size: cover;
}

.shopDetail .detail_visTop h1 {
    display: none;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    line-height: 55px;
    text-align: center;
}

.detail_visTop.active {
    transition: .3s;
    background: rgba(255, 255, 255, 1);
    height: 55px;
}

.shopDetail .detail_visTop.active button {
    background: url(../images/backBtn2.png) no-repeat;
    background-size: cover;
}

.shopDetail .detail_visTop.active h1.subtitle {
    display: block;
}

.shopDetail .detail_visTop.active a i {
    color: #000;
}

.btnWrap {
    text-align: center;
    margin: 15px 15px;
}

.btnWrap > a.searchBoxBtn {
    color: #555 !important;
    font-weight: 400;
}

a.searchBoxBtn.left {
    margin: 0;
    width: 48%;
}

a.searchBoxBtn.right {
    margin: 0;
    width: 48%;
}

.txt.ellp2 {
    text-align: left;
    display: block;
    color: #232732;
    font-weight: 400;
    word-break: keep-all;
    font-size: 12px;
    line-height: 1.2;
}

.txt.ellp3 {
    color: #333;
    font-weight: 700;
    font-size: 14px;
}

.con-box.shop .tit {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.con-box.shop .tit span.time {
    font-size: 1.2rem;
    font-weight: 400;
    padding-left: 10px;
}

.con-box.shop .txt {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.5;
    font-weight: 400;
}

/* 좋아요(즐겨찾기) 체크박스 */
.like-check {
    position: absolute;
    top: 15px;
    right: 0;
}

.like-check input[type=checkbox] {
    display: none;
}

.like-check input[type=checkbox] + label {
    cursor: pointer;
    width: 25px;
    height: 25px;
    display: inline-block;
}

.like-check input[type=checkbox] + label {
    background: url(../images/like-off.png) no-repeat;
    background-size: cover;
}

.like-check input[type=checkbox]:checked + label {
    background: url(../images/like-on.png) no-repeat;
    background-size: cover;
}

.shopDetailInfo {
    background: #fff;
}

.partnerArea {
    font-size: 13px;
    padding: 15px;
    font-weight: 400;
    border-bottom: 1px solid #efefef;
}

.partnerArea img {
    height: 14px;
    width: auto;
    vertical-align: middle;
}

.detailWrap {
    padding: 5px 20px 20px;
}

.detailWrap ul {
    clear: both;
    padding: 10px 0;
}

.detailWrap ul li {
    display: inline-block;
}

.detailWrap ul .icon {
    vertical-align: top;
    margin-right: 8px;
    color: #003f93;
}

.detailWrap ul .icon img {
    width: 14px;
    vertical-align: top;
}

.detailWrap ul .txt {
    vertical-align: top;
    width: -webkit-calc(100% - 25px); /* for Chrome, Safari */
    width: calc(100% - 25px);
    line-height: 1.2;
    font-size: 12px;
    word-break: keep-all;
}

.detailWrap ul .txt strong {
    display: inline-block;
    font-weight: 400;
    margin-bottom: 5px;
}

.detailWrap ul .txt span {
    display: inline-block;
    font-size: 11px;
    color: #888;
}

.detailWrap ul .txt span.boxTxt {
    border: 1px solid #ccc;
    padding: 2px 4px;
    margin-right: 5px;
    font-size: 10px;
    letter-spacing: -0.5px;
}

.tagArea.detailTag {
    padding: 20px 20px;
    border-top: 1px solid #e2e5e8;
    margin-top: 0;
}

.tagArea.detailTag h4 {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 1.6rem;
}

.bottomBtn {
    clear: both;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 55px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    border-radius: 0;
    width: 100%;
    background: #18c9ba;
}

.bottomBtn.leftB {
    left: 0;
    border-top: 1px solid #ddd;
    background: #fff;
    width: 85px;
}

.bottomBtn.rightB {
    left: 85px;
    right: 0;
    width: -webkit-calc(100% - 85px); /* for Chrome, Safari */
    width: calc(100% - 85px);
    letter-spacing: -0.5px;
}

.bottomBtn > .cartBtn {
    position: relative;
    right: 0px;
    width: 24px;
    margin: 0 auto;
    line-height: 50px;
}

.bottomBtn > .cartBtn img {
    width: 24px;
    vertical-align: middle;
}

.bottomBtn > .cartBtn span {
    width: 18px;
    height: 18px;
    line-height: 18px;
    background: #18c9ba;
    color: #fff;
    font-weight: 300;
    font-size: 10px;
    border-radius: 100%;
    position: absolute;
    top: 5px;
    right: -10px;
    text-align: center;
}

.bottomBtn span.btnPrice {
    font-weight: 500;
}

.bottomBtn span.cartCount {
    display: inline-block;
    background: #fff;
    color: #222;
    font-weight: 700;
    border-radius: 50%;
    text-align: center;
    width: 17px;
    font-size: 12px;
    height: 17px;
    line-height: 16px;
    margin-right: 6px;
}


/* 계좌관리 */
.accountW {
    padding: 0 20px;
    background: #fff;
}

.accountW:after {
    content: "";
    display: block;
    clear: both;
}

.accountW p {
    text-align: center;
    line-height: 1.5;
    padding: 20px 0px 10px;
    word-break: keep-all;
}

.accountW p strong {
    text-align: left;
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #232732;
}

.accountW input {
    width: 100%;
    margin-top: 7px;
    padding: 0 6px;
    vertical-align: top;
    height: 40px;
    border: 1px solid #ddd;
}

.accountW select {
    width: 100%;
    border: 1px solid #ddd;
    margin-top: 7px;
    padding: 0 6px;
    vertical-align: top;
    height: 40px;
    background: #fff;
    background: url(/img/front/select-arrow.png) no-repeat 97% 50%;
}


/* 계좌정보수정 */
.confirm_text {
    position: relative;
    margin-bottom: 12px;
    text-align: left;
    overflow: hidden;
    color: #888;
    font-weight: 500;
    background: #f3f3f3;
    padding: 15px;
    border-radius: 5px;
    margin-top: 6px;
}

.accountBtn {
    position: absolute;
    top: 7px;
    right: 5px;
    font-size: 11px;
    padding: 8px;
    background: #fff;
    border: 1px solid #b2b8b8;
    font-weight: 500;
}

.hederUnder {
    padding: 0px 15px;
    line-height: 32px;
    font-size: 12px;
    background: #fff;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    color: #555;
}

.hederUnder span {
    vertical-align: top;
    padding-left: 5px;
}

.hederUnder span i {
    padding-right: 5px;
    color: #18c9ba;
}

.hederUnder img {
    width: 15px;
    margin-right: 3px;
    margin-top: 1px;
}

.hederUnder button {
    float: right;
    background: none;
    font-weight: 700;
    padding: 0;
}

.hederUnder button .arrow {
    margin: 0 2px;
    vertical-align: middle;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    border: solid #333;
    border-width: 0 1px 1px 0;
    display: inline-block;
    padding: 2px;
}

/*보관함, 상점 상품권 리스트*/
h3.totalTit {
    font-size: 12px;
    color: #444;
    font-weight: 400;
    padding: 10px 20px;
    position: Relative;
    background: #fff;
}

h3.totalTit span {
    font-weight: 600;
    color: #003f93;
}

h3.totalTit strong {
    color: #18c9ba;
}

/*상품권쪽 2023-03-07 추가*/
.giftcard-list:after {
    display: block;
    clear: both;
    content: '';
}

.giftcard-list li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
    display: inline-block;
    float: left;
    overflow: hidden;
}

.giftcard-list li:last-child {
    border-bottom: none;
}

.giftcard-list li .giftcard-title {
    background: #f8f9fa;
    border: 1px solid #eee;
}

.giftcard-list li .giftcard-title p {
    padding-left: 15px;
    line-height: 2.5;
    color: #888;
}

.giftcard-list li .giftcard-info:after {
    content: '';
    display: block;
    clear: both;
}

.giftcard-list li .giftcard-group {
    padding: 15px;
    position: relative;
    display: block;
}

/* 구매내역 버튼 */
.btn-bg {
    background: #fff;
    padding: 10px;
}

.btn-bg ul:after {
    content: '';
    display: block;
    clear: both;
}

.btn-bg ul li {
    width: 49%;
    margin-right: 2%;
    float: left;
    text-align: center;
    background: #fff;
}

.btn-bg ul li.one {
    margin-right: 0;
    width: 100%;
}

.btn-bg ul li.w100 {
    width: 100%;
}

.btn-bg ul li button {
    background: #fff;
    font-size: 14px;
    font-weight: 400;
    color: #888;
    line-height: 36px;
    width: 100%;
    padding: 0;
    letter-spacing: -0.05rem;
}

.btn-bg ul li button.left {
    background: #fff;
    color: #888;
    border: 1px solid #dbdbdb;
}

.btn-bg ul li button.right {
    background: #9ba0a5;
    color: #fff;
}

.btn-bg ul li:last-child {
    margin-right: 0;
}

/*보관함 미리보기 사이즈*/
.giftcard-info .thumbnail-wrap {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: inline-block;
    vertical-align: middle;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.giftcard-info .thumbnail-wrap span.end {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.7;
    display: block;
    z-index: 100;
    position: absolute;
}

.giftcard-info .thumbnail-wrap span.end img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 70px;
    margin-top: -35px;
    margin-left: -35px;
    text-align: center;
    font-style: normal;
}

.giftcard-info .thumbnail-wrap span.end em {
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    opacity: 1;
    width: 80px;
}

.giftcard-info .giftcard-text {
    position: relative;
    text-align: left;
    width: -webkit-calc(100% - 100px);
    width: calc(100% - 100px);
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 15px;
    font-size: 14px;
    color: #333;
    padding-top: 3px;
    min-height: 80px;
}

.giftcard-info .giftcard-text .shop {
    font-size: 1.2rem;
    margin-bottom: 3px;
    line-height: 1.5;
    font-weight: 300;
    padding: 0;
    color: #999;
}

.giftcard-info .giftcard-text h5 {
    line-height: 1.8 !important;
}

.giftcard-info .giftcard-text h5 span {
    color: #aaa;
    padding-right: 5px;
}

.giftcard-info .giftcard-text .name {
    line-height: 1.8;
    font-weight: 400;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    min-height: 38px;
    margin-bottom: 5px;
    color: #222;
}

.giftcard-info .giftcard-text .name span {
    color: #aaa;
    padding-right: 5px;
}

.giftcard-info .giftcard-text .name.mobile {
    -webkit-line-clamp: 1;
    min-height: 16px;
}

.giftcard-info .giftcard-text .price2 {
    font-size: 12px;
    font-weight: 500;
    color: #999;
}

.giftcard-info .giftcard-text .amount {
    font-size: 12px;
    margin-top: 3px;
    font-weight: 500;
}

.giftcard-info .giftcard-text .amount em {
    color: #999;
    padding-right: 3px;
}

.giftcard-info .giftcard-text .amount em:last-child {
    padding-left: 5px;
}

/* 보관함 잔액 */
.giftcard-info .giftcard-text h6 {
    font-weight: 600;
    text-align: right;
    font-size: 13px;
    color: #000;
}

.giftcard-info .giftcard-text h6 .price {
    padding: 2px 7px;
    font-weight: 500;
    border: 1px solid #ccc;
    font-size: 11px;
    margin-right: 5px;
    color: #666;
    border-radius: 15px;
}

.giftcard-info .giftcard-text h6 .type {
    float: left;
    background: #000;
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
    padding: 3px 5px;
    font-weight: 400;
}

/* 모바일상품권 메인 */
.giftCardList {
    text-align: center;
    padding: 0 20px;
}

.giftCardList:after {
    content: "";
    display: block;
    clear: both;
}

.giftCardList li {
    position: relative;
    width: 32%;
    margin-right: 2%;
    float: left;
    padding: 0;
    vertical-align: top;
    margin-bottom: 8px;
    overflow: hidden;
}

.giftCardList li:nth-child(3n) {
    margin-right: 0;
}

.giftCardList li .giftCardImgBox {
    width: 100%;
    border-bottom: 1px solid #eee;
    height: 30vw;
    max-height: 300px;
    min-height: 100px;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.giftCardList li .giftCardImgBox img {
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    height: auto;
}

.giftCardList li .giftCardTextBox {
    text-align: left;
    padding: 10px 0;
}

.giftCardList li .giftCardTextBox h5 {
    color: #333;
    overflow: hidden;
    display: block;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    line-height: 14px !important;
    height: 15px;
}

.giftCardList li .giftCardTextBox h6 {
    font-size: 13px;
    color: #000;
    font-weight: 700;
    padding: 5px 0 5px;
}

.giftCardList li .giftCardTextBox p {
    font-size: 11px;
    color: #999;
    font-weight: 500;
}

/* 모바일상품권 목록 가격정보 */
.giftcard-info .giftcard-text .discount {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    text-align: right;
}

.giftcard-info .giftcard-text .discount del {
    font-weight: 300;
    color: #999;
    padding-right: 3px;
    font-size: 12px;
}

.giftcard-info .giftcard-text .discount span {
    padding-right: 3px;
    color: #1cbfb7;
}

.giftcard-info .giftcard-text .coupon {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    color: #222;
    position: absolute;
    bottom: 0;
    right: 0;
}

/* 보관함 사용내역 상태 */
.giftcard-info .giftcard-text span.status-icon {
    background: #edf0f1;
    font-size: 11px;
    position: absolute;
    top: 0;
    right: 0;
    color: #56717c;
    padding: 2px 5px;
    border-radius: 5px;
}

.giftcard-info .giftcard-text span.status-icon2 {
    background: #dff9ed;
    font-size: 11px;
    position: absolute;
    top: 0;
    right: 0;
    color: #00a75a;
    padding: 2px 5px;
    border-radius: 5px;
}

.giftcard-info .giftcard-text span.status-icon3 {
    background: #ffebeb;
    font-size: 11px;
    position: absolute;
    top: 0;
    right: 0;
    color: #d13636;
    padding: 2px 5px;
    border-radius: 5px;
}

/*보관함 유효기간 및 구매날짜*/
.giftcard-info + .giftcard-date {
    margin-top: 10px;
}

.giftcard-date p {
    border-top: 1px solid #e9ecef;
    padding-top: 10px;
    height: 28px;
    text-align: left;
}

.giftcard-date p span.tit {
    color: #999;
    margin-right: 5px;
    font-weight: 500;
    float: left;
}

.giftcard-date p .date {
    float: right;
    background: #fff;
    color: #999;
}

.giftcard-date p .detail i {
    margin-left: 5px;
}

/*모바일상품권 상세*/
.shopDetail h5 {
    text-align: left;
    font-size: 15px;
    color: #555;
    font-weight: 500;
    padding: 15px 15px 10px;
}

.shopDetail h5.totalPrice {
    padding: 7px 15px 15px;
    font-size: 17px;
    color: #232732;
}

.shopDetail .salePrice {
    padding: 0 15px;
}

.shopDetail .salePrice del {
    color: #888;
}

.shopDetail .salePrice strong {
    font-size: 15px;
    display: inline-block;
    margin-left: 5px;
    color: #18c9ba;
}

.detailWrap.ver02 ul {
    padding: 7px 0;
}

.detailWrap.ver02 ul li {
    vertical-align: middle;
}

.detailWrap.ver02 ul .icon img {
    width: 20px;
}

.detailWrap.ver02 ul .txt {
    width: -webkit-calc(100% - 35px);
    width: calc(100% - 35px);
    letter-spacing: -.3px;
}

.detailWrap.ver02 ul .txt strong {
    font-weight: 500;
    font-size: 13px;
    margin-bottom: 0;
}

.detailWrap.ver02 ul .txt span {
    margin-left: 7px;
    font-weight: 500;
    font-size: 12px;
    color: #9090a0;
}

.infoTxt .infoTxtTit {
    font-weight: 500;
    font-size: 14px;
    line-height: 30px;
    margin-top: 15px;
    border-top: 1px solid #eee;
    padding-top: 5px;
}

.infoTxt span {
    display: block;
    word-break: keep-all;
    margin-bottom: 7px;
    color: #777786;
    font-size: 11px;
    letter-spacing: -.3px;
}


.detailWrap p.tit {
    font-size: 1.6rem;
    font-weight: 600;

}

/*상품권 구매 탭 */
ul.normal-tabs {
    width: 100%;
    text-align: center;
}

ul.normal-tabs:after {
    content: '';
    display: block;
    clear: both;
}

ul.normal-tabs li {
    float: left;
    margin: 0 auto;
    text-align: center;
    width: 33.3%;
    font-size: 13px;
    font-weight: 500;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    line-height: 40px;
    display: block;
    background-color: #f7f7f7;
    color: #888;
}

ul.normal-tabs li:last-child {
    border-right: none;
}

ul.normal-tabs li.current {
    color: #18c9ba;
    border-top: 1px solid #18c9ba;
    border-bottom: 1px solid #fff;
    background: #fff;
    font-weight: 700;
    width: 33.4%;
}

.normal-tab-content.current {
    display: inherit;
}

.normal-tab-content {
    display: none;
}

.normal-tab-content {
    width: 100%;
}

.normal-tab-content p {
    line-height: 1.8;
}

/*모바일상품권 주문*/
.cartList h5 {
    font-size: 15px;
    color: #555;
    font-weight: 500;
    padding: 15px 15px;
}

.cartList .giftCardTotal {
    text-align: right;
    padding: 15px;
    font-size: 15px;
    font-weight: 700;
}

.cartList .giftCardTotal strong {
    color: #18c9ba;
    margin: 0 3px;
}

.shopBuyTit span.phoneN {
    display: block;
    margin: 8px 0;
}

.shopBuyTit span.phoneN > input {
    width: 100%;
    padding: 0 10px;
    color: #111;
    font-weight: 700;
    font-size: 14px;
}

.shopGuide.Sred {
    font-weight: 700;
    font-size: 11px;
    word-break: keep-all;
    padding-bottom: 0;
}

/* 상품권보관함 */
.useEnd {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
}

.useEnd .cardStatus {
    float: right;
    display: inline-block;
    color: #fff;
    border-top-right-radius: 8px;
    border-bottom-left-radius: 3px;
    background: rgba(0, 0, 0, 0.8);
    width: 46px;
    line-height: 42px;
    font-weight: 500;
    font-size: 11px;
}

.moreBtn {
    text-align: center;
    margin: 0 20px;
}

/*장바구니*/
.cartList {
    border-bottom: 1px solid #e7eaed;
    background: #fff;
}

.cartList h6 {
    color: #333;
    padding: 20px 20px 0px;
    font-size: 14px;
    line-height: 20px;
}

.cartList h6 span {
    float: right;
    line-height: 0;
}

.cartList h6 span button {
    background: none;
    width: 24px;
    height: 24px;
}

.cartList h6 span button img {
    width: 11px;
}

.cartList .menuOption {
    padding: 10px 20px;
}

.cartList .menuOption li {
    line-height: 1.6;
    color: #888;
}

.cartList > .Quantity {
    padding: 5px 20px 10px;
}

.cartList > .buyCode {
    border-bottom: none;
    padding-top: 0px;
}

.menuAdd {
    display: block;
    width: 100%;
    background: #f9f9f9;
    font-size: 14px;
    color: #232732 !important;
    border-bottom: 1px solid #ddd;
    font-weight: 500;
    text-align: center;
    line-height: 50px;
}

.menuAdd strong {
    font-size: 19px;
    vertical-align: top;
    font-weight: 500;
}

.buyResult {
    background: #fff;
    padding: 0 20px;
    margin: 10px 0 0px;
}

.buyResult h5 {
    font-size: 15px;
    line-height: 40px;
    color: #232732;
}

.buyResult span {
    float: right;
    font-size: 15px;
}

.cartNone {
    text-align: center;
    color: #666;
    padding: 10vh 0;
    font-size: 13px;
    line-height: 16px;
}

.cartNone .noneMark {
    width: 20%;
    display: block;
    margin: 0 auto;
    padding: 15px 0;
    max-width: 80px;
}

/*아이템 리스트 공통 - 슬라이드타입/리스트타입*/
.wrap-items {
    width: 100%;
}

.wrap-items .tit-wrap {
    width: 100%;
    position: relative;
}

.wrap-items .tit {
    overflow: hidden;
    font-size: 1.6rem;
    font-weight: 600;
    padding: 30px 15px 10px;
}

.wrap-items .tit a {
    float: right;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.5);
}

.wrap-items .tit a i {
    padding-left: 3px;
    font-size: 10px;
    line-height: 12px;
    color: rgba(0, 0, 0, 0.5);
    vertical-align: unset;
}

.wrap-items.color-bg .tit {
    color: #fff;
}

.wrap-items.color-bg .tit a,
.wrap-items.color-bg .tit a i {
    color: rgba(255, 255, 255, 0.8);
}

.wrap-items .flag {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 6px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #da2a4d;
    border-radius: 50px;
}

.wrap-items strong {
    color: #18c9ba;
    margin: 1rem 0 2.5rem;
    font-weight: 600;
}

.wrap-items.color-bg .coupon-list li {
    padding: 10px;
    border-radius: 6px;
}


/* 카드 슬라이드 */
.wrap-items .card-slide-Swiper .swiper-slide {
    position: relative;
    font-size: 1.4rem;
    padding-right: 0.5rem;
    box-sizing: border-box;
    background: #ebeff3;
    border-radius: 16px;
    overflow: hidden;
    width: 80%;
    margin-right: 2rem;
    padding: 2rem;
    text-align: center;
}

.wrap-items .card-slide-Swiper .swiper-slide .emoney-card {
    display: inline-block;
    border-radius: 10px;
    overflow: hidden;
    width: 70%;
    max-width: 260px;
    margin-bottom: 10px;
}

.wrap-items .card-slide-Swiper .swiper-slide .tit {
    color: rgba(0, 0, 0, 0.9);
    padding: 0;
    letter-spacing: -0.05rem;
    word-break: keep-all;
    margin-top: 2rem;
    text-align: left;
}

.wrap-items .card-slide-Swiper .swiper-slide .txt {
    color: rgba(0, 0, 0, 0.5);
    padding: 0;
    margin-top: 0.5rem;
    letter-spacing: -0.05rem;
    word-break: keep-all;
    text-align: left;
}

.wrap-items .card-slide-Swiper .swiper-slide .btn {
    width: 100px;
    line-height: 4rem;
    padding: 0;
    font-size: 1.4rem;
    text-align: center;
    border-radius: 30px;
    background: #222;
    color: #fff;
    margin: 2rem auto 0;
}

/*아이템 슬라이드 HOT PICK*/
.wrap-items .item-slide {
    padding-bottom: 30px;
    position: relative;
}

.swiper-horizontal > .swiper-pagination-progressbar {
    top: 180px;
    border-radius: 3px;
    overflow: hidden;
}

.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #000;
    border-radius: 3px;
}

.wrap-items .item-slide .swiper-slide {
    position: relative;
    font-size: 1.4rem;
    padding-right: 0.5rem;
    width: 135px;
    box-sizing: border-box;
}

.wrap-items .item-slide .swiper-slide .thumbnail-wrap {
    display: inline-block;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    width: 120px;
    height: 120px;
    margin-bottom: 10px;
}

.thumbnail-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.thumbnail {
    position: relative;
    padding-top: 100%;
    overflow: hidden;
}

.thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
}

.thumbnail .centered {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);
}

.thumbnail .centered img {
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.thumbnail img.portrait {
    width: 100%;
    max-width: none;
    height: auto;
}

.thumbnail img.landscape {
    width: auto;
    max-width: none;
    height: 100%;
}

.wrap-items .item-slide .shop {
    font-size: 1.4rem;
    margin-bottom: 3px;
    line-height: 1.5;
    font-weight: 500;
    color: #222;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.wrap-items .item-slide .shop2 {
    color: #222;
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.wrap-items .item-slide .keyword {
    color: #999;
    font-size: 10px;
    font-weight: 200;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.wrap-items .item-slide .name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    min-height: 38px;
    margin-bottom: 4px;
    font-weight: 400;
    width: 90px;
    font-size: 1.4rem;
}

.wrap-items .item-slide .price {
    font-size: 12px;
    color: #999;
}

.wrap-items .item-slide .discount {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    margin-top: 5px;
}

.wrap-items .item-slide .discount span {
    color: #18c9ba;
    padding-right: 3px;
}

.wrap-items .item-slide .coupon {
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    margin-top: 5px;
    color: #222;
}

/*카테고리 슬라이드 및 나타남*/
.category-wrap {
    position: relative;
    width: 100%;
    padding: 8px 0;
    background: #fff;
    z-index: 1;
}

.category-wrap .category-slide li {
    position: relative;
    display: inline-block;
    width: auto;
}

.category-wrap .category-slide li:last-child {
    padding-right: 57px;
}

.category-wrap .category-slide li a {
    display: block;
    padding: 0 12px;
    font-size: 13px;
    color: #111;
    height: 34px;
    line-height: 34px;
    border-radius: 17px;
    transition: 0.3s;
}

.category-wrap .category-slide li a.on {
    color: #7c8ea7;
    background-color: rgb(77 137 217 / 10%);
    font-weight: 500;
    border-radius: 17px;
}

.category-wrap .category-slide li a:active {
    border-radius: 17px;
    background-color: rgba(0, 0, 0, 0.05);
}

.category-wrap .moreBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: transparent;
    z-index: 2;
    margin: 0;
    font-size: 11px;
    color: #666;
}

#SearchDiv.category {
    margin-top: 0;
    border: 0;
    background: #fff;
}

#SearchDiv.moreBtn {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    padding: 0;
    height: 50px;
    background: none;
    background-image: linear-gradient(to right, transparent 0, #fff 40%, #fff 100%);
    z-index: 2;
    margin: 0;
}

#SearchDiv.moreBtn button {
    line-height: 48px;
    text-align: center;
    width: 50px;
}

#SearchDiv.moreBtn button i {
    font-size: 11px;
    margin-left: 3px;
    color: #111;
}

/* 카테고리 더보기 버튼 수정*/
.category-wrap .moreBtn2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    padding: 0;
    height: 50px;
    background: none;
    background-image: linear-gradient(to right, transparent 0, #fff 40%, #fff 100%);
    z-index: 2;
    margin: 0;
}

.category-wrap .moreBtn2 button {
    line-height: 48px;
    text-align: center;
    width: 50px;
}

.category-wrap .moreBtn2 button i {
    font-size: 11px;
    margin-left: 3px;
    color: #111;
}

/* 카테고리 더보기 버튼 수정*/

.category-list {
    display: inline-block;
    width: 100%;
    margin-top: 0;
    padding: 0 0 0 15px;
    background-color: #fff;
}

.category-list h3 {
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 50px;
}

.category-list ul li {
    position: relative;
    display: inline-block;
    float: left;
    width: auto;
    margin: 0 8px 8px 0;
}

.category-list ul li a {
    display: block;
    padding: 0 12px;
    font-size: 13px;
    color: #111;
    border-radius: 17px;
    height: 34px;
    line-height: 34px;
    background-color: #fff;
    transition: 0.3s;
}

.category-list ul li a.on {
    color: #7c8ea7;
    background-color: rgb(77 137 217 / 10%);
    font-weight: 600;
}

.category-list ul li a:active {
    border-radius: 17px;
    background-color: rgba(0, 0, 0, 0.05);
}

/* 메뉴상세 */
.orderForm {
    margin-top: 10px;
    background: #fff;
}

.buyCode {
    padding: 15px 0;
    margin: 0 20px;
    border-bottom: 1px solid #e7eaed;
}

.buyCode .codeTit {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin-bottom: 15px;
}

.buyCode .codeTit span {
    float: right;
    display: inline-block;
    font-weight: 400;
    color: #000;
}

.buyCode .codeTit span strong {
    font-weight: 400;
}

/*테이블오더 마이페이지*/
.infoImg {
    display: inline-block;
    width: 55px;
    vertical-align: top;
    margin-top: 8px;
}

.infoW {
    display: inline-block;
    width: -webkit-calc(100% - 68px); /* for Chrome, Safari */
    width: calc(100% - 68px);
}

.shopBuyTit span.guide {
    font-size: 10px;
    color: #aaa;
}

.shopBuyTit button.amend {
    color: #232732;
    border: 1px solid #ddd;
    font-size: 10px;
    font-weight: 500;
    border-radius: 20px;
    padding: 5px 10px;
}

.shopBuyTit > a.searchBoxBtn {
    width: 100%;
    margin: 0px;
    margin-top: 20px;
}

.deliverySteps {
    text-align: center;
    margin: 20px 0 10px;
}

.deliverySteps li {
    display: inline-block;
    width: 24%;
    font-weight: 300;
    font-size: 12px;
    color: #898c91;
    letter-spacing: -1px;
    border-right: 1px solid #ddd;
}

.deliverySteps li:last-child {
    border-right: none;
}

.deliverySteps li strong {
    display: block;
    font-size: 18px;
    font-weight: 500;
}

.deliverySteps li.StepsOn {
    color: #18c9ba;
}

.deliverySteps li.StepsOn strong {
    color: #18c9ba;
    font-weight: 900;
}

.deliverySteps li.orderNone {
    width: 100%;
    line-height: 90px;
}

.historyW {
    padding: 15px 20px;
}

.historyW p {
    font-size: 11px;
    color: #888;
}

.historyW p span {
    display: inline-block;
    float: right;
    text-align: right;
}

.historyW p span strong {
    color: #232732;
}

.historyW h2 {
    font-size: 16px;
    font-weight: 500;
    color: #232732;
    line-height: 1.6;
    margin-top: 5px;
}

.historyW > .menuOption {
    padding-left: 0;
    padding-right: 0;
}

.historyBtn {
    text-align: center;
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    padding: 15px 0;
    margin-top: 7px;
}

.historyBtn li {
    display: inline-block;
    width: 32%;
}

.historyBtn li a {
    display: inline-block;
    width: 100%;
    border-right: 1px solid #dfdfdf;
    color: #232732;
    font-weight: 500;
}

.historyBtn li:last-child a {
    border-right: none;
}

.historyBtn li.cancelNone a {
    color: #ddd;
    pointer-events: none;
    cursor: default;
}

.historyW h2 .orderClass {
    display: inline-block;
    padding: 1px;
    font-size: 10px;
    background: rgba(55, 23, 178, 0.1);
    font-weight: 300;
    color: #222;
    border-radius: 3px;
    padding: 2px 5px;
    margin: 0 3px;
}

.historyW h2 .orderClass img {
    width: 12px;
    height: auto;
    border: none;
    vertical-align: middle;
    display: inline-block;
    margin-right: 3px;
}

/*주문상세*/
.orderDetail {
    border-bottom: 1px solid #e7eaed;
}

.orderDetail h6 {
    color: #333;
    padding: 12px 15px 0px;
    font-weight: 500;
    font-size: 15px;
    line-height: 20px;
}

.orderDetail .menuOption {
    padding: 10px 15px;
}

.orderDetail .menuOption li {
    line-height: 1.6;
    color: #888;
}

.Quantity {
    width: 100%;
    padding: 15px 20px;
}

.Quantity:after {
    content: "";
    display: block;
    clear: both;
}

.Quantity li {
    display: inline-block;
    border: 1px solid #ccc;
    height: 30px;
    width: 30px;
    line-height: 28px;
    float: right;
    text-align: center;
    font-size: 16px;
    color: #666;
    cursor: pointer;
}

.Quantity li.QuantityTit {
    width: auto;
    border: none;
    font-size: 15px;
    font-weight: 700;
    padding-right: 5px;
    float: left;
    color: #333;
    line-height: 30px;
}

.Quantity li.price1 {
    border-left: none;
    border-right: none;
    width: 45px;
    color: #333;
    font-weight: 500;
    font-size: 12px;
}

.point-menu li .menu_tit {
    display: block;
    font-size: 12px;
    color: #333;
    font-weight: 500;
    position: relative;
    padding: 5px 0;
}

.point-menu li .menu_tit p {
    font-size: 14px;
    display: inline-block;
    text-align: right;
    position: absolute;
    top: 0;
    right: 0;
    padding-top: 4px;
}

.point-menu li .menu_tit p span {
    margin-right: 5px;
}

/* 결제하기 포인트*/
.use-input-box {
    display: flex;
}

.use-input-box .tit {
    font-size: 1.4rem;
    line-height: 32px;
    padding-left: 15px;
    position: relative;
    font-weight: 500;
}

.use-input-box .tit::before {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 0;
    width: 4px;
    height: 20px;
    content: '';
    background: #e8e8e8;
}

.use-input-box .use-input {
    margin-left: auto;
    border: 1px solid #e8e8e8;
    border-radius: 4px;
    position: relative;
    width: calc(100% - 80px);
    overflow: hidden;
    height: 34px;
}

.use-input-box .use-input input {
    display: inline-block;
    width: calc(100% - 70px);
    border: none;
    padding: 0 10px;
    font-size: 1.4rem;
    height: 32px;
    text-align: right;
    position: absolute;
    left: 0;
    font-weight: 600;
}

.use-input-box .use-input button {
    position: absolute;
    right: 0;
    height: 32px;
    line-height: 32px;
    top: 0;
    width: 70px;
    transition: 0.3s;
    background: #f7f7f7;
    border-left: 1px solid #e8e8e8;
    color: #999;
    font-size: 1.2rem;
}

.use-input-box .use-input button:active {
    background: #eee;
}

.form-item .input-set {
    position: relative;
    display: flex;
    justify-content: space-between;
}

/* 카드 정보 입력 */
.input-set .w50 {
    width: 47.5%;
}

.input-set .dash {
    line-height: 4rem;
    width: 5%;
    text-align: center;
}

.input-set .number-set {
    width: 47.5%;
    display: flex;
    justify-content: space-between;
}

.input-set .number-set input {
    width: 50px;
}

.input-set .number-set .circle-code {
    position: relative;
    width: 10px;
    height: 40px;
}

.input-set .number-set .circle-code:after {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -3px;
    margin-left: -3px;
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    background: #4a4a4a;
    border-radius: 100%;
}


/*체크박스 커스텀*/
.custom-checkbox {
    margin: 10px 0 15px 0;
    display: block;
}

.custom-checkbox.no-label {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.custom-checkbox > input[type=checkbox] {
    display: none;
}

.custom-checkbox > input[type=checkbox] + label {
    display: inline-block;
    cursor: pointer;
    line-height: 1.5;
    padding-left: 28px;
    position: relative;
    font-weight: 400;
    font-size: 1.2rem;
    color: #222;
}

.custom-checkbox.no-label > input[type=checkbox] + label {
    height: 22px;
    line-height: 22px;
    padding-left: 22px;
}

.custom-checkbox > input[type=checkbox] + label:before,
.custom-checkbox > input[type=checkbox] + label::before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bbb;
    background: #fff;
    border-radius: 4px;
}

.custom-checkbox > input[type=checkbox]:checked + label:before,
.custom-checkbox > input[type=checkbox]:checked + label::before {
    border: 1px solid #003f93;
    background-color: #003f93;
}

.custom-checkbox > input[type=checkbox]:checked + label:after,
.custom-checkbox > input[type=checkbox]:checked + label::after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-left: none;
    border-top: none;
    transform: translate(7.75px, 4.5px) rotate(45deg);
    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
}

.custom-checkbox > input[type=checkbox]:disabled + label:before,
.custom-checkbox > input[type=checkbox]:disabled + label::before {
    border: 1px solid #ddd;
    background-color: #eee;
}

p.balance {
    background: #f6f6f6;
    padding: 7px 8px;
    border-radius: 4px;
}

p.balance span.title {
    position: relative;
    padding-left: 20px;
    color: #6e6a5e;
    font-weight: 500;
    line-height: 16px;
}

p.balance span.title:before {
    content: 'e';
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background: #1cbfb7;
    border-radius: 100%;
    padding: 0 3px;
    vertical-align: top;
    text-align: center;
    width: 15px;
    height: 15px;
    line-height: 15px;
    font-size: 1.2rem;
}

p.balance span.point {
    float: right;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.03rem;
}

p.info-text {
    line-height: 28px;
    font-size: 12px;
    background: #fff;
    color: #555;
    padding-left: 7px;
}

p.info-text span {
    padding-left: 1px;
    padding-top: 1px;
}


/* text radio tap style */
.radio_item {
    display: inline-block;
    vertical-align: top;
}

.radio-tap {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.radio-tap.col2 .radio-item {
    width: 50%;
}

.radio-item:first-of-type {
    border-radius: 4px 0 0 4px;
}

.radio-item:last-of-type {
    border-radius: 0 4px 4px 0;
}

.radio-item label {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    font-weight: 500;
    border-radius: inherit;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    background: #fff;
    color: #929294;
    padding: 1.25rem 0;
    text-align: center;
    letter-spacing: -0.08rem;
}

.radio-item:last-child label {
    border-left: none;
}

.radio-item:last-child label:checked {
    border-left: 1px solid #000;
}

.radio-item:last-child input[type=radio]:checked + label::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    width: 1px;
    background: #000;
    height: 4.5rem;
}

.radio-item input[type=radio]:checked + label {
    z-index: 1;
    border-color: #003f93;
    font-weight: 500;
    color: #fff;
    background: #003f93;
}

.radio-list::after {
    content: '';
    display: block;
    clear: both;
}

.radio-list li {
    width: 50%;
    box-sizing: border-box;
    float: left;
    margin-bottom: 5px;
}

.radio-list li:nth-child(odd) {
    padding-right: 5px;
}

.radio-list li:nth-child(odd) {
    padding-right: 5px;
}

.radio-item2 label {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 1.4rem;
    color: #929294;
    padding: 1.25rem 0;
    text-align: center;
    letter-spacing: -0.08rem;
    box-sizing: border-box;
    background: #fff;
}

.radio-item2:last-child label {
}

.radio-item2:last-child label:checked {
}

.radio-item2 input[type=radio]:checked + label {
    z-index: 1;
    border-color: #003f93;
    font-weight: 500;
    color: #fff;
    background: #003f93;
}


.order-info {
    margin: 1rem 0 1.5rem;
}

.order-info.box {
    margin: 1rem 0 0;
}

.order-info + .order-info {
    border-top: 1px solid #e8e8e8;
    padding-top: 1.5rem;
}

.order-info li {
    font-size: 1.4rem;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.order-info li + li {
    margin-top: .5rem;
}

.order-info li .tit {
    font-weight: 500;
    color: #4f565a;
    display: table-cell;
    vertical-align: top;
    width: 12rem;
    position: relative;
}

.order-info li .tit-head {
    font-weight: 600;
    color: #222;
    display: table-cell;
    vertical-align: top;
    position: relative;
    padding-top: 0.5rem;
}

.order-info li .tit.line {
    padding-left: 20px
}

.order-info li .tit.line:before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border: solid #e8e8e8;
    border-width: 0 0 2px 2px;
    content: ''
}

.order-info li .txt {
    display: table-cell;
    vertical-align: middle;
    color: #000;
    text-align: right;
    font-weight: 500;
}

.order-info li .txt em {
    font-weight: 600;
}

.order-info li .txt .point {
    font-weight: 600;
    color: #d72b4c;
}

.order-info + .edit-txt {
    margin-top: 2rem;
}

.order-info .total-top .tit,
.order-info .total-top .txt {
    color: #000;
    font-weight: 600;
}

.order-info .txt .point {
    color: #d72b4c;
    font-weight: 700;
    font-size: 1.6rem;
    padding-right: .2rem;
}

/* 주문 */
.con-box-line {
    margin: 10px 20px;
    border-radius: 14px;
    border: 1px solid #18c9ba;
}

.con-box-line .shopBuyTit {
    padding: 15px;
    margin-bottom: 0;
    box-shadow: -1px 6px 10px 1px rgb(0 0 0 / 5%);
}

.con-box-line .deliverySteps {
    text-align: center;
    margin: 10px 0 5px;
}

.shopBuyTit {
    padding: 15px 20px;
}

.shopBuyTit h3 {
    font-size: 15px;
    font-weight: 500;
    color: #232732;
    line-height: 1.6;
}

.shopBuyTit button {
    background: none;
    color: #18c9ba;
    font-size: 13px;
    float: right;
    font-weight: 400;
}

.shopBuyTit span {
    display: inline-block;
    font-size: 12px;
    color: #888;
    font-weight: 400;
    line-height: 1.8;
}

.shopBuyTit strong {
    display: block;
    font-size: 14px;
    line-height: 2;
    padding: 5px 0
}

.shopBuyTit strong.boxtit {
    text-align: center;
    border: 1px solid #ddd;
    margin: 15px 0;
    font-weight: 400;
}

.shopBuyTit textarea {
    width: 100%;
    margin: 8px 0;
    height: 55px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    padding: 7px 10px;
    line-height: 1.5;
    font-weight: 400;
    color: #232732;
}

/*주문방식선택 캘린더*/
.timeInput {
    border: none;
    border-bottom: 1px solid #aaa;
    width: 34px;
    margin: 0 2px;
    text-align: center;
}

/*주문관리*/
.orderW {
    padding: 15px 15px 5px;
}

.orderW p {
    font-size: 11px;
    color: #888;
}

.orderW h2 {
    font-size: 16px;
    font-weight: 700;
    color: #232732;
    line-height: 1.5;
    margin-top: 6px;
}

.orderW h2 span {
    font-size: 11px;
    margin-left: 5px;
    color: #555;
    vertical-align: bottom;
}

.orderW .menuOption {
    padding: 10px 0px;
    word-break: keep-all;
}

.orderW .menuOption li {
    line-height: 1.6;
    color: #888;
}

.state {
    display: block;
    width: 100%;
    background: #fff;
    color: #666;
    font-size: 13px;
    border-top: 1px solid #eee;
    font-weight: 700;
    text-align: center;
    height: 45px;
    line-height: 45px;
}

strong.orderType {
    float: right;
    text-align: right;
    display: inline-block;
    padding: 1px;
    line-height: 1.2;
    font-size: 11px;
    background: rgba(55, 23, 178, 0.1);
    font-weight: 300;
    color: #222;
}

strong.orderType img {
    width: 13px;
    height: auto;
    border: none;
    vertical-align: middle;
    display: inline-block;
    margin-right: 2px;
}

.orderHitory {
    width: 100%;
    padding: 5px 24px;
    margin-bottom: 20px;
}

.orderHitory li {
    font-size: 11px;
    color: #555;
    line-height: 1.1;
    padding: 2px 0;
}

.orderHitory li strong {
    display: inline-block;
    margin-left: 5px;
    color: #232732;
    font-weight: 500;
}

/*모바일상품권 구매내역*/
.gray-box {
    background: #eff0f4;
    margin-top: 55px;
    padding-bottom: 20px;
}

.giftcard-paylist-box {
    margin: 0 15px;
}

.giftcard-paylist li {
    width: 100%;
    padding: 15px;
    background: #fff;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 2px 3px 15px rgba(0, 0, 0, .1);
}

.giftcard-paylist li p.giftcard-paylist-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

.giftcard-paylist li p.giftcard-paylist-title span {
    float: right;
    color: #999;
}

.giftcard-paylist li p.giftcard-paylist-title span i {
    margin-left: 5px;
}

.giftcard-paylist-img {
    margin-top: 10px;
    position: relative;
}

.giftcard-paylist-img span.price {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 20px;
}

.giftcard-img {
    display: inline-block;
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    vertical-align: top;
    position: relative;
}

.giftcard-paylist-img img {
    width: 100%;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

.giftcard-paylist-img p {
    display: inline-block;
    vertical-align: top;
    margin-left: 10px;
}

.giftcard-paylist-img p strong {
    font-size: 13px;
    font-weight: 300;
    margin-top: 2px;
    margin-bottom: 7px;
    display: block;
    color: #000 !important;
}

.giftcard-paylist-img p span {
    display: block;
    font-size: 12px;
    font-weight: 200;
    color: #666;
    margin-bottom: 7px;
}

/* 쿠폰,상품권 사각 리스트 */
.coupon-list {
    padding: 0 15px 20px;
}

.coupon-list li {
    position: relative;
    background: #fff;
    overflow: hidden;
}

.coupon-list li + li {
    margin-top: 15px;
}

.coupon-list li .mark {
    position: absolute;
    width: 25px;
    height: 25px;
    background: #18c9ba;
    color: #fff;
    top: 0;
    left: 0;
    line-height: 25px;
    text-align: center;
    z-index: 1;
    padding: 0;
    font-size: 10px;
    border-bottom-right-radius: 5px;
}

/*결제수단선택*/
.paymentCode {
    padding: 15px 22px 10px;
}

.codePick.radioW label {
    font-weight: 500;
    color: #232732;
}

.codePick.radioW label span {
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

.codePick.radioW label span strong {
    font-weight: 700;
    font-size: 12px;
    padding: 0 1px;
}

.codePick.radioW {
    line-height: 4;
}

.codePick.radioW input[type=radio] {
    display: none;
}

.codePick.radioW input[type=radio] + label {
    text-align: left;
    display: inline-block;
    cursor: pointer;
    padding-left: 26px;
    background: url(/dist/img/front2/checkOff2.png) left/22px no-repeat;
    vertical-align: middle;
}

.codePick.radioW input[type=radio]:checked + label {
    background-image: url(/dist/img/front2/checkOn2.png);
}

.codePick.radioW input[type=radio]:checked + label span {
    color: #232732;
}

.codePick {
    font-size: 14px;
    word-break: keep-all;
    display: block;
}

.codePick label {
    line-height: 18px;
    color: #444;
    width: 100%;
}

.codePick label span {
    float: right;
    display: inline-block;
    font-size: 13px;
}

.codePick label span strong {
    font-weight: 400;
}

.codePick input[type=checkbox] {
    display: none;
}

.codePick input[type=checkbox] + label {
    text-align: left;
    display: inline-block;
    cursor: pointer;
    padding-left: 25px;
    background: url(/dist/img/front2/checkOff2.png) left/18px no-repeat;
    vertical-align: middle;
}

.codePick input[type=checkbox]:checked + label {
    background-image: url(/dist/img/front2/checkOn2.png);
}

.codePick.Multiple {
    line-height: 2;
}

.codePick.Multiple input[type=checkbox] + label {
    background: url(/dist/img/front2/checkOff2.png) left/18px no-repeat;
}

.codePick.Multiple input[type=checkbox]:checked + label {
    background-image: url(/dist/img/front2/checkOn2.png);
}

/* 교통카드 잔액체크 */
button.check {
    float: right;
    padding: 9px 15px;
    border-radius: 20px;
    border: 1px solid #18c9ba;
    color: #18c9ba;
    background: transparent;
    transition: all 0.1s ease-out;
    font-size: 13px;
    font-weight: 500;
}

button.check:active {
    color: #fff;
    background: #18c9ba;
    transition: all 0.1s ease-out;
}

/* 결제하기 결제동의 2023-04-27 */
.payment-terms-box {
    border-bottom: solid 1px #e1e1e1;
}

.payment-terms-tit {
    position: relative;
    cursor: pointer;
}

.payment-terms-tit .acc-tit {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    display: table;
    table-layout: fixed;
    width: 100%;
}

.payment-terms-detail {
    border-top: solid 1px #e1e1e1;
    border-bottom: solid 1px #e1e1e1;
    background-color: #f6f6f6;
    display: none;
    font-size: 1.2rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
    padding: 15px 20px;
    text-align: left;
}

.terms-expanded {
    transition: all .3s ease-in-out;
}

.terms-toggle {
    background: transparent;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #333333;
    height: 8px;
    width: 8px;
    transition: all .3s ease-in-out;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -4px;
}

.terms-toggle-open {
    -moz-transform: rotate(-224deg);
    -ms-transform: rotate(-224deg);
    -webkit-transform: rotate(-224deg);
    transform: rotate(-224deg);
}

.barcode-wrap {
    margin: 30px auto;
    text-align: center;
}

@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.refreshRotate {
    animation: rotateAnimation 400ms linear;
}

/* toggle */
.toggle-box {
    display: inline-block;
    position: absolute;
    right: 15px;
}

.toggle-box .tgl {
    display: none;
}

.toggle-box .tgl,
.toggle-box .tgl:after,
.toggle-box .tgl:before,
.toggle-box .tgl *,
.toggle-box .tgl *:after,
.toggle-box .tgl *:before,
.toggle-box .tgl + .tgl-btn {
    box-sizing: border-box;
}

.toggle-box .tgl::selection,
.toggle-box .tgl *::selection,
.toggle-box .tgl + .tgl-btn::selection {
    background: none;
}

.toggle-box .tgl + .tgl-btn {
    outline: 0;
    display: block;
    width: 4em;
    height: 2em;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.toggle-box .tgl + .tgl-btn:after,
.toggle-box .tgl + .tgl-btn:before {
    position: relative;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
}

.toggle-box .tgl + .tgl-btn:after {
    left: 0;
}

.toggle-box .tgl + .tgl-btn:before {
    display: none;
}

.toggle-box .tgl:checked + .tgl-btn:after {
    left: 50%;
}

.toggle-box .tgl-light + .tgl-btn {
    background: #9aa2ac;
    border-radius: 2em;
    padding: 2px;
    transition: all 0.4s ease;
}

.toggle-box .tgl-light + .tgl-btn:after {
    border-radius: 50%;
    background: #fff;
    transition: all 0.2s ease;
}

.toggle-box .tgl-light:checked + .tgl-btn {
    background: #003f93;
}


/* 결제비밀번호 동그라미 */
.password-indicator span.filled {
    background-color: #003f93;
    border: 1px solid #003f93;
}

.passCircle {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #c3cad0;
    background: #c3cad0;
    margin-right: 10px;
    border-radius: 50%;
}

.tax-guide {
    padding: 10px;
    background: #f3f3f3;
    color: #666;
    border-radius: 6px;
    margin: 10px 0;
}

.tax-guide h4 {
    font-size: 13px;
    margin-bottom: 5px;
    color: #333;
}

.tax-guide h4 i {
    padding-right: 3px;
    color: #b4bec4;
}

.tax-guide ul li {
    padding-left: 7px;
    position: relative;
    font-size: 12px;
    color: #888b92;
}

.tax-guide ul li + li {
    margin-top: 3px;
}

.tax-guide ul li:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -2px;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background: #b4bec4;
}

.total-price-box {
    padding: 10px;
    background: rgb(255 190 122 / 20%);
    color: #666;
    border-radius: 4px;
    margin: 10px 0;
}

.total-price-table {
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    color: #000;
}

.total-price-table th {
    width: 120px;
    text-align: left;
    font-weight: 500;
}

.total-price-table td {
    text-align: right;
    color: #d57800;
}

/*하단 안내문구*/
.bottom-guide {
    text-align: left;
    color: #888b92;
    padding: 5px 0;
    font-weight: 300;
}

.bottom-guide span i {
    color: #b4bec4;
    padding-right: 3px;
}


/* 내 지갑 swiper */
.card-slider .swiper-slide .card-tit {
    text-align: center;
    margin-bottom: 1.5rem;
}

.card-slider .swiper-slide img {
    width: 100%;
}

.card-slider .swiper-pagination {
    text-align: center;
    left: 0;
}

.card-slider .swiper-pagination-bullet {
    background: rgba(0, 0, 0, 0.5);
}

.card-slider .swiper-pagination-bullet-active {
    background: #222;
}

.card-slider .swiper-button-prev {
    left: 0;
    top: 50%;
}

.card-slider .swiper-button-next {
    right: 0;
    top: 50%;
}

.card-slider .swiper-button-next:after, .card-slider .swiper-button-prev:after {
    font-size: 1.6rem;
    color: #222;
}

.card-slider .emoney-card {
    width: 216px;
    border-radius: 16px;
    margin-bottom: 5rem;
}

/* 카드 썸네일 */
.emoney-card {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

.emoney-card.big {
    width: 208px;
    border-radius: 8px;
    margin-top: 2rem;
}

.emoney-card.small {
    width: 50px;
    border-radius: 4px;
    margin-right: 1rem;
}

.emoney-card img {
    width: 100%;
}

.emoney-card .card-ing {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

.emoney-card .card-ing em {
    position: absolute;
    color: #222;
    padding: 1.5rem;
    background: rgba(211, 211, 211, 1);
    font-size: 1.4rem;
    font-weight: 600;
    top: 45%;
    width: 100%;
    display: block;
    text-align: center;
    left: 0%;
}

/* 카드 세로 목록 */
.card-list-info {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.card-list-info .card-txt-info h3 {
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.card-number {
    margin-bottom: 1rem;
}

.card-thum {
    padding: 2rem;
}

.card-thum .txt {
    text-align: center;
    font-size: 1.4rem;
    color: #4f565a;
    margin-top: 2rem;
}


.card-txt-info .status { /* 수정 */
    border: 1px solid #d72b4c;
    color: #d72b4c;
    padding: 0.3rem 0.8rem;
    border-radius: 14px;
    margin-top: 0.5rem;
    display: inline-block;
}

.card-txt-info .card-number { /* 수정 */
    color: #4f565a;
    margin-bottom: 0.5rem;
}

.card-txt-info .valid {
    color: #999;
}

/* 내 지갑 결제 하단 bottom */
.fix-btn-box .payment-btn {
    background: #eaebf2;
    border: 1px solid #eaebf2;
    color: #222 !important;
}

.fix-btn-box.col2 button:last-child {
    margin: 0 0 0 5px !important;
}


/* 카드 소개 */
.card-info-top {
    padding: 2rem;
}

.card-info-top .card-tit {
    text-align: center;
    font-size: 1.6rem;
    margin: 1rem 0 1.5rem;
}

.card-expense {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    background: #ebeff3;
    margin-top: 2rem;
}

.card-expense p {
    display: table;
    table-layout: fixed;
    font-size: 1.4rem;
    font-weight: 500;
}

.card-expense p .tit {
    display: table-cell;
    width: 70px;
}

.card-expense p .txt {
    display: table-cell;
    font-weight: 600;
    position: relative;
    padding-left: 2rem;
}

.card-expense p .txt:before {
    position: absolute;
    left: 0;
    top: 2px;
    content: '';
    width: 2px;
    height: 14px;
    background: #d5d7e3;
    display: block;
}

.small-guide {
    margin-top: 0.5rem;
    font-size: 1.2rem;
    color: rgba(0, 0, 0, 0.5);
}

/* 카드 유의사항 소개 */
.card-benefit-info h4 {
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.08rem;
}

.card-benefit-info p {
    font-size: 1.4rem;
    color: #666;
    margin-top: 0.7rem;
}

.card-benefit-info h5 {
    font-weight: 500;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    letter-spacing: -0.08rem;
}


/* 삼성카드 발급바로가기 */
.event-go-box {
    border-radius: 8px;
    position: relative;
    font-size: 1.4rem;
    font-weight: 500;
    margin-top: 2rem;
    margin-bottom: 1rem;
    -webkit-box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, .04);
    background: #0068ff;
    color: #fff;
}

.event-go-box a {
    display: block;
    cursor: pointer;
    padding: 2rem 1.5rem;
}

.event-go-box i {
    position: absolute;
    top: 50%;
    right: 2rem;
    margin-top: -7px;
    color: #fff;
}

/* card-menu-layer */
.sort-wrap {
    padding: 0 2rem;
    display: flex;;
}

.sort-wrap.right {
    position: relative;
    justify-content: flex-end;
}

.menu-wrap {
    position: relative;
    display: inline-block;
}

.menu-wrap .menu-btn {
    border-radius: 100%;
    height: 40px;
    width: 40px;
    font-size: 1.6rem;
    line-height: 40px;
    color: #aeb0bb;
    background: #ebeff3;
    display: block;
    text-align: center;
}

.menu-wrap .menu-layer {
    position: absolute;
    top: 48px;
    left: -50px;
    z-index: 10;
    animation: fadein 0.5s;
    -moz-animation: fadein 0.5s; /* Firefox */
    -webkit-animation: fadein 0.5s; /* Safari and Chrome */
    -o-animation: fadein 0.5s; /* Opera */
}

.menu-layer .menu-list {
    box-sizing: border-box;
    background: #fff;
    border-radius: 10px;
    padding: 0.5rem;
    width: 100px;
    -webkit-box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, .04);
    box-shadow: 0 0 0 1px #e3e5e8, 0 1px 2px 0 rgba(0, 0, 0, .04);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.menu-layer .menu-list li {
    text-align: center;
}

.menu-layer .menu-list li + li {
    border-top: 1px solid #e8e8e8;
}

.menu-layer .menu-list a {
    font-size: 1.4rem;
    line-height: 2;
    font-weight: 500;
    color: #222;
    text-align: center;
    letter-spacing: -0.05rem;
    display: block;
    padding: 0.5rem 0;
    transition: 0.3s;
}

.menu-layer .menu-list li:first-child a {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.menu-layer .menu-list li:last-child a {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.menu-layer .menu-list a:active {
    background: #f3f3f3;
}


/*로딩중*/
.loading-bg {
    background: rgba(0, 0, 0, 0.6);
    z-index: 100;
    height: 100vh;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.loading-bg .loading {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loading-bg .loading p {
    text-align: center;
    color: #fff;
    font-size: 1.4rem;
    letter-spacing: 0;
    font-weight: 400;
}

@keyframes ldio-h1y4npo8jzu {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

.ldio-h1y4npo8jzu div {
    left: 71.25px;
    top: 45.75px;
    position: absolute;
    animation: ldio-h1y4npo8jzu linear 1s infinite;
    background: #fff;
    width: 7.5px;
    height: 13.5px;
    border-radius: 3.75px / 6.75px;
    transform-origin: 3.75px 29.25px;
}

.ldio-h1y4npo8jzu div:nth-child(1) {
    transform: rotate(0deg);
    animation-delay: -0.9166666666666666s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(2) {
    transform: rotate(30deg);
    animation-delay: -0.8333333333333334s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(3) {
    transform: rotate(60deg);
    animation-delay: -0.75s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(4) {
    transform: rotate(90deg);
    animation-delay: -0.6666666666666666s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(5) {
    transform: rotate(120deg);
    animation-delay: -0.5833333333333334s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(6) {
    transform: rotate(150deg);
    animation-delay: -0.5s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(7) {
    transform: rotate(180deg);
    animation-delay: -0.4166666666666667s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(8) {
    transform: rotate(210deg);
    animation-delay: -0.3333333333333333s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(9) {
    transform: rotate(240deg);
    animation-delay: -0.25s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(10) {
    transform: rotate(270deg);
    animation-delay: -0.16666666666666666s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(11) {
    transform: rotate(300deg);
    animation-delay: -0.08333333333333333s;
    background: #fff;
}

.ldio-h1y4npo8jzu div:nth-child(12) {
    transform: rotate(330deg);
    animation-delay: 0s;
    background: #fff;
}

.loadingio-spinner-spinner-x2r368si0m {
    width: 150px;
    height: 100px;
    display: inline-block;
    overflow: hidden;
}

.ldio-h1y4npo8jzu {
    width: 100%;
    height: 100%;
    margin-top: -30px;
    position: relative;
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    transform-origin: 0 0; /* see note above */
}

.ldio-h1y4npo8jzu div {
    box-sizing: content-box;
}

/* generated by https://loading.io/ */


/* media */
@media screen and (max-width: 1024px) {
    /*iPad Pro , web*/
    .container {
        max-width: 1024px;
    }
}

@media screen and (max-width: 768px) {
    /*iPad*/
    .container {
        max-width: 768px;
    }

}

@media screen and (max-width: 717px) {
    .container {
        max-width: 717px;
    }
}

@media screen and (max-width: 414px) {
    /*iPhone 6/7/8 plus*/

}

@media screen and (max-width: 375px) {
    /*iPhone 6/7/8*/

}

@media screen and (min-height: 812px) {
    /*Pixel 2 XL , iPhone X*/

}

@media all and (max-width: 360px) {
    /*galaxy S5*/
    .mobile-br {
        display: none;
    }
}

@media screen and (max-width: 320px) {
    /*iPhone 5/SE*/
    /* 내역조회 20230616 *모달 틀어짐 수정 */
    .term_search li {
        font-size: 11px;
    }

    .term_search li button {
        font-size: 1.1rem;
    }

    /* 메인 */
    .quick-menu-list li a div {
        width: 60px;
        height: 60px;
    }

    .quick-menu-list li a h4 {
        font-size: 1.2rem;
    }

    /* 내 지갑 */
    .account-list-btn {
        right: 20px;
        top: 15px;
    }

    .mypayWrap {
        padding: 15px;
    }

    .point-card .small-recipt th {
        width: 120px;
        letter-spacing: -0.08rem;
    }

    /* 가맹점 */
    .shopMenu li a div {
        width: 60px;
        height: 60px;
    }
}

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

    /*로그인 화면*/
    .login_logo {
        padding: 6rem 2rem 2rem;
    }

    .menu-icon-list li a h4 {
        font-size: 12px;
        letter-spacing: -0.05rem;
    }

    /*메뉴*/
    .menu-con-box {
        padding: 1rem 1.5rem;
    }

    /*공통*/
    .con-box {
        padding: 1.5rem;
    }

    .con-box-top {
        padding: 1.5rem 1.5rem 0;
    }

    .basicInput {
        padding: 1rem 1.5rem;
    }

    /* 메인 */
    .quick-menu-list li a h4 {
        font-size: 1.1rem;
    }

    .wrap-items .ico-tit {
        font-size: 1.5rem;
        letter-spacing: -0.08rem;
    }

    /*내 지갑*/
    .recent-list {
        padding: 1.5rem;
    }

    /*내 정보수정*/
    .bgTit {
        padding-left: 1.5rem;
    }

    .mypage-info th {
        padding-left: 1.5rem;
    }

    .mypage-info td {
        padding-right: 1.5rem;
    }

    /* 가맹점 */
    .shopMenu li a div {
        width: 55px;
        height: 55px;
    }

}


/* 회원탈퇴 */
.withdrawal-info {
    padding: 30px 20px 0;
    text-align: left;
}

.withdrawal-info .tit {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: -0.05rem;
}

.withdrawal-info .txt {
    font-size: 1.4rem;
    color: #666;
    margin-top: 10px;
}

.withdrawal-banner {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

.withdrawal-banner img {
    width: 100%;
}

.gray-guide-box {
    background: #ebeff3;
    border-radius: 4px;
    padding: 10px 15px;
}

.point-tit {
    font-size: 1.4rem;
    margin-top: 5px;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
    font-weight: 500;
    color: #222;
}

.point-tit::before {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    left: 0;
    background: url(../images/point-ico.png);
    background-size: 14px;
    width: 14px;
    height: 14px;
    content: '';
    display: block;
}

.bottom-btn .point-tit {
    color: #666;
    font-weight: 400;
    font-size: 1.2rem;
    text-align: left;
}

.guidF-list li {
    position: relative;
    padding-left: 15px;
    line-height: 1.3;
    word-break: keep-all;
    color: #666;
    margin-bottom: 0 !important;
}

.guidF-list li + li {
    margin-top: 5px;
}

.guidF-list li:before {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    background: #aab9bb;
    top: 6px;
    left: 5px;
    box-sizing: none;
}

.guidF-list li span {
    vertical-align: unset !important;
    margin-left: 0;
    font-weight: 500;
}


/* text menu */
.sub-menu li {
    font-size: 1.4rem;
    border-top: 1px solid #eee;
    position: relative;
    background: #fff;
}

.sub-menu li:last-child {
    border-bottom: 1px solid #eee;
}

.sub-menu li a {
    display: block;
    color: #666;
    padding: 15px 20px;
    transition: 0.3s;
}

.sub-menu li a:active {
    background: #fafafa;
}

.sub-menu li a i {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -7px;
    color: #aaa;
}

/* bottom-wrap 다운로드 버튼*/
.bottom-wrap {
    position: fixed;
    clear: both;
    left: 0;
    bottom: 0;
    text-align: center;
    padding: 0;
    width: 100%;
    background: #fff;
    max-height: 165px;
    overflow-y: scroll;
}

.bottom-wrap .file-wrap {
    width: 100%;
}

.bottom-wrap .file-wrap li {
    width: 100%;
    position: relative;
    border-top: 1px solid #e8e8e8;
}

.bottom-wrap .file-wrap li a {
    display: block;
    cursor: pointer;
    transition: 0.3s;
    background: #f3f3f3;
}

.bottom-wrap .file-wrap li .file-txt {
    font-size: 1.4rem;
    color: #666;
    font-weight: 500;
    text-align: center;
    padding: 10px 15px;
}

.bottom-wrap .file-wrap li .file-txt .file-tit {
    font-size: 1.2rem;
    display: block;
    text-align: left;
    margin-bottom: 3px;
    width: calc(100% - 50px);
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.bottom-wrap .file-wrap li .file-txt .capacity {
    display: block;
    font-size: 1.1rem;
    color: #999;
    text-align: left;
}

.bottom-wrap .file-wrap li .file-txt .ico {
    font-size: 1.6rem;
    line-height: 20px;
    color: #aaa;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -10px;
}


.box-board-list li {
    width: 100%;
    position: relative;
    background: #fff;
    border-radius: 10px;
    -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
    border: 1px solid #ddd;
    overflow: hidden;
}

.box-board-list li + li {
    margin-top: 10px;
}

.box-board-list li.new .txt .tit,
.box-board-list li.new .txt .date {
    color: #003f93;
    font-weight: 600;
}

.box-board-list a {
    cursor: pointer;
    display: block;
}

.box-board-list .txt {
    font-size: 1.4rem;
    color: #222;
    font-weight: 400;
    line-height: 1.3 !important;
    border-bottom: 1px solid #eee;
    padding: 20px;
}

.box-board-list .txt .tit {
    font-size: 1.4rem;
    display: block;
    color: #222;
    width: calc(100% - 50px);
    display: -webkit-box;
    overflow: hidden;
    vertical-align: middle;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.box-board-list span.ico {
    top: 50%;
    right: 20px;
    margin-top: -8px;
    position: absolute;
    vertical-align: top;
    font-size: 1.2rem;
    font-weight: bold;
    color: #aaa;
    line-height: 16px;
}

/* 계좌 목록 */
.box-board-list li.account {
    padding: 15px 20px;
}

.box-board-list li.account .account-mark {
    margin-bottom: 15px;
}

.box-board-list li.account .account-mark .status {
    font-size: 10px;
    border-radius: 6px;
    background: rgba(0, 63, 147, 0.1);
    color: #003f93;
    padding: 3px 5px;
    margin-right: 5px;
    letter-spacing: -0.05rem;
    font-weight: 500;
}

.box-board-list li.account .account-mark .status.on {
    font-size: 10px;
    border-radius: 6px;
    background: #003f93;
    color: #fff;
    padding: 3px 5px;
    margin-right: 5px;
    letter-spacing: -0.05rem;
    font-weight: 500;
}

.box-board-list li.account span {
    display: inline-block;
    font-size: 12px;
    color: #888;
    padding-right: 5px;
}

.box-board-list li.account .accountEdit {
    position: absolute;
    top: 12px;
    right: 12px;
}

.box-board-list li.account .accountEdit button {
    border-radius: 5px;
    font-size: 12px;
    padding: 5px 6px;
    font-weight: 300;
    width: 40px;
}

.box-board-list li.account .accountEdit .left {
    color: #333;
    border: 1px solid #bbb;
    background: #fff;
}

.box-board-list li.account .accountEdit .right {
    color: #fff;
    background: #6c757d;
    border: 1px solid #6c757d;
}


/*2024-01-18 버그 수정*/


.text-menu2 {
    width: 100%;
    padding: 1rem 0
}

.text-menu2 + .text-menu2 {
    border-top: 1px solid #eee
}

.text-menu2 + .menu-tit {
    margin-top: 20px
}

.text-menu2:last-child {
    border-bottom: 0
}

.text-menu2 li {
    position: relative;
    font-size: 1.6rem;
    margin-bottom: 5px
}

.text-menu2 li a {
    display: block;
    line-height: 5rem;
    letter-spacing: -.08rem;
    font-weight: 600
}

.text-menu2 li a .right-group {
    color: #4f565a;
    float: right;
    padding-right: 2rem;
    font-size: 1.4rem
}

.text-menu2 li i {
    position: absolute;
    top: 50%;
    margin-top: -.8rem;
    right: 0;
    color: #9ca3ad;
    text-align: right
}


/* faq 카테고리 */
.faq-category-list {
    width: 100%;
    border-right: 1px solid #e8e8e8;
    border-bottom: 1px solid #e8e8e8;
    background-color: #fff;
}

.faq-category-list:after {
    content: '';
    display: block;
    clear: both;
}

.faq-category-list li {
    float: left;
    width: 33.3%;
    text-align: center;
    border-left: 1px solid #e8e8e8;
    border-top: 1px solid #e8e8e8;
    font-size: 1.4rem;
    color: #888;
    height: 46px;
}

.faq-category-list li a {
    line-height: 46px;
    display: block;
}

.faq-category-list li a.on {
    font-weight: 600;
    color: #003f93 !important;
    text-decoration: underline !important;
}

#postcodeContainer {
    display: none;
    position: relative;
    width: 100%;
    height: 550px;
}


/* 계좌관리 */
.bank-account-list {
    width: 100%;
    background: #fff;
    color: #444 !important;
}

.bank-account-list li {
    padding: 1.5rem;
    background: #f3f5f7;
    border-radius: 16px;
    margin-top: 1rem;
    position: relative;
}

.bank-account-list .bank-tit {
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.2;
    vertical-align: middle;
    color: #222;
}

.bank-account-list .corp-wrap {
    width: 100%;
    display: flex;
    margin-top: 1rem;
}

.bank-account-list .corp-wrap .corp-item-icon {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    overflow: hidden;
    text-align: center;
    box-sizing: content-box;
}

.bank-account-list .corp-wrap .corp-item-icon img {
    width: 30px;
}

.bank-account-list .corp-wrap .corp-info {
    width: calc(100% - 4rem);
    vertical-align: middle;
    font-size: 1.4rem;
    padding-left: 1rem;
    padding-top: .5rem;
    font-weight: 500;
    color: #222;
}

.bank-account-list .corp-wrap .corp-info .tit {
    padding-right: 5px;
    font-weight: 600;
}

.bank-account-list .corp-wrap .corp-info .name {
    padding-left: 5px;
    font-weight: 500;
}

.bank-account-list .corp-wrap .corp-info i {
    color: rgba(0, 0, 0, 0.5);
    font-size: 1.2rem;
    padding-left: 5px;
}

.bank-account-list .mark {
    font-size: 1rem;
    border-radius: 4px;
    background: #222;
    color: #fff;
    padding: 3px 5px;
    margin-right: 5px;
    letter-spacing: -.05rem;
    font-weight: 500;
}

.modal-content .bank-account-list li {
    padding-left: 5rem;
}


/* only-chekbx */
.only-radio {
    position: absolute;
    left: 1.5rem;
    top: 35%;
    margin-top: -11px;
}

.only-radio input[type=radio] {
    display: none;
}

.only-radio input[type=radio] + label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    font-weight: 400;
    font-size: 1.4rem;
    color: #222;
}

.only-radio input[type=radio] + label::before {
    content: '';
    width: 22px;
    height: 22px;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 100%;
}

.only-radio input[type=radio]:checked + label::before {
    border: 7px solid #222;
}

.only-radio > input[type=radio]:disabled + label:before,
.only-radio > input[type=radio]:disabled + label::before {
    border: 7px solid #ddd;
}

.input-set .eye-btn {
    position: absolute;
    top: 50%;
    right: 1rem;
    height: 4.4rem;
    margin-top: -2.2rem;
    background: transparent;
    display: block;
    padding: 0;
}

.input-set .eye-btn i {
    color: #bbc2c8;
    font-size: 1.4rem;
    line-height: 4.5rem;
    width: 30px;
    display: block;
    cursor: pointer;
}

.inlineDisplayNone {
    display: none;
}

.search-input-box .sort-btn {
    padding-top: 1rem;
}

.search-input-box .sort-btn button {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 1rem 1.5rem;
    color: #666;
}

.search-input-box .sort-btn button i {
    padding-left: 5px;
    color: #666;
}