/* to embed a font : https://fonts.google.com/ */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;0,900;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.cdnfonts.com/css/campton');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

/* root ----------------------- */
:root {
    /* color */
    --black: #000000;
    --white: #ffffff;

    --red900: #980020;
    --red800: #C8102E; /* main color */
    --red700: #DA163A;
    --red600: #E72343;
    --red500: #E93E55; /* sub color */
    --red400: #FF808B;
    --red300: #FF9EA7;
    --red200: #FECBD4;
    --red50: #FBECEE;

    --brown: #AB6C22; /* point color */
    --light-brown: #F5EDE4;

    --gray900: #121212;
    --gray800: #1C1C1C;
    --gray700: #2B2B2B;
    --gray600: #424243;
    --gray500: #747479;
    --gray400: #BDBEC0;
    --gray300: #D7D8DA;
    --gray200: #E3E5E9;
    --gray100: #F2F3F6;

    --pink: #D54C79;
    --yellow: #F6B22A;
    --green: #00704A;

    --system-red: #FF3529;
    --system-blue: #236CD9;
}

@media screen and (max-width: 767px) {
    #cont-wrap {width: 100%; display: block; overflow: hidden;}

    /* 포인트 */
    .saved-list {border-top: .125rem solid var(--red800); border-bottom: .125rem solid var(--red800);}
    .saved-list > li {display: flex; align-items: center; justify-content: space-between; padding: 2.5rem 0;}
    .saved-list > li + li {border-top: .125rem solid var(--gray200);}
    .saved-list > li .desc .state {display: block; font-weight: 700; color: var(--gray500); margin-bottom: .75rem; font-size: 1.4rem;}
    .saved-list > li .desc > h6 {font-size: 2rem; font-weight: 500;}
    .saved-list > li .desc ul.date {margin-top: 1.25rem;}
    .saved-list > li .point {text-align: right;}
    .saved-list > li .point > p {font-size: 2rem;}
    .saved-list > li .point > span {font-size: 1.5rem; display: block; margin-top: .75rem; color: var(--gray500);}
    .saved-list > li .point > span > span {color: initial; font-weight: 500;}

    /* 회원탈퇴 */
    .userOut-table1 th:nth-child(1) {width: 30%;}
    .userOut-table1 th:nth-child(2) {width: 70%;}

    .userOut-table1 input[type='password'] {width: 100%;}
    .userOut-table1 .out-check {display: grid; grid-template-columns: repeat(1, 1fr); row-gap: .75rem;}

    .userOut-input label {display: flex; align-items: center;}
    .userOut-input input[type='checkbox'] + label > span {line-height: 1.6; margin-left: 1.6rem; width: calc(100% - 1.6rem - 1.6rem);}

    /* 나의 상품문의 */
    .qna-table1 tr td.alignLeft ul.date {justify-content: start;}
    .qna-table1 tr td.alignLeft > span {width: 20rem;}
}

/* error --------------------------- */
#error {width: 100vw; height: 100vh; text-align: center; background-color: #fff; background-image: url(../img/error-bg.svg); background-repeat: no-repeat; background-position: right bottom; background-size: auto 43.8rem;}
#error .error-num {font-size: 10rem; font-weight: 900; color: var(--red50);}
#error h4 {font-size: 2.4rem; font-weight: 700; color: var(--red800); margin-top: 4rem;}
#error p {font-weight: 500; line-height: 1.6; margin-top: 2rem; font-size: 1.4rem;}
#error button {width: 30rem; height: 6rem; line-height: 5.8rem; font-size: 1.6rem; font-weight: 700; background-color: var(--red800); margin-top: 6rem;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    #error {background-image: none;}

}

/* popup --------------------------- */
#pop {width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 99999;}
.pop-cont {width: 76rem; background-color: #fff; border-radius: 1.2rem;}
.pop-cont.sm {width: 42rem;}
.pop-cont.lg {width: 86rem;}
.pop-cont .title {padding: 3.2rem; margin-bottom: 0; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1.2rem;}
.pop-cont .title > h4 {font-size: 2rem; font-weight: 700;}
.pop-cont .title > h6 {font-size: 1.8rem; font-weight: 700;}
.pop-cont .title > p {text-align: center; font-size: 1.6rem; font-weight: 500; line-height: 1.4;}
.pop-cont .title .ic-close-24 {position: absolute; right: 3.2rem; cursor: pointer;}
.pop-cont-wrap {max-height: 60vh; overflow-y: auto; font-size: 1.4rem; line-height: 1.6; padding: 0 3.2rem;}
.pop-cont-wrap .cont-box .title {padding: 1.6rem 0; align-items: initial;}
.pop-cont-wrap > p {font-size: 1.6rem; text-align: center; line-height: 1.6; word-break: keep-all;}
.pop-cont .cont-box + .cont-box {margin-top: 2.4rem;}
.pop-cont .table-desc {color: var(--gray500); font-weight: initial; line-height: 1.6; font-size: 1.2rem;}
.pop-cont select {width: 31.5rem;}
.pop-cont .pagination {margin-top: 2.4rem;}
.pop-cont .btn-wrap {padding: 3.2rem 0; display: flex; align-items: center; justify-content: center; column-gap: 1rem;}
.pop-cont > .btn-wrap {padding: 3.2rem;}
.pop-cont .btn-wrap > button {width: 22rem; height: 5rem; line-height: 5.8rem; font-size: 1.6rem;}
.pop-cont .btn-wrap > button:nth-child(1):nth-last-child(2), .pop-cont .btn-wrap > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - 1rem) / 2 );}

@media screen and (max-width: 1023px) {
    .pop-cont {width: 90%; border-radius: .8rem;}
    .pop-cont.sm {width: 90%;}
    .pop-cont.lg {width: 90%;}
    .pop-cont .title {position: relative; padding: 2.4rem 1.6rem;}
    .pop-cont .title > h4 {font-size: 1.6rem;}
    .pop-cont .title .ic-close-24 {right: 1.6rem;}
    .pop-cont .pop-cont-wrap {max-height: calc(70vh - 6rem); padding: 0 1.6rem;}
    .pop-cont .pop-cont-wrap > p {font-size: 1.4rem; text-align: center;}
    .pop-cont select {width: 100%;}
    .pop-cont .btn-wrap {padding: 1.6rem 0;}
    .pop-cont > .btn-wrap {padding: 1.6rem;}
    .pop-cont .btn-wrap > button {width: 100%; height: 4.8rem; font-size: 1.4rem;}
    .pop-cont .btn-wrap > button:nth-child(1):nth-last-child(2), .pop-cont .btn-wrap > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - 1rem) / 2 );}
}
@media screen and (max-width: 767px) {
}

.simple-pay {min-width: auto; width: 60rem;}
.simple-pay .password {width: 22rem; margin: 6rem auto; display: flex; align-items: center; justify-content: space-between;}
.simple-pay .password > li {width: 2rem; height: 2rem; display: block; background-color: var(--gray200); border-radius: 100%;}
.simple-pay .password > li + li {margin-left: 2rem;}
.simple-pay .password > li.on {background-color: var(--red800);}

.simple-pay .password-num {display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gray200); border-right: 1px solid var(--gray200);}
.simple-pay .password-num > li {position: relative; border-left: 1px solid var(--gray200); border-bottom: 1px solid var(--gray200); text-align: center; height: 8rem; line-height: 8rem; font-size: 2.2rem; font-weight: 700; cursor: pointer;}
.simple-pay .password-num > li > span {font-size: 1.6rem; color: var(--gray500); font-weight: 500;}

@media screen and (max-width: 1023px) {
    .simple-pay {min-width: auto; width: 90%;}
}
@media screen and (max-width: 767px) {
}

/* login --------------------------- */
#login {width: 100%; min-height: calc(100vh - 13rem); display: flex; align-items: center; justify-content: center;}
/* .login-wrap {width: 32rem; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center; justify-content: center;}
.login-wrap > img {width: 16rem;}
.login-wrap > ul {width: 100%; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 1rem;}
.login-wrap > ul > li {width: 100%;}
.login-wrap > ul > li > input {height: 4.8rem;}
.login-wrap > ul > li > button {width: 100%;}
.login-wrap > ul > li.check {margin-top: 1rem; display: flex; align-items: center; justify-content: space-between;}
.login-wrap > ul > li.check > ul {display: flex; align-items: center; column-gap: 1.1rem;}
.login-wrap > ul > li.check > ul > li {position: relative; font-size: 1.2rem; color: var(--gray500); cursor: pointer; display: flex; align-items: center;}
.login-wrap > ul > li.check > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200); position: absolute; left: -.6rem;} */

.login-wrap {width: 40rem; padding: 8.6rem 0; display: flex; flex-flow: column; align-items: center; justify-content: center;}
.login-wrap > img {height: 6rem; margin-bottom: 6rem;}

.login-wrap .tit {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center; margin-bottom: 2rem;}
.login-wrap .tit > h2 {font-size: 2.4rem; font-weight: 600;}
.login-wrap .tit > p {font-size: 1.6rem; font-weight: 500; color: var(--gray500);}

.login-wrap .way {display: flex; align-items: center; justify-content: center; column-gap: 2rem; margin-bottom: 3.2rem;}

.login-wrap .login-tab {width: 100%; display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 3.2rem;}
.login-wrap .login-tab > li {height: 6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.8rem; font-weight: 500; color: var(--gray500);  border: 1px solid var(--gray200);}
.login-wrap .login-tab > li:nth-child(1) {border-right: 0; border-radius: .4rem 0 0 .4rem;}
.login-wrap .login-tab > li:nth-child(2) {border-left: 0; border-radius: 0 .4rem .4rem 0;}
.login-wrap .login-tab > li.active {background-color: var(--red50); color: var(--red800); font-weight: 600; border-color: var(--red50);}

.login-wrap .login-tab ~ .login-cont {display: none;}
.login-wrap .login-cont {display: flex; flex-flow: column; row-gap: 2rem; width: 100%;}
.login-wrap .login-tab ~ .login-cont.active {display: flex; flex-flow: column; row-gap: 2rem; width: 100%; min-height: 29.2rem;}

.login-wrap .login-cont > i {margin: 0 auto;}
.login-wrap .login-cont .info {display: flex; flex-flow: column; row-gap: 1.2rem;}
.login-wrap .login-cont .info > li {display: flex; align-items: center; justify-content: space-between;}
.login-wrap .login-cont .info input {width: 100%; height: 4.8rem;}
.login-wrap .login-cont .info button {width: 100%; height: 6rem; font-size: 1.8rem; font-weight: 600; margin-top: 2rem;}
.login-wrap .login-cont .info > li > button:nth-child(1):nth-last-child(2),
.login-wrap .login-cont .info > li > button:nth-child(1):nth-last-child(2) ~ button {width: calc((100% - .8rem) / 2);}
.login-wrap .login-cont .info p {font-size: 1.4rem; font-weight: 500; color: var(--red800); line-height: 1.4; word-break: keep-all;}

.login-wrap .login-cont .link {display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
.login-wrap .login-cont .link > li {font-size: 1.4rem; font-weight: 500; color: var(--gray500); display: flex; align-items: center; column-gap: .8rem; cursor: pointer;}
.login-wrap .login-cont .link > li + li::before {content: ''; width: 1px; height: 1.2rem; background-color: var(--gray300);}

.id-list {margin-bottom: 4rem;}
.id-list > li {font-size: 1.4rem; font-weight: 600; line-height: 1.6;}

@media screen and (max-width: 1023px) {
    #login {min-height: calc(100vh - 6.8rem);}
}
@media screen and (max-width: 767px) {
    .login-wrap .tit > h2 {font-size: 2rem;}
    .login-wrap .tit > p {font-size: 1.4rem;}

    .login-wrap {width: 100%; padding: 6rem 2rem;}
    .login-wrap > img {height: 4.8rem; margin-bottom: 4rem;}

    .login-wrap .login-tab {margin-bottom: 2.4rem;}
    .login-wrap .login-tab > li {height: 4.4rem; font-size: 1.4rem;}

    .login-wrap .login-cont .info {display: flex; flex-flow: column; row-gap: .8rem;}
    .login-wrap .login-cont .info input {height: 4.4rem;}
    .login-wrap .login-cont .info button {height: 4.8rem; font-size: 1.6rem; margin-top: 1.2rem;}
    .login-wrap .login-cont .info p {font-size: 1.2rem;}
}

.find-wrap {width: 42rem; display: flex; flex-flow: column; row-gap: 3.2rem; align-items: center; justify-content: center;}
.find-wrap > div {display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; justify-content: center;}
.find-wrap > div > h6 {font-size: 2rem; font-weight: 700;}
.find-wrap > div > p {font-size: 1.4rem; line-height: 1.6;}
.find-wrap > ul {width: 100%; padding: 2rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: 2rem; background-color: var(--gray100);}
.find-wrap > ul > li {width: 100%; display: flex; flex-flow: column; row-gap: .8rem;}
.find-wrap > ul > li > h6 {font-size: 1.2rem;}
.find-wrap > ul > li > p {font-size: 1.4rem; min-height: 5.2rem; padding: 2rem; line-height: 1.6; text-align: center; word-break: keep-all; display: flex; align-items: center; justify-content: center; column-gap: .6rem; background-color: var(--white);}
.find-wrap > ul > li > input {height: 4.8rem;}
.find-wrap > ul > li > button {width: 100%;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .find-wrap {width: 100%; padding: 0 2rem;}
}

.certify-wrap {width: 40rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.certify-wrap > li > input + label {padding: 2rem; display: flex; align-items: center; justify-content: space-between; flex-flow: row-reverse; border: 1px solid var(--gray200); border-radius: .4rem;}
.certify-wrap > li > input + label > div {display: flex; align-items: center; column-gap: 1.2rem;}
.certify-wrap > li > input + label .icon {width: 5.2rem; height: 5.2rem; background-color: var(--gray400); border-radius: 100%; display: flex; align-items: center; justify-content: center;}
.certify-wrap > li > input + label .info {display: flex; flex-flow: column; row-gap: .8rem;}
.certify-wrap > li > input + label .info > p {font-size: 1.6rem; font-weight: 600;}
.certify-wrap > li > input + label .info > span {font-size: 1.4rem; font-weight: 500; color: var(--gray500);}
.certify-wrap > li > button {width: 100%; height: 6rem; font-size: 1.8rem; font-weight: 600; margin-top: 2rem;}

.certify-wrap > li > input:checked + label .icon {background-color: var(--red800);}

@media screen and (max-width: 767px) {
    .certify-wrap {width: 100%;}
    .certify-wrap > li > input + label {padding: 2rem;}
    .certify-wrap > li > input + label .icon {width: 4.4rem; height: 4.4rem;}
    .certify-wrap > li > input + label .icon > i {width: 2rem; height: 2rem;}
    .certify-wrap > li > input + label .info > p {font-size: 1.4rem;}
    .certify-wrap > li > input + label .info > span {font-size: 1.2rem;}
    .certify-wrap > li > button {height: 4.8rem; font-size: 1.6rem; margin-top: .8rem;}
}

/* header --------------------------- */
#header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;}
.sub-wrap {width: 100%; background-color: var(--red900);}
.sub-wrap .sub-con {max-width: 128rem; width: 100%; height: 3.6rem; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between;}
.sub-wrap .sub-con .site-tab {height: 100%; display: flex; align-items: center;}
.sub-wrap .sub-con .site-tab > li {width: 8rem; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--white); cursor: pointer;}
.sub-wrap .sub-con .site-tab > li.active {background-color: var(--red800);}
.sub-wrap .sub-con .user-tab {display: flex; align-items: center; column-gap: 2.1rem;}
.sub-wrap .sub-con .user-tab > li {display: flex; align-items: center; column-gap: .6rem; font-size: 1.2rem; color: var(--white); cursor: pointer; position: relative;}
.sub-wrap .sub-con .user-tab > li + li::before {content: ''; width: 1px; height: 1rem; background-color: rgba(255,255,255,0.5); position: absolute; left: -1.1rem;}
.sub-wrap .sub-con .user-tab > li .cart-count {display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; background-color: var(--red500); border-radius: 100%; font-size: 1rem; color: var(--white);}

.nav-wrap {width: 100%; background-color: var(--red800);}
.nav-wrap .nav-con {max-width: 128rem; width: 100%; height: 9.4rem; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; position: relative;}
.nav-wrap .nav-con > div {display: flex; align-items: center; column-gap: 4rem;}
.nav-wrap .nav-con > div img {width: 10rem;}
.nav-wrap .nav-con .gnb-wrap {display: flex; align-items: center; column-gap: 3.6rem;}
.nav-wrap .nav-con .gnb-wrap > li {font-size: 1.6rem; color: var(--white); font-weight: 500; cursor: pointer;}
.nav-wrap .nav-con .gnb-sns > li {display: flex; align-items: center; cursor: pointer;}
.nav-wrap .nav-con .gnb-ico {display: flex; align-items: center; column-gap: 2.8rem;}
.nav-wrap .nav-con .gnb-ico > li {font-size: 1.6rem; color: var(--white); font-weight: 500; cursor: pointer;}

@media screen and (max-width: 1023px) {
    #header .desktop-only {display: none;}
    #header .mobile-only {height: 6.8rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--red800); padding: 0 1.6rem; position: relative;}
    #header .mobile-only > i {cursor: pointer;}
    #header .mobile-only > i.ic-hamburger.active {background-image: url(../img/ico/ic-close@2x.png);}
    #header .mobile-only > img {height: 3.2rem; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
    #header .mobile-only > ul {display: flex; align-items: center; column-gap: .8rem;}
    #header .mobile-only > ul > li {position: relative;}
    #header .mobile-only > ul > li > span {position: absolute; top: -.2rem; right: -.2rem; display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; background-color: var(--red500); font-size: .8rem; color: var(--white); font-weight: 700; border-radius: 100%;}

    .mobile-menu {display: none; width: 100vw; height: calc(100vh - 6.8rem); background-color: var(--white); position: fixed; top: 6.8rem; left: 0;}
    .mobile-menu.active {display: block;}

    .mobile-menu .login-info {height: 10rem; padding: 0 2rem; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--red900); background-color: var(--red800);}
    .mobile-menu .login-info > ul {width: 100%; display: flex; align-items: center; justify-content: center;}
    .mobile-menu .login-info > ul > li {width: calc(100% / 2); display: flex; align-items: center; justify-content: center; height: 5.2rem; background-color: var(--red900); font-size: 1.6rem; font-weight: 500; color: var(--white);}
    .mobile-menu .login-info > ul > li:nth-child(1):nth-last-child(2) ~ li:nth-child(2) {background-color: var(--red700);}

    .mobile-menu .mobile-gnb {position: relative; width: 50vw; height: calc(100vh - 6.8rem - 10rem); background-color: var(--red800); border-top: 1px solid var(--red900); border-top: 1px solid var(--red900);}
    .mobile-menu .mobile-gnb > li {display: flex; align-items: center; justify-content: center; height: 4.2rem; border-bottom: 1px solid var(--red900); font-size: 1.4rem; color: var(--white);}
    .mobile-menu .mobile-gnb > li > ul {display: none; position: absolute; top: 0; right: -50vw; background-color: var(--white); width: 50vw; height: 100%;}
    .mobile-menu .mobile-gnb > li > ul > li {display: flex; align-items: center; justify-content: center; height: 4.2rem; color: var(--gray500); border-bottom: 1px solid var(--gray200); font-weight: initial;}
    .mobile-menu .mobile-gnb > li.active {font-weight: 500; background-color: var(--red900);}
    .mobile-menu .mobile-gnb > li.active > ul {display: block;}
    .mobile-menu .mobile-gnb > li > ul > li.active {font-weight: 500; color: var(--red900);}
    .mobile-menu .mobile-gnb .sns-wrap {width: 100%; padding: 2rem 2.5rem; height: auto; line-height: initial; border-bottom: none; display: flex; align-items: center; justify-content: center; column-gap: 1.6rem;}
    .mobile-menu .mobile-gnb .sns-wrap > i {width: 3.5rem; height: 3.5rem;}
}
@media screen and (max-width: 767px) {

}

/* footer --------------------------- */
#footer {width: 100%; background-color: var(--gray100);}
.footer-wrap {width: 100%; max-width: 128rem; margin: 0 auto;}
.footer-wrap .footer-con {max-width: 128rem; width: 100%; margin: 0 auto; padding: 6rem 4rem; position: relative; display: flex; align-items: flex-start; justify-content: space-between; column-gap: 3rem;}
.footer-wrap .footer-con > img {width: 10rem;}
.footer-wrap .footer-con .footer-desc {display: flex; flex-flow: column; row-gap: 2rem;}
.footer-wrap .footer-con .footer-desc > ul {display: flex; align-items: center;}
.footer-wrap .footer-con .footer-desc > ul > li {font-size: 1.2rem; display: flex; align-items: center; position: relative;}
.footer-wrap .footer-con .footer-desc .link {column-gap: 2.1rem;}
.footer-wrap .footer-con .footer-desc .link > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray500); position: absolute; left: -1rem;}
.footer-wrap .footer-con .footer-desc .desc {flex-wrap: wrap; column-gap: .6rem;}
.footer-wrap .footer-con .footer-desc .desc > li {color: var(--gray500); line-height: 2; display: flex; align-items: center; column-gap: .6rem;}
.footer-wrap .footer-con .footer-desc .desc > li:not(:last-child)::after {content: '/';}
.footer-wrap .footer-con .footer-desc .copyright {font-size: 1.2rem; color: var(--gray500);}
.footer-wrap .footer-con .footer-desc .sns-wrap {display: flex; align-items: center; column-gap: 1.2rem;}
.footer-wrap .footer-con .footer-desc .sns-wrap > li {margin-top: 1rem; cursor: pointer;}

@media screen and (max-width: 1023px) {
    .footer-wrap .footer-con {padding: 4rem 2rem; row-gap: 3rem; display: flex; flex-flow: column; align-items: center; justify-content: center;}
    .footer-wrap .footer-con .footer-desc > ul {justify-content: center;}
    .footer-wrap .footer-con .footer-desc > span {text-align: center;}
    .footer-wrap .footer-con .footer-desc .link {column-gap: 1.1rem;}
    .footer-wrap .footer-con .footer-desc .link > li + li::before {left: -.6rem;}
    .footer-wrap .footer-con .footer-desc .desc > li {text-align: center; word-break: keep-all;}
    .footer-wrap .footer-con .footer-desc .desc > li::after {content: none;}
    .footer-wrap .footer-con .footer-desc .copyright {text-align: center;}
    .footer-wrap .footer-con .footer-desc .sns-wrap {column-gap: 2rem;}
}
@media screen and (max-width: 767px) {

}

/* container --------------------------- */
#container {width: 100%; margin-top: 13rem;}
#contents {max-width: 128rem; width: 100%; margin: 0 auto; padding: 0 4rem 9rem;}

@media screen and (max-width: 1023px) {
    #container {margin-top: 6.8rem;}
    #contents {padding: 0 2rem 6rem;}
}
@media screen and (max-width: 767px) {
    #contents {padding: 0 2rem 4rem;}
}

/* main --------------------------- */
/* main banner */
.main-banner-swiper {width: 100%; max-height: 43rem; height: 34vw;}
.main-banner-swiper .img {width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; background-position: center; background-color: #fff;}
.main-banner-swiper .img img {height: 100%;}
.main-banner-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: 3rem;}
.main-banner-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 .6rem;}

.main-cont {margin-top: 9rem;}
.main-cont > h4 {margin-bottom: 3rem; text-align: center; font-size: 2.4rem; font-weight: 700; color: var(--black);}

@media screen and (max-width: 1980px) {
    .main-banner-swiper .img {background-size: cover;}
    }
@media screen and (max-width: 1023px) {
    .main-banner-swiper .desktop-only {display: block!important;}
    .main-banner-swiper .mobile-only {display: none;}

    .main-cont {margin-top: 6rem;}
    .main-cont > h4 {margin-bottom: 2rem;}
}
@media screen and (max-width: 767px) {
    .main-banner-swiper {height: 67vw; max-height: initial;}
    .main-banner-swiper .desktop-only {display: none!important;}
    .main-banner-swiper .mobile-only {display: block;}
    .main-banner-swiper .swiper-pagination-bullets.swiper-pagination-horizontal {bottom: .6rem;}
    .main-banner-swiper .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {width: .6rem; height: .6rem; margin: 0 .4rem;}

    .main-cont {margin-top: 4rem;}
}

.sub-banner.desktop-only {margin-top: 8rem; display: flex; align-items: center; column-gap: .8rem;}
.sub-banner.desktop-only > *:nth-child(1):nth-last-child(1) {width: 100%;}
.sub-banner.desktop-only > *:nth-child(1):nth-last-child(2), .sub-banner.desktop-only > *:nth-child(1):nth-last-child(2) ~ * {width: calc((100% - .8rem) / 2);}

.sub-banner.mobile-only {display: none;}

@media screen and (max-width: 767px) {
    .sub-banner.desktop-only {display: none;}

    .sub-banner.mobile-only {margin-top: 4rem; display: flex; align-items: center; flex-flow: column; row-gap: .8rem;}
    .sub-banner.mobile-only > * {width: 100%;}
}



/* item swiper */
.item-swiper-wrap {position: relative;}
.item-swiper-wrap .swiper-button-prev {position: absolute; left: -2.5rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.item-swiper-wrap .swiper-button-next {position: absolute; right: -2.5rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.item-swiper .swiper-slide {position: relative; display: flex; flex-flow: column; row-gap: 1.2rem;}
.item-swiper .swiper-slide .img {position: relative; width: 100%; max-height: 23rem; height: 18vw; border: 1px solid var(--gray200); background-color: var(--white); background-repeat: no-repeat; background-size: contain; background-position: center; cursor: pointer;}
.item-swiper .swiper-slide .img > i {position: absolute; right: 2rem; bottom: 2rem; cursor: pointer; z-index: 10;}
.item-swiper .swiper-slide .desc > h6 {font-size: 1.6rem; font-weight: 500; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.item-swiper .swiper-slide .desc .price {margin-top: 2rem; font-size: 2.2rem; font-weight: 700; display: flex; align-items: center;}
.item-swiper .swiper-slide .desc .price .sale {font-size: 1.8rem; font-weight: 500; margin-left: .6rem;}
.item-swiper .swiper-slide .desc .price .sale .won {font-size: 1.6rem;}
.item-swiper .swiper-slide .desc .label-wrap {margin-top: 1rem; display: flex; align-items: center; column-gap: .4rem;}

#contents .swiper-button-prev:after, 
#contents .swiper-button-next:after {content: none;}
#contents .swiper-button-next, 
#contents .swiper-button-prev {width: 5rem; height: 5rem; opacity: 1; background-repeat: no-repeat; background-size: contain; background-position: center;}
#contents .swiper-button-next {background-image: url(../img/ico/btn-won-next.png);}
#contents .swiper-button-prev {background-image: url(../img/ico/btn-won-before.png);}
#contents .swiper-button-next.swiper-button-disabled {background-image: url(../img/ico/btn-won-next-disabled.png); cursor: default;}
#contents .swiper-button-prev.swiper-button-disabled {background-image: url(../img/ico/btn-won-before-disabled.png); cursor: default;}

@media screen and (max-width: 1023px) {
    .item-swiper {padding-bottom: 3rem!important;}
    #contents .swiper-pagination {bottom: 0!important; top: auto!important;}
    #contents .swiper-pagination .swiper-pagination-bullet {background-color: var(--red50); opacity: 1; width: .6rem; height: .6rem;}
    #contents .swiper-pagination .swiper-pagination-bullet-active {background-color: var(--red800);}
}
@media screen and (max-width: 767px) {
    .item-swiper .swiper-slide .img {max-height: 16.25rem; height: 42vw;}
    .item-swiper .swiper-slide .img > i {width: 3.2rem; height: 3.2rem; right: 1.6rem; bottom: 1.6rem;}
    .item-swiper .swiper-slide .desc > h6 {font-size: 1.4rem;}
    .item-swiper .swiper-slide .desc .price {margin-top: 1rem; font-size: 1.8rem;}
    .item-swiper .swiper-slide .desc .price .sale {font-size: 1.4rem;}
}

/* main banner */
.main-banner {margin-top: 9rem;}
.main-banner > img {width: 100%; cursor: pointer;}

@media screen and (max-width: 1023px) {
    .main-banner {margin-top: 6rem;}
}
@media screen and (max-width: 767px) {
    .main-banner {margin-top: 4rem;}
}

/* item list */
.item-list {display: grid; align-items: flex-start; grid-gap: 6rem 2rem; width: 100%;}
.item-list img {width: 100%;}
.item-list > li {position: relative; cursor: pointer; display: flex; flex-flow: column; row-gap: 1.2rem; height: 100%;}
.item-list > li .img {position: relative; width: 100%; border: 1px solid var(--gray200); background-color: var(--white); background-repeat: no-repeat; background-position: center; background-size: 80%;}
.item-list > li .img > i {position: absolute; right: 2rem; bottom: 2rem; cursor: pointer;}
.item-list > li .desc {display: flex; flex-flow: column; row-gap: .4rem;}
.item-list > li .desc > h6 {font-size: 1.4rem; font-weight: 500; line-height: 1.4; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.item-list > li .desc .price {font-size: 1.8rem; font-weight: 600; display: flex; align-items: center; line-height: 1;}
.item-list > li .desc .price .sale {font-size: 1.4rem; font-weight: 500;}
.item-list > li .desc .price .sale .won {font-size: 1.4rem; font-weight: 500;}
.item-list > li .desc .label-wrap {display: flex; align-items: center; column-gap: .4rem;}

.item-list.col-4 {grid-template-columns: repeat(4, 1fr);}
.item-list.col-5 {grid-template-columns: repeat(5, 1fr);}

@media screen and (max-width: 1023px) {
    .item-list {grid-gap: 3.6rem 2rem;}
    .item-list.col-4 {grid-template-columns: repeat(2, 1fr);}

    .main-cont .item-list.col-4.row-2 > li:nth-of-type(n+7){display: none;}
}
@media screen and (max-width: 767px) {
    .item-list {grid-gap: 2.4rem 1.2rem;}
    .item-list > li {height: fit-content;}

    .item-list.col-4 {grid-template-columns: repeat(2, 1fr);}

    .main-cont .item-list.col-4.row-2 > li:nth-of-type(n+5){display: none;}
}

/* left menu --------------------------- */
#left-menu {width: 15rem; margin-top: 2.2rem; margin-right: 4rem; display: inline-block; vertical-align: top;}
#left-menu > li {cursor: pointer;}
#left-menu > li > span {display: block; padding: 1.8rem 0; border-bottom: 1px solid var(--gray200); font-size: 1.4rem; font-weight: 700;}
#left-menu > li > ul {margin-bottom: 4.2rem;}
#left-menu > li > ul > li {margin-top: 1.6rem; font-size: 1.2rem; font-weight: 500; color: var(--gray700); cursor: pointer;}
#left-menu > li > ul > li.active {font-weight: 700; color: var(--red800);}
#left-menu > li.active {color: var(--red800);}

#left-menu.folding > li > span {background-image: url(../img/ico/ic-menu-down@2x.png); background-repeat: no-repeat; background-size: 1.6rem; background-position: right;}
#left-menu.folding > li > ul {display: none;}
#left-menu.folding > li.active > ul {display: block;}
#left-menu.folding > li.active > span {background-image: url(../img/ico/ic-menu-up@2x.png);}

#cont-wrap {width: calc(100% - 19.4rem); display: inline-block; vertical-align: top;}
#contents > .desktop-only, #cont-wrap > .desktop-only, .tab-cont > .desktop-only {width: 100%;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    #left-menu {display: none;}
    #cont-wrap {width: 100%; display: block;}
}


/* product detail 제품 상세 --------------------------- */
.prod-wrap {display: flex; column-gap: 2rem;}
.prod-detail-table tr th, .prod-detail-table tr td {text-align: left; padding: 1rem; font-size: 1.2rem;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {    
    .prod-wrap {display: block;}
    .prod-wrap.event {display: flex; flex-flow: column-reverse;}
}

/* 제품 정보 */
.prod-detail {width: calc(100% - 48rem); padding-right: 4rem;}
.prod-detail > img {width: 100%;}

.prod-img {text-align: center; margin-bottom: 9rem;}
.prod-img > div {width: 100%; height: 68rem; background-repeat: no-repeat; background-size: contain; background-position: center;}
.prod-img > ul {display: flex; justify-content: center; margin-top: 1rem;}
.prod-img > ul > li {width: 9rem; height: 9rem; background-repeat: no-repeat; background-size: contain; background-position: center; border: 1px solid var(--gray200); cursor: pointer;}
.prod-img > ul > li + li {margin-left: 1rem;}
.prod-img > ul > li.active {border: .3rem solid var(--brown);}

@media screen and (max-width: 1023px) {
    .prod-detail {width: 50%; padding-right: 2rem;}

    .prod-img {margin-bottom: 5rem;}
    .prod-img > div {height: 40vw;}
}
@media screen and (max-width: 767px) {
    .prod-detail {width: 100%; padding-right: 0;}

    .prod-img > div {height: 42rem;}
    .prod-img > ul {display: flex; justify-content: center; margin-top: 1rem;}
    .prod-img > ul > li {width: 9rem; height: 9rem; background-repeat: no-repeat; background-size: contain; background-position: center; border: 1px solid var(--gray200); cursor: pointer;}
    .prod-img > ul > li + li {margin-left: 1rem;}
    .prod-img > ul > li.active {border: .3rem solid var(--brown);}
}

/* 제품 후기 */
.review {display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--gray200); padding: 3rem;}
.review .score {display: flex; align-items: center; justify-content: end; margin-left: auto; padding-right: 4rem;}
.review .ico-star {justify-content: center;}
.review .ico-star > i {width: 2.5rem; height: 2.5rem; margin: 0 .2rem;}
.review .text {display: flex; align-items: center; justify-content: center; margin-left: 1.2rem;}
.review .text > li {font-size: 2.2rem; color: var(--gray200); font-weight: 700;}
.review .text > li:nth-child(1) {font-size: 2.6rem; color: #222; font-weight: 900;}
.review .text > li:nth-child(2)::before {content: '/'; margin: 0 .6rem;}
.review .desc {position: relative; padding-left: 4rem;}
.review .desc::before {content:''; width: 1px; height: 80%; background-color: var(--gray200); position: absolute; top: 50%; left: -.05rem; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.review .desc > h6 {font-weight: 700;}
.review .desc > p {font-size: 1.4rem; color: var(--gray500); font-weight: 500; line-height: 1.8;}

.review-swiper {position: relative; margin-top: 2rem;}
.review-swiper .reviewSwiper {width: calc(100% - 3.2rem); margin: 0 auto;}
.review-swiper .reviewSwiper .swiper-slide {width: 12rem; height: 12rem;}
.review-swiper .reviewSwiper .img {width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat;}
.review-swiper .swiper-btn .swiper-button-prev {left: 0; width: 3.2rem!important; height: 3.2rem!important; margin-top: 0; top: 4.4rem;}
.review-swiper .swiper-btn .swiper-button-next {right: 0; width: 3.2rem!important; height: 3.2rem!important; margin-top: 0; top: 4.4rem;}

.review-notice {border-top: .2rem solid var(--red800); margin-top: 2rem;}
.review-notice > li {padding: 2rem 0; cursor: pointer; display: flex; align-items: center; justify-content: space-between; column-gap: 4rem; border-bottom: 1px solid var(--red800);}
.review-notice > li .img {width: 9rem; height: 9rem; background-repeat: no-repeat; background-size: cover; background-position: center;}
.review-notice > li .desc {flex: 1; display: flex; flex-flow: column; row-gap: 1rem;}
.review-notice > li .desc > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6; flex: 1; word-break: break-word;}
/* .review-notice > li .desc .text {display: flex; align-items: flex-end; justify-content: space-between; column-gap: 2rem;}
.review-notice > li .desc .text > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6; flex: 1; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.review-notice > li .desc .text.active > p {display: initial;} */
.review-notice > li .desc .text > a {font-size: 1.4rem; font-weight: 500; line-height: 1.6; text-decoration: underline; color: var(--red800);}


.faq-table1 tr {cursor: pointer;}
.faq-table1 tr td:not(.faq-answer) > div {width: 30rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.faq-table1 tr td i.ic-lockkey {display: inline-block; vertical-align: middle; margin-top: -.4rem;}
.faq-table1 tr .faq-answer {background-color: #f4f4f4;}
.faq-table1 tr .faq-answer > div {width: 100%; text-align: left; padding: 0 3rem; font-weight: 500; line-height: 1.6;}
.faq-table1 tr .faq-answer > div > p:nth-child(2) {display: flex; margin-top: 2rem;}
.faq-table1 tr .faq-answer > div > p:nth-child(2) > span:nth-child(1) {width: fit-content; margin-right: 1rem; font-weight: 700; color: var(--red800);}

.faq-password > span {display: flex; margin-top: .6rem; align-items: center;}
.faq-password input[type='password'] {width: 24rem;}
.faq-password input[type='password'] + button {margin-left: .6rem; display: inline-block;}

@media screen and (max-width: 1023px) {
    .review {grid-template-columns: repeat(1, 1fr); padding: 2.5rem;}
    .review .score {justify-content: center; padding-right: 0; margin: 0 auto;}
    .review .desc {padding-left: 0; margin-top: 2rem; text-align: center;}
    .review .desc::before {content: none;}

    .review-swiper {margin-top: 2rem;}
    .review-swiper .reviewSwiper {width: calc(100% - 6.4rem); padding-left: 1.2rem;}
    .review-swiper .reviewSwiper .img {width: 100%; height: 14rem;}
    .review-swiper .swiper-btn .swiper-button-prev,
    .review-swiper .swiper-btn .swiper-button-next {height: 14rem;}

    .review-notice > li {padding: 2rem 0;}
    .review-notice > li > p {width: calc(100% - 2rem);}

    .faq-table1 tr td:not(.faq-answer) > div {width: 15rem;}
}
@media screen and (max-width: 767px) {
}

/* 제품 옵션 */
.prod-payment {width: 48rem; margin-bottom: -9rem; box-shadow: -30px 0px 40px 0 rgba(15, 16, 16, 0.05); padding: 6.4rem 0 9rem 4rem; background-color: #fff; z-index: 999;}
.prod-payment-con {position: sticky; top: 13rem; height: fit-content;}

.prod-info {padding: 2rem 0;}
.prod-info > h4 {font-size: 2.2rem; font-weight: 700; line-height: 1.4;}
.prod-info .label-wrap {margin-top: 1rem;}
.prod-info .label-wrap .label {width: fit-content; height: 1.8rem; padding: 0 .4rem; border-radius: .2rem; font-size: 1rem; font-weight: 500; min-width: fit-content; display: inline-flex; align-items: center; justify-content: center;}
.prod-info > ul {margin-top: 1.8rem;}
.prod-info > ul > li {display: flex; align-items: center; column-gap: 2rem;}
.prod-info > ul > li > p {font-size: 1.4rem; font-weight: 600; color: var(--gray500);}
.prod-info > ul > li > span {font-size: 1.6rem; font-weight: 500;}

.prod-info-wrap .terms {margin-top: 3rem; margin-bottom: 6.4rem;}
.prod-info-wrap .terms > p {font-size: 2rem; font-weight: 600; }
.prod-info-wrap .terms > div {max-height: 25rem; margin-top: 1.6rem; padding: 2rem; font-size: 1.4rem; line-height: 1.6; border: 1px solid var(--gray200); overflow-y: auto; border-radius: .4rem;}
.prod-info-wrap .terms > ul {margin-top: 1.2rem; display: flex; flex-flow: column; row-gap: 1.2rem;}
.prod-info-wrap .terms > ul > li {display: flex; align-items: center; justify-content: space-between;}
.prod-info-wrap .terms > ul > li > input + label > p {font-size: 1.6rem; font-weight: 500;}
.prod-info-wrap .terms > ul > li > a {font-size: 1.4rem; font-weight: 600; color: var(--gray500); text-decoration: underline;}

.prod-info .prod-desc {margin-top: 3rem;}
.prod-info + .prod-desc > li + li {margin-top: 1rem!important;}

.prod-payment-con .prod-desc {border-bottom: 1px solid var(--gray200); padding-bottom: 2rem; margin-bottom: 2rem;}
.prod-payment-con .prod-desc > li {display: flex; align-items: center; font-size: 1.6rem; font-weight: 500}
.prod-payment-con .prod-desc > li + li {margin-top: 1rem;}
.prod-payment-con .prod-desc > li > span:nth-child(1) {width: 12rem; font-size: 1.4rem; font-weight: 500; color: var(--gray500);}
.prod-payment-con .prod-desc > li > span:nth-child(1) > div {margin-top: .8rem; font-size: 1.2rem; font-weight: initial;}
.prod-payment-con .prod-desc > li > *:nth-child(2) {width: calc(100% - 12rem);}
.prod-payment-con .prod-desc > li > button {width: 100%; text-align: left; padding: 0 1.2rem; background-image: url(../img/ico/btn-arrow-next-wh@2x.png); background-repeat: no-repeat; background-position: right 1.2rem center; background-size: .8rem auto;}

.prod-payment-con .prod-desc > li .sale {font-size: 1.8rem; font-weight: 500;}
.prod-payment-con .prod-desc > li .sale .won {font-size: 1.6rem;}
.prod-payment-con .prod-desc > li .price {font-size: 2.6rem!important;}
.prod-payment-con .prod-desc > li .price .red {margin-right: 1rem;}
.prod-payment-con .prod-desc > li .price .won {font-size: 2.2rem;}
.prod-payment-con .prod-desc > li .delivery {color: #a4a4a4;}
.prod-payment-con .prod-desc > li.delivery-guide {margin-top: .75rem!important;}
.prod-payment-con .prod-desc > li.delivery-guide > span {color: #fa3232; font-size: 1.2rem; font-weight: initial;}

.prod-payment-con .prod-desc > li .ic-help {display: inline-block; vertical-align: middle; margin-top: -.3rem; margin-left: .6rem; cursor: pointer;}

.prod-payment-con .prod-desc > li.marking-result > span:nth-child(2) {display: inline-block; text-align: right; font-size: 1.4rem;}
.prod-payment-con .prod-desc > li.marking-result > span:nth-child(2) > button {width: fit-content; height: 2.8rem; line-height: 2.6rem; padding: 0 .75rem; margin-left: 1rem;}

.prod-payment-con .prod-desc > li .marking-option > li {display: inline-block; width: 7rem; height: 3.6rem; line-height: 3.5rem; border: 1px solid var(--gray200); text-align: center; font-size: 1.2rem; color: var(--gray500); cursor: pointer;}
.prod-payment-con .prod-desc > li .marking-option > li + li {margin-left: .8rem;}
.prod-payment-con .prod-desc > li .marking-option > li.active {background-color: var(--brown); border-color: var(--brown); color: #fff; font-weight: 700;}

.prod-payment-con .prod-desc > li.custom-marking {display: block; padding: 1rem 0;}
.prod-payment-con .prod-desc > li.custom-marking .tab {display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; border: 1px solid var(--gray200); border-bottom: 0;}
.prod-payment-con .prod-desc > li.custom-marking .tab > li {height: 4rem; line-height: 3.9rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500); background-color: #f4f4f4; border-bottom: 1px solid var(--gray200); cursor: pointer;}
.prod-payment-con .prod-desc > li.custom-marking .tab > li.active {font-weight: 700; color: var(--brown); background-color: #fff; border-bottom-color: #fff;}
.prod-payment-con .prod-desc > li.custom-marking .tab > li + li {border-left: 1px solid var(--gray200);}
.prod-payment-con .prod-desc > li.custom-marking .cont {display: flex; width: 100%; border: 1px solid var(--gray200); padding: 2rem;}
.prod-payment-con .prod-desc > li.custom-marking .cont > li {display: flex; flex-flow: column;}
.prod-payment-con .prod-desc > li.custom-marking .cont > li:nth-child(1) {width: 10rem;}
.prod-payment-con .prod-desc > li.custom-marking .cont > li:nth-child(2) {width: calc(100% - 11rem); margin-left: 1rem;}
.prod-payment-con .prod-desc > li.custom-marking .cont > li > label {font-size: 1.4rem; color: var(--gray500); margin-bottom: 1rem;}

.prod-payment-con .prod-desc > li.marking-guide {margin-top: 0!important; margin-bottom: 2rem; width: 100%; display: block; text-align: right;}
.prod-payment-con .prod-desc > li.marking-guide > span {color: #fa3232; font-size: 1.2rem; font-weight: initial;}

.prod-payment-con .prod-desc > li .count {display: grid; grid-template-columns: repeat(3, 1fr); width: 12rem; height: 4rem; margin-left: auto; border-right: 1px solid var(--gray200);}
.prod-payment-con .prod-desc > li .count > li {border: 1px solid var(--gray200); border-right: 0; background-color: #f4f4f4; background-repeat: no-repeat; background-position: center; background-size: 1.4rem; cursor: pointer;}
.prod-payment-con .prod-desc > li .count > li + li {border-left: 1px solid var(--gray200);}
.prod-payment-con .prod-desc > li .count > li:nth-child(1) {background-image: url(../img/ico/ic-count-minus@2x.png);}
.prod-payment-con .prod-desc > li .count > li:nth-child(3) {background-image: url(../img/ico/ic-count-plus@2x.png);}
.prod-payment-con .prod-desc > li .count > li > input[type="text"] {width: 100%; height: 100%; text-align: center; border: 0;}

.prod-payment-con .prod-btn {display: flex; align-items: center; height: 6rem;}
.prod-payment-con .prod-btn > li {height: 100%; text-align: center;}
.prod-payment-con .prod-btn > li + li {border-left: 1px solid var(--gray200);}
.prod-payment-con .prod-btn > li:nth-child(1):nth-last-child(1) {width: 100%; background-color: transparent;}
.prod-payment-con .prod-btn > li:nth-child(1):nth-last-child(2) ~ li:nth-child(2) {width: calc(100% - 6rem);}
.prod-payment-con .prod-btn > li:nth-child(1) {width: 6rem;}
.prod-payment-con .prod-btn > li:nth-child(2), 
.prod-payment-con .prod-btn > li:nth-child(3) {width: calc((100% - 6rem) / 2);}
.prod-payment-con .prod-btn > li > i {margin: 1.4rem auto; cursor: pointer;}
.prod-payment-con .prod-btn > li > button {width: 100%; height: 100%; font-size: 1.6rem; font-weight: 700;}
.prod-payment-con .prod-btn > li:nth-child(2) > button {background-color: #fff; color: initial!important;}

@media screen and (max-width: 1023px) {
    .prod-payment {width: 50%; padding: 6.4rem 0 9rem 2rem; margin-bottom: -6rem;}
}
@media screen and (max-width: 767px) {
    .prod-payment {position: fixed; width: 100%; height: 19.5rem; bottom: 0; margin: 0 -2rem; box-shadow: 0px 3px 43.7px 1.4px rgba(34, 34, 34, 0.1); padding: 2rem; transition: height .3s ease-in-out;}
    .prod-payment-open {position: absolute; top: -2.25rem; left: 50%; width: 6.25rem; height: 2.5rem; background-color: #fff; background-image: url(../img/ico/ic-arrow-up@2x.png); background-repeat: no-repeat; background-position: center; background-size: 2.5rem auto; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer;}
    .prod-payment-con {position: inherit; top: auto; width: calc(100% - 4rem); height: fit-content;}

    .prod-info {padding: 0 0 3rem;}

    .prod-payment-con > .prod-desc {display: none;}
    .prod-payment-con .prod-desc {margin-bottom: 1.6rem; padding-bottom: 1.6rem;}
    .prod-payment-con .prod-desc > li {flex-wrap: wrap;}
    .prod-payment-con .prod-desc > li + li {margin-top: 1rem;}
    .prod-payment-con .prod-desc > li > span:nth-child(1) {width: 14rem;}
    .prod-payment-con .prod-desc > li > *:nth-child(2) {width: calc(100% - 14rem);}
    .prod-payment-con .prod-desc > li .price .sale {display: inline-block; margin-left: 1rem;}

    .prod-payment-con .prod-desc > li .marking-option {width: 100%; margin-top: 2rem;}
    .prod-payment-con .prod-desc > li .marking-option > li {width: calc((100% - 3.6rem) / 4); height: 5rem; line-height: 5rem;}
    .prod-payment-con .prod-desc > li .marking-option > li.active {background-color: var(--brown); border-color: var(--brown); color: #fff; font-weight: 700;}

    .prod-payment-con .prod-desc > li.custom-marking {display: block; padding: 1rem 0;}
    .prod-payment-con .prod-desc > li.custom-marking .tab {display: grid; grid-template-columns: repeat(2, 1fr); text-align: center; border: 1px solid var(--gray200); border-bottom: 0;}
    .prod-payment-con .prod-desc > li.custom-marking .tab > li {height: 4rem; line-height: 3.9rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500); background-color: #f4f4f4; border-bottom: 1px solid var(--gray200); cursor: pointer;}
    .prod-payment-con .prod-desc > li.custom-marking .tab > li.active {font-weight: 700; color: var(--brown); background-color: #fff; border-bottom-color: #fff;}
    .prod-payment-con .prod-desc > li.custom-marking .tab > li + li {border-left: 1px solid var(--gray200);}
    .prod-payment-con .prod-desc > li.custom-marking .cont {display: flex; width: 100%; border: 1px solid var(--gray200); padding: 2rem;}
    .prod-payment-con .prod-desc > li.custom-marking .cont > li {display: flex; flex-flow: column;}
    .prod-payment-con .prod-desc > li.custom-marking .cont > li:nth-child(1) {width: 10rem;}
    .prod-payment-con .prod-desc > li.custom-marking .cont > li:nth-child(2) {width: calc(100% - 11rem); margin-left: 1rem;}
    .prod-payment-con .prod-desc > li.custom-marking .cont > li > label {font-size: 1.4rem; color: var(--gray500); margin-bottom: 1rem;}

    .prod-payment-con .prod-desc > li .count {display: grid; grid-template-columns: repeat(3, 1fr); width: 12rem; height: 4rem; margin-left: auto; border-right: 1px solid var(--gray200);}
    .prod-payment-con .prod-desc > li .count > li {border: 1px solid var(--gray200); border-right: 0; background-color: #f4f4f4; background-repeat: no-repeat; background-position: center; background-size: 1.4rem; cursor: pointer;}
    .prod-payment-con .prod-desc > li .count > li + li {border-left: 1px solid var(--gray200);}
    .prod-payment-con .prod-desc > li .count > li > input[type="text"] {width: 100%; height: 100%; text-align: center; border: 0;}

    .prod-payment-con .prod-btn {display: flex; align-items: center; height: 5.2rem;}
    .prod-payment-con .prod-btn > li {height: 100%; text-align: center;}
    .prod-payment-con .prod-btn > li + li {border-left: 1px solid var(--gray200);}
    .prod-payment-con .prod-btn > li:nth-child(1) {width: 6rem;}
    .prod-payment-con .prod-btn > li:nth-child(2), .prod-payment-con .prod-btn > li:nth-child(3) {width: calc((100% - 6rem) / 2);}
    .prod-payment-con .prod-btn > li > i {margin: 1.4rem auto; cursor: pointer;}
    .prod-payment-con .prod-btn > li > button {width: 100%; height: 100%; font-size: 1.6rem; font-weight: 700;}

    .prod-payment.active .prod-payment-open {background-image: url(../img/ico/ic-arrow-down@2x.png);}
    .prod-payment.active .prod-payment-con > .prod-desc {display: inherit;}

    .prod-payment.new {position: relative; bottom: initial; height: fit-content;margin: 0; box-shadow: none; transition: none; padding: 0;}
    .prod-payment.new .prod-payment-con {width: 100%;}
    .prod-payment.new .prod-info {margin-top: 2rem; padding-top: 2.4rem; border-top: 1px solid var(--black); padding-bottom: 0;}
    .prod-payment.new .prod-info > h4 {font-size: 2rem;}
    .prod-payment.new .prod-info > ul {margin-top: 2.4rem; padding-top: 2.4rem; border-top: 1px solid var(--gray200);}
    .prod-payment.new .prod-info > ul > li > span {font-size: 1.4rem;}
    .prod-payment.new .prod-info-wrap .terms {width: 100vw; margin: 2.4rem -2rem; padding: 2.4rem 2rem 0; border-top: .8rem solid var(--gray100);}
    .prod-payment.new .prod-info-wrap .terms > p {font-size: 1.6rem;}
    .prod-payment.new .prod-info-wrap .terms > div {max-height: 20rem;}
    .prod-payment.new .prod-info-wrap .terms > ul > li > input + label > p {font-size: 1.4rem;}
    .prod-payment.new .prod-info-wrap .terms > ul > li > a {font-size: 1.2rem;}
}

/* 결제 --------------------------- */
/* 장바구니 */
.cart-depth {display: grid; grid-template-columns: repeat(3, 1fr); align-items: center;}
.cart-depth > li {position: relative; background-color: var(--red50); text-align: center; padding: 2rem 0; display: flex; align-items: center; justify-content: center; height: 6rem; font-size: 1.4rem; color: var(--gray500);}
.cart-depth > li.active {font-weight: 700; color: initial;}
.cart-depth > li:not(:first-child)::before {content: ''; display: block; width: 4rem; height: 100%; background-image: url(../img/ico/ic-cart-depth-arrow@2x.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: absolute; top: 0; left: 0;}
.cart-depth > li > br {display: none;}

.cart-table1 p.point {margin-top: 1rem; font-size: 1.4rem; color: var(--gray500);}
.cart-table1 p.point > span {color: initial; font-weight: 700;}
.cart-table1 button {display: block; height: 2.8rem; line-height: 2.6rem; font-size: 1.2rem; margin: 0 auto;}
.cart-table1 button + button {margin-top: 1rem;}
.cart-table1 button > i {display: inline-block; vertical-align: middle; position: relative; top: -.125rem; margin-right: .25rem;}

.cart-table2 td {position: relative; font-size: 1.8rem; font-weight: 700; padding: 3.2rem 0;}
.cart-table2 td .won {font-size: 1.4rem;}
.cart-table2 td > div {font-size: 1.4rem; font-weight: initial; color: var(--gray500);}
/* .cart-table2 td:not(:first-child)::before {content: ''; width: 1.6rem; height: 1.6rem; display: block; position: absolute; left: -.8rem; top: 50%; background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.cart-table2 td.plus::before {background-image: url(../img/ico/ic-cart-plus@2x.png);}
.cart-table2 td.minus::before {background-image: url(../img/ico/ic-cart-minus@2x.png);}
.cart-table2 td:last-child:before {background-image: url(../img/ico/ic-cart-total@2x.png);} */

.cart-btn {margin-top: 2rem;}
.cart-btn > button {width: 13rem;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .cart-depth > li:nth-child(2) {word-break: keep-all; line-height: 1.2; padding: .875rem 0;}
    .cart-depth > li:not(:first-child):before {left: -2rem;}
    .cart-depth > li > br {display: block;}

    .cart-list-check {margin-top: 5rem; margin-bottom: 2rem;}

    .cart-table2 td {padding: 2rem 0;}
    .cart-table3 .prod-summary {padding: 0;}

    .payment-result {border-top: .25rem solid var(--red800); border-bottom: 1px solid var(--red800); padding: 1.6rem 0;}
    .payment-result > li {display: flex; align-items: center; justify-content: space-between; font-size: 1.4rem;}
    .payment-result > li + li {margin-top: .6rem;}
    .payment-result > li > span:nth-child(1) {font-weight: 500;}
    .payment-result > li > span:nth-child(2) {font-size: 1.6rem; font-weight: 700;}
    .payment-result > li > span:nth-child(2) > span:not(.won) {font-size: 1.4rem; color: var(--gray500); font-weight: 400;}
    .payment-result > li:last-child {margin-top: 1.6rem; padding-top: 1.6rem; border-top: 1px solid var(--gray200);}
    .payment-result > li:last-child > span:nth-child(2) {font-size: 2rem;}

    .cart-option {display: flex; align-items: center; margin-top: 1.5rem;}
    .cart-option > select {width: 100%;}
    .cart-option > button {margin-left: 2rem; width: 10rem;}
}

/* 주문서 작성 결제 */
.cart-wrap {display: flex; margin-top: 9rem;}
.cart-con {width: 90rem;}
.cart-side {width: 28rem; height: fit-content; position: -webkit-sticky; position: sticky; top: 19rem; margin-left: 2rem;}

.payment-table1 th, .payment-table1 td {text-align: left; padding: 1.6rem;}
.payment-table1 input[type='text'] {width: 31.5rem;}

.payment-table1 .check-desc {margin-top: .4rem;}
.payment-table1 .check-desc + div {margin-top: 2rem;}
.payment-table1 .address > li {display: flex; align-items: center; column-gap: 1rem;}
.payment-table1 .address > li > input[type='text'] {width: 46rem;}
.payment-table1 .address > li:nth-child(1) > input[type='text'] {width: 31rem;}
.payment-table1 .address > li:nth-child(1) > button {width: 14rem;}

.payment-table1.new th {text-align: center;}
.payment-table1.new td {padding: 1rem 1.6rem;}

.payment-table2 th, .payment-table2 td {text-align: left; padding: 1.6rem;}
.payment-table2 input[type='text'] {width: 20rem;}
.payment-table2 input[type='text'] + button {display: inline-block; margin-left: 0.5rem;}
.payment-table2 ul:not(.payment-way) {display: inline-flex; margin-top: 1rem;}
.payment-table2 ul:not(.payment-way) > li {font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.payment-table2 ul:not(.payment-way) > li:not(:first-child):before {content: '|'; padding: 0 1rem;}
.payment-table2 ul:not(.payment-way) > li > span {font-weight: 700; color: initial; margin-left: .5rem;}
.payment-table2 td > span {display: block; margin-top: 1rem; font-size: 1.2rem; color: var(--gray500);}

.payment-table3 th, .payment-table3 td {text-align: left; padding: 1.6rem;}
.payment-table3 th, .payment-table3 td p {font-size: 1.2rem; font-weight: initial; color: var(--gray500); word-break: keep-all;}
.payment-table3 th > button {display: block; margin-top: 1rem; width: 6.8rem; height: 2.8rem; line-height: 2.55rem; font-size: 1.2rem;}

.new-flex {display: flex; align-items: center; column-gap: .8rem;}

.payment-way {display: flex; align-items: center; column-gap: 2rem;}
.payment-way > li > input[type='radio'] + label > span {top: 0; display: flex; align-items: center; column-gap: .4rem;}

.payment-box {background-color: #fff; box-shadow: 3.1px 2.6px 12px 0 rgba(15, 16, 16, 0.12); padding: 2rem;}
.payment-box + .payment-box {margin-top: 1rem;}
.payment-box > h6 {font-weight: 700; text-align: center; border-bottom: .2rem solid var(--red800); padding: 1px 0 1.6rem; margin-bottom: 2rem; font-size: 1.6rem;}
.payment-box > ul + ul {border-top: 1px solid var(--gray200); margin-top: 2rem; padding-top: 2rem;}
.payment-box > ul > li {display: flex; justify-content: space-between; align-items: center;}
.payment-box > ul > li + li {margin-top: 1.4rem;}
.payment-box > ul > li > span:nth-child(1) {font-size: 1.4rem; font-weight: 500;}
.payment-box > ul > li > span:nth-child(2) {font-size: 1.6rem; font-weight: 700;}
.payment-box > ul > li > span:nth-child(2) .won {font-size: 1.4rem; font-weight: 500; vertical-align: middle;}
.payment-box > ul > li > span.brown {font-size: 1.8rem;}
.payment-box > ul > li > p {font-size: 1.2rem; color: var(--gray500); word-break: keep-all; line-height: 1.4;}
.payment-box > p {font-size: 1.2rem; line-height: 1.6;}
.payment-box > p + ul {border-top: 1px solid var(--gray200); margin-top: 2rem; padding-top: 2rem;}
.payment-box > p + ul > li {font-size: 1.2rem; line-height: 1.6;}
.payment-box > p + ul > li a {text-decoration: underline; cursor: pointer; color: var(--gray500);}
.payment-box > button {width: calc(100% + 4rem); line-height: 5.1rem; background-color: var(--red800); margin: 2rem -2rem -2rem;}

@media screen and (max-width: 1023px) {
    .cart-wrap {display: flex; flex-flow: column; margin-top: 5rem;}
    .cart-con {width: 100%;}
    .cart-side {width: 100%; height: fit-content; position: initial; top: auto; margin-left: 0; margin-top: 2rem;}
    .payment-box > button {margin-top: 2rem; width: 100%; margin: 2rem 0 0;}
}
@media screen and (max-width: 767px) {
    .payment-table1 th:nth-child(1) {width: 30%;}
    .payment-table1 th:nth-child(2) {width: 70%;}
    .payment-table1 input[type='text'] {width: 100%;}

    .payment-table1 .address > li {display: flex; align-items: center; column-gap: 1rem;}
    .payment-table1 .address > li > input[type='text'] {width: 100%;}
    .payment-table1 .address > li:nth-child(1) {flex-flow: initial;}
    .payment-table1 .address > li:nth-child(1) > input[type='text'] {width: calc(100% - 10rem);}
    .payment-table1 .address > li:nth-child(1) > button {width: 9rem; font-size: 1.2rem;}

    .payment-table1.new select,
    .payment-table1.new input {font-size: 1.2rem;}

    .payment-table2 th:nth-child(1) {width: 30%;}
    .payment-table2 th:nth-child(2) {width: 70%;}
    .payment-table2 input[type='text'] {width: 100%;}
    .payment-table2 input[type='text'] + button {width: 100%; margin-left: 0;}
    .payment-table2 ul:not(.payment-way) {display: flex; margin-left: 0rem; margin-top: 1rem;}
    .payment-table2 td > span {margin-top: .5rem;;}

    .payment-table3 th:nth-child(1) {width: 30%;}
    .payment-table3 th:nth-child(2) {width: 70%;}
    .payment-table3 th > button {width: 100%;}

    .payment-way {display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem;}
    .payment-way > li + li {margin: 0;}

    .payment-box {background-color: #fff; box-shadow: none; padding: 0; margin-top: 5rem;}
    .payment-box + .payment-box {margin-top: 2rem;}
    .payment-box > h6 {font-size: 1.8rem; text-align: left; padding: 0 0 2rem;}
    .payment-box > p + p {margin-top: 1rem; padding-top: 1rem;}

    .cardSwiper {width: 28.5rem; margin: 0 auto;}

    .swiper-button-next, .swiper-button-prev {width: 3.6rem!important; height: 3.6rem!important; margin-top: -1.8rem!important;}
    .swiper-button-prev::before, .swiper-button-next::before {content: ''; width: 5rem; height: 5rem; display: block; background-repeat: no-repeat; background-size: contain; background-position: center;}
    .swiper-button-next, .swiper-rtl .swiper-button-prev {right: 0!important;}
    .swiper-button-prev, .swiper-rtl .swiper-button-next {left: 0!important;}


    .ncdinos-pay {width: 100%; height: auto; padding: 1rem; text-align: center; border: 1px solid var(--gray200); cursor: pointer;}
    .ncdinos-pay > i {width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; background-image: url(../img/ico/ncdinos-pay-plus@2x.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
    .ncdinos-pay > h6 {font-weight: 700;}
    .ncdinos-pay > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; margin-top: .5rem;}

    .card-pay {width: 70%; height: auto; padding: 1rem; background-position: right 1rem center;}
    .card-pay > h6 {margin-top: 4rem;}

}

/* 결제 유형 */
.simple-payment {display: flex; align-items: center; flex-wrap: wrap; grid-gap: 1rem;}
.simple-payment > li {border: 1px solid var(--gray200); width: 8rem; height: 4rem; line-height: 3.8rem; font-size: 1.2rem; text-align: center; color: var(--gray500); cursor: pointer;}
.simple-payment > li.active {background-color: var(--brown); border-color: var(--brown); color: #fff; font-weight: 700;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .simple-payment > li {width: calc((100% - 1rem) / 2);}
    .simple-payment > li + li {margin-left: 0;}
}


.card-swiper-wrap {position: relative;}
.cardSwiper {width: 33.5rem; margin: 0 auto;}

.ncdinos-pay {width: 33.5rem; height: 16.5rem; margin: 0 auto; padding: 2.4rem; text-align: center; border: 1px solid var(--gray200); cursor: pointer;}
.ncdinos-pay > i {width: 4.2rem; height: 4.2rem; margin: 0 auto 1rem; background-image: url(../img/ico/ncdinos-pay-plus@2x.png); background-repeat: no-repeat; background-size: contain; background-position: center;}
.ncdinos-pay > h6 {font-weight: 700;}
.ncdinos-pay > p {font-size: 1.2rem; color: var(--gray500); line-height: 1.6; margin-top: .5rem;}

.card-pay {position: relative; width: 33.5rem; height: 16.5rem; margin: 0 auto; padding: 2.4rem 3rem; border: 1px solid var(--gray200); cursor: pointer; background-image: url(../img/img-card-reader@2x.png); background-repeat: no-repeat; background-size: 4rem auto; background-position: right 3rem center;}
.card-pay > i {width: 10rem; height: 2.4rem; background-repeat: no-repeat; background-size: contain; background-position: left center;}
.card-pay > h6 {margin-top: 5rem; font-size: 1.4rem; font-weight: 500; color: #fff;}
.card-pay > p {font-weight: 700; color: #fff;}

.card-pay.ncdinos {border-color: var(--gray200); background-color: #fff;}
.card-pay.ncdinos > i {background-image: url(../img/card/ic-logo-nc@2x.png);}
.card-pay.ncdinos > h6, .card-pay.ncdinos > p {color: initial;}
.card-pay.shinhan {border-color: #59a6eb; background-color: #59a6eb;}
.card-pay.shinhan > i {background-image: url(../img/card/img-logo-shinhan@2x.png);}
.card-pay.samsung {border-color: #316bdb; background-color: #316bdb;}
.card-pay.samsung > i {background-image: url(../img/card/img-logo-samsung@2x.png);}
.card-pay.hyundai {border-color: #222; background-color: #222;}
.card-pay.hyundai > i {background-image: url(../img/card/img-logo-hyundai@2x.png);}
.card-pay.woori {border-color: #1ca6e6; background-color: #1ca6e6;}
.card-pay.woori > i {background-image: url(../img/card/img-logo-woori@2x.png);}
.card-pay.kb {border-color: #fcc867; background-color: #fcc867;}
.card-pay.kb > i {background-image: url(../img/card/img-logo-kb@2x.png);}
.card-pay.nh {border-color: #438ad6; background-color: #438ad6;}
.card-pay.nh > i {background-image: url(../img/card/img-logo-nh@2x.png);}
.card-pay.bc {border-color: #ed6973; background-color: #ed6973;}
.card-pay.bc > i {background-image: url(../img/card/img-logo-bc@2x.png);}
.card-pay.kakao {border-color: #ffcb40; background-color: #ffcb40;}
.card-pay.kakao > i {background-image: url(../img/card/img-logo-kakao@2x.png);}
.card-pay.lotte {border-color: #e54c55; background-color: #e54c55;}
.card-pay.lotte > i {background-image: url(../img/card/img-logo-lotte@2x.png);}
.card-pay.kbank {border-color: #28323c; background-color: #28323c;}
.card-pay.kbank > i {background-image: url(../img/card/img-logo-kbank@2x.png);}
.card-pay.city {border-color: #134f9f; background-color: #134f9f;}
.card-pay.city > i {background-image: url(../img/card/img-logo-city@2x.png);}
.card-pay.sin {border-color: #4a86bf; background-color: #4a86bf;}
.card-pay.sin > i {background-image: url(../img/card/img-logo-sin@2x.png);}
.card-pay.hana {border-color: #33ac9d; background-color: #33ac9d;}
.card-pay.hana > i {background-image: url(../img/card/img-logo-hana@2x.png);}
.card-pay.suhyup {border-color: #4194d3; background-color: #4194d3;}
.card-pay.suhyup > i {background-image: url(../img/card/img-logo-city@2x.png);}
.card-pay.jeonbuk {border-color: #1166b2; background-color: #1166b2;}
.card-pay.jeonbuk > i {background-image: url(../img/card/img-logo-jeonbuk@2x.png);}
.card-pay.jeju {border-color: #1da9e7; background-color: #1da9e7;}
.card-pay.jeju > i {background-image: url(../img/card/img-logo-jeju@2x.png);}
.card-pay.kdb {border-color: #1166b2; background-color: #1166b2;}
.card-pay.kdb > i {background-image: url(../img/card/img-logo-kdb@2x.png);}


/* 기타 --------------------------- */
/* 이벤트 */
.event-list {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 6rem 2rem;}
.event-list > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-list > li .img {width: 100%; height: 25vw; max-height: 38rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
.event-list > li .desc > h6 {font-size: 1.6rem; font-weight: 500; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.event-list > li .desc > h6 .label {position: relative; top: -.125rem; margin-right: .5rem;}
.event-list > li .desc > ul {margin-top: 1rem; display: flex; flex-wrap: wrap; column-gap: 1.1rem;}
.event-list > li .desc > ul > li {font-size: 1.4rem; color: var(--gray500); line-height: 1.6; display: flex; align-items: center; position: relative;}
.event-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200); position: absolute; left: -.6rem;}

.event-list.new {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 6rem 2rem;}
.event-list.new > li {display: flex; flex-flow: column; row-gap: 1.2rem;}
.event-list.new > li .img {width: 100%; border-radius: .8rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
.event-list.new > li .desc {display: flex; flex-flow: column; row-gap: .8rem;}
.event-list.new > li .desc > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.event-list.new > li .desc .label {width: fit-content; height: 1.8rem; padding: 0 .4rem; border-radius: .2rem; font-size: 1rem; font-weight: 500; min-width: fit-content; display: flex; align-items: center; justify-content: center;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .event-list {grid-template-columns: repeat(2, 1fr); grid-gap: 2rem 1.2rem;}
    .event-list > li .img {height: 42vw; max-height: 15.6rem;}
    .event-list > li .desc > h6 {font-size: 1.4rem;}
    .event-list > li .desc > h6 .label {top: 0; margin-right: .2rem;}
    .event-list > li .desc > ul {margin-top: .6rem; display: flex; flex-wrap: wrap; column-gap: .6rem;}
    .event-list > li .desc > ul > li {font-size: 1.1rem; line-height: 1.4;}
    .event-list > li .desc > ul > li + li::before {content: ''; width: 1px; height: 1rem; background-color: var(--gray200); position: absolute; left: -.3rem;}

    .event-list.new {grid-template-columns: repeat(2, 1fr); grid-gap: 3.2rem 1.2rem;}
    .event-list.new > li {row-gap: .8rem;}
    .event-list.new > li .img {border-radius: .4rem;}
    .event-list.new > li .desc {row-gap: .6rem;}
    .event-list.new > li .desc > p {font-size: 1.2rem;}
}

/* 공지사항 */
.notice-table1 tr td:nth-child(2) {text-align: left;}
.notice-table1 tr td:nth-child(2) > div {max-width: 50rem; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; vertical-align: middle;}
.notice-table1 tr td:nth-child(2) .label {margin-left: 1rem;}
.notice-table1 tr td:nth-child(n+3) {color: var(--gray500); font-weight: initial;}
.notice-table1 tr.bg-color td:nth-child(2) {font-weight: 700;}

@media screen and (max-width: 1023px) {
    .notice-table2 td > div .label {margin-left: .6rem;}
    .notice-table2 tr td ul.date {justify-content: start; margin-top: .25rem;}
}
@media screen and (max-width: 767px) {
}

/* 상품후기 */
.review-list .desc > h6 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; cursor: pointer;}
.review-btn {margin-top: 2rem; display: flex; align-items: center; justify-content: flex-end;}
.review-btn > button {width: 10rem;}

.reviewWrite-table1 th, .reviewWrite-table1 td {text-align: left; padding: 1.6rem;}
.reviewWrite-table1 td > img {max-width: 30%;}
.reviewWrite-table1 input[type='text'], .reviewWrite-table1 input[type='password'], .reviewWrite-table1 select {width: 31.5rem;}
.reviewWrite-table1 input[type='text'] + button {margin-left: 0; margin-top: 1rem; width: 31.5rem;}
.reviewWrite-table1 .review-star {display: flex; align-items: center;}
.reviewWrite-table1 .review-star .ico-star {margin-left: 1rem;}
.reviewWrite-table1 .review-star > li + li {margin-left: 2rem;}
.reviewWrite-table1 .automatic > div {border: 1px solid var(--gray200); width: 31.5rem; height: 12rem; margin-bottom: 1rem; padding: 4rem 0; text-align: center;}
.reviewWrite-table1 .automatic > div > img {height: 4rem;}
.reviewWrite-table1 .automatic > p {margin-top: 1rem; font-size: 1.2rem; color: var(--gray500);}

.file-img .img {width: 20rem; height: 20rem; border: 1px solid var(--gray200); display: inline-block; background-repeat: no-repeat; background-size: contain; background-position: center; vertical-align: bottom;}

.terms-check {margin-top: 2rem;}
.terms-wrap {line-height: 1.6; font-size: 1.4rem;}
.cont-box .title > button.marketing-all {height: 2.5rem; line-height: 2.5rem; font-size: 1.2rem; width: fit-content; padding: 0 1rem; background-color: var(--gray200); color: var(--gray500)!important;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .review-list .date > li {font-size: 1.2rem;}
    .review-list .date > li:nth-child(2) {display: none;}

    .review-btn {margin-top: 2rem; text-align: right;}
    .review-btn > button {width: 10rem;}

    .reviewWrite-table1 th:nth-child(1) {width: 30%;}
    .reviewWrite-table1 th:nth-child(2) {width: 70%;}
    .reviewWrite-table1 td > img {max-width: 50%;}
    .reviewWrite-table1 input[type='text'], .reviewWrite-table1 input[type='password'], .reviewWrite-table1 select {width: 100%;}
    .reviewWrite-table1 input[type='text'] + button {width: 100%; margin-left: 0; margin-top: 1rem;}
    .reviewWrite-table1 input[type='file'] + label {width: 100%; margin-left: 0; margin-top: 1rem;}
    .reviewWrite-table1 .review-star {display: block;}
    .reviewWrite-table1 .review-star > li + li {margin-left: 0; margin-top: 1rem;}
    .reviewWrite-table1 .automatic > div {width: 100%;}

    .file-img .img {width: 100%; height: 25rem;}

}


/* my page 마이페이지 --------------------------- */
.info-wrap {display: flex; align-items: center; justify-content: space-between; column-gap: 2rem; padding: 3rem; background-color: var(--red50); margin-bottom: 9rem;}
.info-wrap .info {width: calc(100% - (18rem * 3)); display: flex; flex-flow: column; row-gap: 1rem;}
.info-wrap .info .name {font-size: 2.6rem; display: flex; align-items: center; column-gap: 1rem;}
.info-wrap .info .name > span {font-weight: 700;}
.info-wrap .info .email {font-size: 1.4rem; color: var(--gray500);}
.info-wrap .info .grade {font-weight: 700; color: var(--red800); font-size: 1.6rem;}
.info-wrap .info > button {width: 6.8rem; height: 2.8rem; line-height: 2.5rem; font-size: 1.2rem; font-weight: 500; margin-left: auto;}
.info-wrap > ul {display: flex; align-items: center; justify-content: flex-end; border-left: 1px solid var(--white);}
.info-wrap > ul > li {width: 18rem; height: 11rem; display: flex; flex-flow: column; justify-content: space-between; padding: 0 2rem;}
.info-wrap > ul > li + li {border-left: 1px solid var(--white);}
.info-wrap > ul > li > h6 {font-size: 1.4rem; font-weight: 700; display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem;}
.info-wrap > ul > li > h6 .point-date {font-size: 1.2rem; font-weight: 500;}
.info-wrap > ul > li > div {font-size: 3.6rem; font-weight: 700; align-self: flex-end;}

@media screen and (max-width: 1023px) {
    .info-wrap {flex-flow: column; align-items: flex-start; row-gap: 2rem; margin-bottom: 4rem;}
    .info-wrap .info {width: 100%;}
    .info-wrap > ul {width: 100%; border-left: 0; border-top: 1px solid var(--white); padding-top: 2rem;}
    .info-wrap > ul > li {height: 8rem; width: 100%;}
    .info-wrap > ul > li:nth-child(1):nth-last-child(2), .info-wrap > ul > li:nth-child(1):nth-last-child(2) ~ li {height: 8rem; width: calc(100% / 2);}
    .info-wrap > ul > li:nth-child(1):nth-last-child(3), .info-wrap > ul > li:nth-child(1):nth-last-child(3) ~ li {height: 8rem; width: calc(100% / 3);}
}
@media screen and (max-width: 767px) {
    .info-wrap {margin-bottom: 2rem;}
    .info-wrap > ul {flex-flow: column; padding-top: 0;}
    .info-wrap > ul > li {height: fit-content; width: 100%; padding: 2rem 0; flex-flow: row; justify-content: space-between;}
    .info-wrap > ul > li:last-child {padding-bottom: 0;}
    .info-wrap > ul > li + li {border-left: 0; border-top: 1px solid var(--white);}
    .info-wrap > ul > li:nth-child(1):nth-last-child(2), .info-wrap > ul > li:nth-child(1):nth-last-child(2) ~ li,
    .info-wrap > ul > li:nth-child(1):nth-last-child(3), .info-wrap > ul > li:nth-child(1):nth-last-child(3) ~ li {width: 100%; height: fit-content;}
    .info-wrap > ul > li > h6 {flex-flow: row; align-items: center;  column-gap: .4rem;}
    .info-wrap > ul > li > div {font-size: 2rem; align-self: center;}
}

.tracking-table1 {table-layout: fixed;}
.tracking-table1 td {position: relative;}
.tracking-table1 td:not(:first-child)::after {content: ''; display: block; width: .6rem; height: 1.2rem; background-image: url(../img/ico/ic-my-arrow@2x.png); background-repeat: no-repeat; background-size: contain; background-position: center; position: absolute; left: -.3rem; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.tracking-table1 td > div {display: flex; align-items: center; justify-content: center; column-gap: 1rem;}
.tracking-table1 td > div > span {font-size: 3.6rem; font-weight: 700; color: var(--gray200);}
.tracking-table1 td > div > span.active {color: initial;}

@media screen and (max-width: 1023px) {
    .mypage-menu {border-top: 1px solid var(--red900); -webkit-tap-highlight-color: transparent; width: 100%;}
    .mypage-menu > li {border-bottom: 1px solid var(--red800); cursor: pointer; font-size: 1.4rem;}
    .mypage-menu > li > span {position: relative; display: block; width: 100%; padding: 2rem 0; font-weight: 700; color: var(--red800);}
    .mypage-menu > li > span > i {position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
    .mypage-menu > li > ul {display: none;}
    .mypage-menu > li > ul > li {border-top: 1px solid var(--gray200); padding: 2rem 0; font-size: 1.4rem;}
    .mypage-menu > li.active > ul {display: inherit;}
    .mypage-menu > li.active > span > i {background-image: url(../img/ico/ic-arrow-down@2x.png);}
}
@media screen and (max-width: 767px) {
}

.tracking-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; margin-top: 2rem; align-items: center;}
.tracking-wrap > div {border: 1px solid var(--gray200); padding: 2rem 3rem; display: flex; align-items: center; justify-content: space-between;}
.tracking-wrap > div > h6 {font-size: 1.4rem; font-weight: 700;}
.tracking-wrap > div > span {font-size: 2.2rem; color: var(--gray200); font-weight: 700;}
.tracking-wrap > div > span.active {color: initial;}

.prod-summary {width: 35.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.prod-summary .img {position: relative; width: 8rem; height: 8rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.prod-summary .desc {width: 25rem; text-align: left;}
.prod-summary .desc > h6 {font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.prod-summary .desc > span {margin-top: 2rem;}
.prod-summary .desc .price {margin-top: 2rem; font-size: 1.6rem; font-weight: 600;}
.prod-summary .desc .price + .label {margin-top: .4rem;}
.prod-summary .desc > p {margin-top: .4rem; font-size: 1.2rem; line-height: 1.4; color: var(--gray500); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.prod-summary .desc > p > button {display: inline-block; width: 6.8rem; height: 2.8rem; line-height: 2.6rem; font-size: 1.2rem; margin-left: 1rem; margin-bottom: .15rem;}
.prod-summary .desc .ico-star {margin-top: 2rem;}
.prod-summary .btn-wrap {width: 100%; margin-top: 1rem; display: flex; align-items: center; justify-content: flex-end; column-gap: 1rem;}
.prod-summary .btn-wrap > button {min-width: 8rem; white-space: nowrap; height: 3.6rem; font-size: 1.2rem;}

.prod-summary.lg {width: 37rem; margin: 0 auto 0 0;}
.prod-summary.lg .img {width: 11rem; height: 11rem;}
.prod-summary.lg .desc {width: 24rem;}
.prod-summary.lg .desc > h6 {line-height: 1.4; font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

/* 주문목록 배송조회 */
.bank-guide {font-size: 1.2rem; color: var(--gray500); display: block; margin-top: 1rem; line-height: 1.4; word-break: keep-all;}
.notification {width: 100%; border: 1px solid #f4f4f4; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; height: 20rem;}

@media screen and (max-width: 1023px) {
    .tracking-wrap {display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 2rem; margin-top: 2rem; align-items: center;}
    .tracking-wrap > div {border: 1px solid var(--gray200); padding: 2rem 3rem; display: flex; align-items: center; justify-content: space-between;}
    .tracking-wrap > div > h6 {font-size: 1.4rem; font-weight: 700;}
    .tracking-wrap > div > span {font-size: 2.2rem; color: var(--gray200); font-weight: 700;}
    .tracking-wrap > div > span.active {color: initial;}

    .prod-summary {width: 35.5rem; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;}
    .prod-summary + .prod-summary {border-top: .125rem solid var(--gray200);}
    .prod-summary .img {width: 8rem; height: 8rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
    .prod-summary .img > input[type="checkbox"] + label::before {position: absolute; top: -1px; left: -1px;}
    .prod-summary .desc {width: 25rem; text-align: left;}
    .prod-summary .desc > h6 {font-size: 1.6rem; line-height: 1.4;}
    .prod-summary .desc > span {margin-top: 1.5rem;}
    .prod-summary .desc > p {margin-top: .4rem; font-size: 1.2rem; color: var(--gray500);}
    .prod-summary .btn-wrap > button {height: 3rem; min-width: 6rem;}

    .prod-summary .desc .state {display: block; font-size: 1.4rem; font-weight: 700; color: var(--gray500); margin-bottom: .75rem; margin-top: 0;}
    .prod-summary .desc .price {margin-top: 1rem;}
    .prod-summary .desc .price .won {font-size: 1.75rem;}
    .prod-summary .desc .price .sale {font-size: 1.75rem; font-weight: 500;}

    .prod-summary.lg {width: 100%; padding: 2rem 0;}
    .prod-summary.lg .img {width: 12.5rem; height: 12.5rem;}
    .prod-summary.lg .desc {width: calc(100% - 14.25rem);}
    .prod-summary.lg .desc > p {margin-top: 1rem;}

    .order-list {border-top: .125rem solid var(--black); border-bottom: .125rem solid var(--black);}
    .order-list + .order-list {margin-top: 2rem;}
    .order-list .order-info {padding: 1rem 0; display: flex; flex-flow: column; grid-gap: .6rem; border-bottom: .125rem solid var(--gray200);}
    .order-list .order-info > span {color: var(--gray500); font-size: 1.4rem; word-break: keep-all; line-height: 1.2;}
    .order-list .order-info .btn-wrap {display: flex; align-items: center; column-gap: .6rem; justify-content: flex-end; grid-gap: .6rem; flex-wrap: wrap;}
    .order-list .order-info button {min-width: 6rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; white-space: nowrap;}
    .order-list .order-info button.review-btn {width: fit-content; margin-top: 0; text-align: center; white-space: nowrap;}
}
@media screen and (max-width: 767px) {
}

/* 찜 리스트 */
.wish-list > li .delete {display: none; position: absolute; top: 0; right: 0; background-color: var(--red800); width: 4rem; height: 4rem; z-index: 99; cursor: pointer;}
.wish-list > li:hover .delete {display: inherit;}

/* 쿠폰 */
.sub-box.coupon > input[type="text"] {width: 30rem;}
.sub-box.coupon > button {width: 9rem; margin-left: 1rem;}

.coupon-list {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.coupon-list > li {display: flex; flex-flow: column; justify-content: space-between; height: 16rem; padding: 3rem; border: 1px solid var(--gray200); background-image: url(../img/bg-coupon.svg); background-repeat: no-repeat; background-position: right bottom;}
.coupon-list > li > div {display: flex; flex-flow: column; justify-content: space-between;}
.coupon-list > li > div > div {display: flex; justify-content: space-between; column-gap: 1rem;}
.coupon-list > li > div > div > p {font-size: 1.4rem; font-weight: 600;}
.coupon-list > li > div > div > p > span {color: var(--red800);}
.coupon-list > li > div > div > span {font-size: 1.2rem; font-weight: 500;}
.coupon-list > li > div > h6 {font-size: 1.6rem; font-weight: 600; word-break: keep-all; line-height: 1.4; margin-top: .4rem;}
.coupon-list > li > div > p {display: flex; align-items: center; font-size: 1.2rem; font-weight: 500;}
.coupon-list > li > div > span {font-size: 1.2rem; margin-top: .4rem; color: var(--gray500);}

@media screen and (max-width: 767px) {
    .sub-box.coupon {padding: 1rem;}
    .sub-box.coupon > input[type="text"] {width: calc(100% - 10rem);}

    .coupon-list {grid-template-columns: repeat(1, 1fr);}
    .coupon-list > li {height: 13rem; padding: 2.4rem;}
    .coupon-list > li > div > div {column-gap: .6rem;}
    .coupon-list > li > div > div > p {font-size: 1.2rem;}
    .coupon-list > li > div > p > i {width: 1rem; height: 1rem;}
    .coupon-list > li > div > h6 {font-size: 1.4rem;}
}

/* 회원정보 변경 */
.user-info {display: flex; align-items: center; justify-content: center;}
.user-info > li {font-size: 1.4rem; font-weight: 500;}
.user-info > li:nth-child(2) {font-size: 1.6rem; font-weight: 700;}
.user-info > li + li {margin-left: 2rem;}

.userInfo-table1 th, .userInfo-table1 td {text-align: left; padding: 1.6rem;}
.userInfo-table1 input[type='text'] {width: 20rem;}
.userInfo-table1 input[type='password'] {width: 20rem;}
.userInfo-table1 select {width: 14rem;}
.userInfo-table1 input[type='text'] + select {margin-left: 1rem; width: fit-content;}

.userInfo-table1 .password .help {margin-left: 1rem; font-size: 1.2rem; font-weight: 500; color: var(--gray500);}
.userInfo-table1 .password .help i.ic-help {width: 1.2rem; height: 1.2rem; margin-left: .4rem; display: inline-block; vertical-align: middle; margin-top: -.2rem; cursor: pointer;}
.userInfo-table1 .password > li + li {margin-top: 1.2rem;}
.userInfo-table1 .password > li > span {display: inline-block; width: 12rem;}

.userInfo-table1 .check-desc {margin-top: .4rem;}
.userInfo-table1 .check-desc + div {margin-top: 2rem;}

.userInfo-table1 .address {display: flex; flex-flow: column; row-gap: 1.2rem;}
.userInfo-table1 .address > li {display: flex; align-items: center; column-gap: 1rem;}
.userInfo-table1 .address > li > input[type='text'] {width: 100%;}
.userInfo-table1 .address > li:nth-child(1) > input[type='text'] {width: calc(100% - 15rem);}
.userInfo-table1 .address > li:nth-child(1) > button {width: 14rem;}

.userInfo-table1 .gender {display: flex; align-items: center;}
.userInfo-table1 .gender > li + li {margin-left: 1rem;}

.terms-cont {background-color: #f4f4f4; width: 100%; height: 14rem; padding: 3rem; overflow-y: auto; line-height: 1.4; font-size: 1.4rem;}

.marketing {display: flex; align-items: center;}
.marketing > li + li {margin-left: 5rem;}
.marketing > li input[type='checkbox'] + label > span {font-size: 1.4rem; color: initial;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
    .userInfo-table1 th:nth-child(1) {width: 30%;}
    .userInfo-table1 th:nth-child(2) {width: 70%;}

    .userInfo-table1 input[type='text'] {width: 100%;}
    .userInfo-table1 input[type='password'] {width: calc(100% - 12.5rem);}
    .userInfo-table1 input[type='text'] + select {margin-left: 0; margin-top: 1rem; width: 100%;}

    .userInfo-table1 .password > li {display: flex; flex-flow: column; row-gap: .8rem; width: 100%;}
    .userInfo-table1 .password > li > * {width: 100%; margin: 0;}
    .userInfo-table1 .password .help {width: 100%; margin: 0;}

    .userInfo-table1 .address > li  {column-gap: .6rem;}
    .userInfo-table1 .address > li > input[type='text'] {width: 100%;}
    .userInfo-table1 .address > li:nth-child(1) > input[type='text'] {width: calc(100% - 9.6rem);}
    .userInfo-table1 .address > li:nth-child(1) > button {width: 9rem; font-size: 1.2rem;}

    .marketing {flex-flow: column; align-items: flex-start;}
    .marketing > li + li {margin-top: 2rem; margin-left: 0;}
}

/* 회원탈퇴 */
.userOut-table1 th, .userOut-table1 td {text-align: left; padding: 1.6rem;}
.userOut-table1 input[type='password'] {width: 20rem;}
.userOut-table1 .out-check {display: grid; grid-template-columns: repeat(2, 1fr); row-gap: .75rem;}

.userOut-input {margin-top: 2rem;}
.userOut-input input[type='checkbox'] + label > span {font-size: 1.4rem; font-weight: initial; color: initial;}

/* 배송지 관리 */
.cont-box .title .delivery-btn {width: 13rem;}
.cont-box .title .delivery-btn > i {display: inline-block; margin-left: .25rem;}

.deliveryInfo-table1 button {display: block; height: 2.8rem; line-height: 2.7rem; margin: 0 auto; font-size: 1.2rem;}
.deliveryInfo-table1 button + button {margin-top: .8rem;}
.deliveryInfo-table1 button > i {display: inline-block; vertical-align: middle; position: relative; top: -.125rem; margin-right: .25rem;}

.deliveryInfo-table2 input[type="radio"] + label::before {margin: 0 auto;}


@media screen and (max-width: 1023px) {
    .delivery-list {border-top: .125rem solid var(--red800); border-bottom: .125rem solid var(--red800);}
    .delivery-list > li {display: flex; align-items: center; justify-content: space-between; padding: 2.5rem 0;}
    .delivery-list > li + li {border-top: .125rem solid var(--gray200);}
    .delivery-list > li .desc {width: calc(100% - 9rem);}
    .delivery-list > li .desc > span {display: block; font-size: 1.4rem; font-weight: 700; margin-bottom: 1rem; color: var(--gray500);}
    .delivery-list > li .desc > p {font-weight: 500; line-height: 1.4; word-break: keep-all; font-size: 1.4rem;}
    .delivery-list > li .desc > ul {display: flex; flex-flow: column; align-items: flex-start; row-gap: .8rem; font-size: 1.2rem; color: var(--gray500); margin-top: 2.4rem;}
    .delivery-list > li .btn {text-align: right; width: 8rem; margin-left: 1rem;}
    .delivery-list > li .btn > button {display: block; height: 3.75rem; line-height: 3.6rem; margin-left: auto;}
    .delivery-list > li .btn > button + button {margin-top: 1rem;}
    .delivery-list > li .btn > button > i {display: inline-block; vertical-align: middle; position: relative; top: -.25rem; margin-right: .25rem;}
    .delivery-list > li .btn > input[type='radio'] + label::before {margin-left: auto; margin-right: 2rem;}

}
@media screen and (max-width: 767px) {
}



/* 자주하는 질문 */
.faqList-table1 tr td:nth-child(2) {color: var(--gray500);}
.faqList-table1 tr td:nth-child(3) {text-align: left; font-size: 1.6rem; font-weight: 700; padding: 1.6rem; background-image: url(../img/ico/ic-arrow-down@2x.png); background-repeat: no-repeat; background-size: 2rem; background-position: right 1.6rem center; cursor: pointer;}
.faqList-table1 tr.active td:nth-child(3) {background-image: url(../img/ico/ic-arrow-up@2x.png);}
.faqList-table1 tr.active td:nth-child(3) > span {display: block; width: 60rem;}
.faqList-table1 tr.answer td {background-color: #f4f4f4;}
.faqList-table1 tr.answer td:nth-child(3) {display: flex; background-image: none;}
.faqList-table1 tr.answer td:nth-child(3) > span {font-size: 1.6rem; font-weight: 700; color: var(--red800); margin-right: 1rem;}
.faqList-table1 tr.answer td:nth-child(3) > div > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.faqList-table1 tr.answer td:nth-child(3) > div > p + p {margin-top: 2rem;}

@media screen and (max-width: 1023px) {
    .faq-tab {flex-wrap: wrap; border-top: 1px solid var(--gray200); border-right: 1px solid var(--gray200);}
    .faq-tab > li {border-left: 1px solid var(--gray200); border-bottom: 1px solid var(--gray200); border-top: 0;}
    .faq-tab > li.active {border-color: var(--red800); border-width: .125rem;}

    .faq-tab > li:first-child:nth-last-child(6), .faq-tab > li:first-child:nth-last-child(6) ~ li,
    .faq-tab > li:first-child:nth-last-child(7), .faq-tab > li:first-child:nth-last-child(7) ~ li {width: 50%;}
    .faq-tab > li:first-child:nth-last-child(7), .faq-tab > li:first-child:nth-last-child(7) ~ li:nth-child(1) {width: 100%!important;}
    .faq-tab > li:not(:first-child)::before {content: none;}

    .faqList-table2 tr td:nth-child(2) {text-align: left;}
    .faqList-table2 tr:not(.answer) td:nth-child(2) {background-image: url(../img/ico/ic-arrow-down@2x.png); background-repeat: no-repeat; background-size: 1.6rem; background-position: right 1.6rem center;}
    .faqList-table2 tr.active td:nth-child(2) {background-image: url(../img/ico/ic-arrow-up@2x.png);}
    .faqList-table2 tr:not(.answer) td > span {display: block; font-size: 1.4rem; color: var(--gray500); margin-bottom: .25rem;}
    .faqList-table2 tr:not(.answer) td > div {font-size: 1.6rem; font-weight: 700; width: 30rem;}
    .faqList-table2 tr.answer td {background-color: var(--red50);}
    .faqList-table2 tr.answer td > div {display: flex; font-size: 1.6rem;}
    .faqList-table2 tr.answer td > div > span {color: var(--red800); font-weight: 700; margin-right: .5rem;}
    .faqList-table2 tr.answer td > div > div > p {font-weight: initial; word-break: keep-all; padding-right: 2rem;}
    .faqList-table2 tr.answer td > div > div > p + p {margin-top: 1rem;}
}
@media screen and (max-width: 767px) {
}

/* 나의 상품문의 */
.qna-table1 tr td {color: var(--gray500);}
.qna-table1 tr td.alignLeft {font-size: 1.6rem; color: initial; }
.qna-table1 tr td.alignLeft > span {display: block; width: 50rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;}

/* 검색 영역 */
.search-wrap {display: none; position: fixed; top: 0; left: 0; background-color: var(--white); width: 100%; padding: 8rem 20rem;}
.search-wrap.active {display: block;}
.search-wrap .search-cont {max-width: 120rem; width: 100%; margin: 0 auto; position: relative; display: flex; flex-flow: column; align-items: center; row-gap: 4rem;}
.search-wrap .search-cont .ic-close-32 {position: absolute; top: -6rem; right: 0;}
.search-wrap .search-cont select {width: 18rem; height: 4.6rem; border: 0; border-bottom: .2rem solid var(--black); color: var(--black); font-size: 2rem; font-weight: 500; padding: 0 4rem 1.8rem 0; line-height: 1; background-image: url(../img/ico/ic-select-32.svg); background-position: top right;}
.search-wrap .search-cont select option {font-size: 1.6rem;}
.search-wrap .search-cont input {width: 100%; height: 4.6rem; border: 0; border-bottom: .2rem solid var(--black); font-size: 2rem; font-weight: 500; padding: 0 4rem 1.8rem 0; border-radius: 0;}
.search-wrap .search-cont input::placeholder {color: var(--gray400);}
.search-wrap .search-cont > ul {max-width: 78.4rem; width: 100%; display: flex; align-items: center; column-gap: 1.2rem;}
.search-wrap .search-cont > ul > li {position: relative; width: 100%;}
.search-wrap .search-cont > ul > li .ic-search-32 {position: absolute; top: 0; right: 0;}
.search-wrap .search-cont > div {max-width: 78.4rem; width: 100%; display: flex; flex-flow: column; row-gap: 2.4rem;}
.search-wrap .search-cont > div > div {display: flex; align-items: center; justify-content: space-between;}
.search-wrap .search-cont > div > div > h6 {font-size: 2rem; font-weight: 700;}
.search-wrap .search-cont > div > div > a {font-size: 1.4rem; font-weight: 500; color: var(--gray500); text-decoration: underline; cursor: pointer;}
.search-wrap .search-cont > div > ul {display: flex; align-items: center; grid-gap: 1.6rem 2rem; flex-wrap: wrap; height: 1.6rem; overflow: hidden;}
.search-wrap .search-cont > div > ul > li {font-size: 1.6rem; font-weight: 500; color: var(--gray500); display: flex; align-items: center; column-gap: .4rem; cursor: pointer;}

.search-wrap .search-head {display: none;}

@media screen and (max-width: 767px) {
    .search-wrap {padding: 0;}
    .search-wrap .search-cont {max-width: initial; row-gap: 3.2rem; padding: 2rem 1.6rem;}
    .search-wrap .search-cont .ic-close-32 {display: none;}
    .search-wrap .search-cont select {width: 100%; height: 3.4rem; font-size: 1.6rem; padding: 0 3rem 1.2rem 0; background-size: 2rem; background-position: top right;}
    .search-wrap .search-cont select option {font-size: 1.4rem;}
    .search-wrap .search-cont input {height: 3.4rem; font-size: 1.6rem; padding: 0 3rem 1.2rem 0;}
    .search-wrap .search-cont > ul {max-width: initial; display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2.8rem 1.2rem;}
    .search-wrap .search-cont > ul > li:last-child {width: 100%; grid-column: 1 / span 2;}
    .search-wrap .search-cont > ul > li .ic-search-32 {width: 2.4rem;  height: 2.4rem;}
    .search-wrap .search-cont > div {max-width: 78.4rem; width: 100%; display: flex; flex-flow: column; row-gap: 2.4rem;}
    .search-wrap .search-cont > div > div > h6 {font-size: 1.6rem;}
    .search-wrap .search-cont > div > div > a {font-size: 1.2rem;}
    .search-wrap .search-cont > div > ul {height: 4.8rem;}
    .search-wrap .search-cont > div > ul > li {font-size: 1.4rem;}    

    .search-wrap .search-head {display: flex; align-items: center; justify-content: center; height: 6.8rem; position: relative;}
    .search-wrap .search-head > h6 {font-size: 1.6rem; font-weight: 500;}
    .search-wrap .search-head .ic-close-24 {position: absolute; right: 2rem; cursor: pointer;}
}

.search-box {background-color: var(--gray100); padding: 4rem 3.2rem; display: flex; align-items: center; column-gap: 3.2rem; margin-bottom: 3.2rem;}
.search-box > li {display: flex; align-items: center; column-gap: 1rem;}
.search-box > li:nth-child(2) {flex: 1;}
.search-box > li > h6 {font-size: 1.4rem; white-space: nowrap; font-weight: 500;}
.search-box > li > ul {display: flex; align-items: center; column-gap: 1rem;}
.search-box > li > input[type="text"] {flex: 1;}
.search-box > li > input[type="checkbox"] + label > span {font-size: 1.4rem; font-weight: 500;}
.search-box > li > button {width: 7.2rem;}

@media screen and (max-width: 767px) {
    .search-box {padding: 2rem 1.6rem; flex-flow: column; row-gap: 2rem; align-items: start;}
    .search-box > li {flex-flow: column; row-gap: 1.2rem; align-items: start; width: 100%;}
    .search-box > li:nth-child(2) {flex: initial;}
    .search-box > li > h6 {font-size: 1.4rem; white-space: nowrap; font-weight: 500;}
    .search-box > li > ul {display: flex; align-items: center; column-gap: 1rem;}
    .search-box > li > input[type="text"] {flex: initial; width: 100%;}
    .search-box > li > input[type="checkbox"] + label > span {font-size: 1.4rem; font-weight: 500;}
    .search-box > li > button {width: 100%;}
}

.refund-wrap {display: flex; flex-flow: column; row-gap: 1.2rem;}
.refund-wrap > li select {width: 100%;}
.refund-wrap + p {margin-top: 1.2rem; font-size: 1.2rem; color: var(--gray500); word-break: keep-all;}

.pay-request {width: fit-content; margin: 4rem auto 0; padding: 3.2rem 0; display: flex; flex-flow: column; row-gap: 1.2rem; border-top: 1px solid var(--black); border-bottom: 1px solid var(--black);}
.pay-request > li {display: flex; column-gap: 3.2rem;}
.pay-request > li > h6 {font-size: 1.4rem; font-weight: 500; line-height: 1.8; color: var(--gray500); width: 6rem;}
.pay-request > li > p {font-size: 1.4rem; font-weight: 500; line-height: 1.8; text-align: left;} 
.pay-request > li > p > span  {display: block; font-size: 1.2rem; color: var(--system-red);}

.pop-cont .pay-request {margin: 0;}

@media screen and (max-width: 767px) {
    .pay-request {width: 100%;}
    .pay-request > li {column-gap: 2.4rem;}
    .pay-request > li > h6 {font-size: 1.3rem; line-height: 1.6;}
    .pay-request > li > p {font-size: 1.3rem; line-height: 1.6;} 
    .pay-request > li > p > span  {font-size: 1.1rem;}
}


 /* 회원가입 */
 .join-wrap {width: 100%; max-width: 66rem; margin: 0 auto; padding: 10rem 0;}

 .join-wrap .page-title {display: flex; align-items: center; justify-content: center; margin-bottom: 6rem;}
 .join-wrap .page-title > h1 {font-size: 3.2rem; font-weight: 700;}
 
 .join-step {display: flex; align-items: center; justify-content: center; column-gap: 11rem; margin-bottom: 6rem;}
 .join-step > li {width: 8rem; display: flex; flex-flow: column; row-gap: 1.2rem; align-items: center; position: relative;}
 .join-step > li > div {width: 5.2rem; height: 5.2rem; border-radius: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--gray400);}
 .join-step > li > p {font-size: 1.6rem; font-weight: 500; color: var(--gray400);}
 .join-step > li + li::before {content: ''; width: 13.8rem; height: 1px; background-color: var(--gray400); position: absolute; left: -12.4rem; top: 2.6rem;}
 .join-step > li + li.active::before {background-color: var(--red800);}
 
 .join-step > li.active > div {background-color: var(--red800);}
 .join-step > li.active > p {font-weight: 600; color: var(--red800);}

 .terms-list {border-top: 1px solid var(--black); display: flex; flex-flow: column; row-gap: 4rem;}
 .terms-list input[type="checkbox"] + label > p {font-size: 1.6rem; font-weight: 500; display: flex; align-items: center; column-gap: .4rem;}
 .terms-list input[type="checkbox"] + label > p > span {font-size: 1.4rem; color: var(--gray500);}
 .terms-list .all {padding: 2.4rem 0; border-bottom: 1px solid var(--gray200);}
 .terms-list .terms .check {display: flex; align-items: center; justify-content: space-between;}
 .terms-list .terms .check > a {font-size: 1.4rem; font-weight: 500; color: var(--gray500); cursor: pointer; text-decoration: underline;}
 .terms-list .terms .desc {margin-top: 2.4rem; width: 100%; max-height: 14rem; overflow-y: auto; padding: 2.4rem 2rem; background-color: var(--gray100); border-radius: .4rem;}
 .terms-list .terms .desc > h5 {font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem;}
 .terms-list .terms .desc > p {font-size: 1.4rem; line-height: 1.6;}
 .terms-list .terms table  {margin-top: 2.4rem;}
 .terms-list .terms table td {text-align: left;}
 .terms-list .terms table + table {margin-top: 2.4rem;}

 .join-wrap .certify-wrap {width: 100%;}
 .join-wrap .btn-wrap {margin-top: 6rem; display: flex; align-items: center; justify-content: center; column-gap: .8rem;}
 .join-wrap .btn-wrap button {width: 20rem; height: 6rem; font-size: 1.8rem;}
 
@media screen and (max-width: 767px) {
    .join-wrap {padding: 4rem 2rem;}
   
    .join-wrap .page-title {margin-bottom: 3.2rem;}
    .join-wrap .page-title > h1 {font-size: 2.4rem;}
    
    .join-step {column-gap: 4.8rem; margin-bottom: 3.2rem;}
    .join-step > li {width: 7rem;}
    .join-step > li > div {width: 4.8rem; height: 4.8rem;}
    .join-step > li > div > i {width: 2rem; height: 2rem;}
    .join-step > li > p {font-size: 1.4rem;}
    .join-step > li + li::before {width: 7rem; left: -5.9rem; top: 2.4rem;}
   
    .terms-list {row-gap: 1.6rem;}
    .terms-list input[type="checkbox"] + label > p {font-size: 1.4rem; column-gap: .2rem;}
    .terms-list input[type="checkbox"] + label > p > span {font-size: 1.2rem;}
    .terms-list .all {padding: 2.4rem 0; border-bottom: 1px solid var(--gray200);}
    .terms-list .all input[type="checkbox"] + label {align-items: initial;}
    .terms-list .all input[type="checkbox"] + label > p {flex-flow: column; row-gap: .8rem; align-items: initial;}
    .terms-list .terms .check > a {font-size: 1.2rem;}
    .terms-list .terms .desc {margin-top: 1.2rem; max-height: 12rem; padding: 2rem;}
    .terms-list .terms .desc > h5 {font-size: 1.2rem; margin-bottom: .8rem;}
    .terms-list .terms .desc > p {font-size: 1.2rem;}
    .terms-list .terms table  {margin-top: 1.2rem;}
    .terms-list .terms table + table {margin-top: 1.2rem;}

    .join-wrap .btn-wrap {margin-top: 3.2rem;}
    .join-wrap .btn-wrap button {width: calc((100% - .8rem) / 2); height: 4.8rem; font-size: 1.6rem;}
}

.join-wrap table.info th {text-align: left; padding: 1.6rem;}
.join-wrap table.info td {text-align: left;}
.join-wrap table.info td input {width: 24rem; }
.join-wrap table.info td .flex button {width: 11.2rem; background-color: var(--gray500);}
.join-wrap table.info td input[type="checkbox"] + label {margin-top: 1rem;}
.join-wrap table.info td input[type="checkbox"] + label::before {margin: 0;}
.join-wrap table.info + input[type="checkbox"] + label {margin-top: 2.4rem;}

.flex {display: flex; align-items: center; column-gap: 1.2rem;}

.favor-team {display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1.2rem;}
.favor-team > li input + label::before {content: none;}
.favor-team > li input + label {width: 8rem; height: 8rem; border-radius: .4rem; display: flex; flex-flow: column; align-items: center; justify-content: center; row-gap: .4rem; opacity: 20%; cursor: pointer;}
.favor-team > li input + label > p {color: #fff;}
.favor-team > li input:checked + label {opacity: 100%;}

.favor-team > li input + label.ssg {background-color: #C8102E; box-shadow: 4px 4px 12px 0px rgba(200, 16, 46, 0.20);}
.favor-team > li input + label.kiwoom {background-color: #6C0012; box-shadow: 4px 4px 12px 0px rgba(108, 0, 18, 0.20);}
.favor-team > li input + label.lg {background-color: #960027; box-shadow: 4px 4px 12px 0px rgba(150, 0, 39, 0.20);}
.favor-team > li input + label.kt {background-color: #221E1F; box-shadow: 4px 4px 12px 0px rgba(34, 30, 31, 0.20);}
.favor-team > li input + label.kia {background-color: #05141F; box-shadow: 4px 4px 12px 0px rgba(5, 20, 31, 0.20);}
.favor-team > li input + label.nc {background-color: #004BAF; box-shadow: 4px 4px 12px 0px rgba(0, 75, 175, 0.20);}
.favor-team > li input + label.samsung {background-color: #0066B3; box-shadow: 4px 4px 12px 0px rgba(0, 102, 179, 0.20);}
.favor-team > li input + label.lotte {background-color: #002856; box-shadow: 4px 4px 12px 0px rgba(0, 40, 86, 0.20);}
.favor-team > li input + label.doosan {background-color: #131230; box-shadow: 4px 4px 12px 0px rgba(19, 18, 48, 0.20);}
.favor-team > li input + label.hanwha {background-color: #F37321; box-shadow: 4px 4px 12px 0px rgba(243, 115, 33, 0.20);}

@media screen and (max-width: 767px) {
    .join-wrap table.info td input {width: 100%; }
    .join-wrap table.info td .flex input {flex: 1;}
    .join-wrap table.info td .flex button {width: 8rem;}
    .join-wrap table.info th {padding: 1.2rem; vertical-align: middle;}
    .join-wrap table.info + input[type="checkbox"] + label {margin-top: 1.2rem;}

    .flex {column-gap: .8rem;}

    .favor-team {grid-template-columns: repeat(3, 1fr); grid-gap: 1rem;}
    .favor-team > li input + label {width: 6.8rem; height: 6.8rem; row-gap: .2rem;}
    .favor-team > li input + label > i {width: 3.4rem; height: 3.4rem;}
}

.finish > h2 {font-size: 2.4rem; font-weight: 700; text-align: center;}
.finish > p {font-size: 1.6rem; line-height: 1.6; text-align: center; margin-top: 2.4rem;}
.finish > i {margin: 3.2rem auto 0;}

@media screen and (max-width: 767px) {
    .finish > h2 {font-size: 2rem;}
    .finish > p {font-size: 1.4rem; margin-top: 1.2rem;}
    .finish > i {width: 10rem; height: 10rem;}
}

.notice-login {width: 100%; padding: 5rem 0; background-color: var(--gray100); border-radius: .4rem; display: flex; align-items: center; justify-content: center; flex-flow: column; row-gap: 1.2rem;}
.notice-login > h5 {font-size: 2.4rem; font-weight: 700;}
.notice-login > p {font-size: 1.6rem; font-weight: 500; color: var(--gray500);}
.notice-login > button {margin-top: .8rem; width: 16.8rem; height: 6rem; font-size: 1.8rem;}

@media screen and (max-width: 767px) {
    .notice-login {padding: 4rem 0;}
    .notice-login > h5 {font-size: 1.8rem;}
    .notice-login > p {font-size: 1.4rem;}
    .notice-login > button {width: 12rem; height: 4.4rem; font-size: 1.4rem;}
}

/* 선호 선수 */
.player-tab {width: calc(100% + 6.4rem); margin: 0 -3.2rem 2rem; padding: 0 3.2rem; display: flex; align-items: center; column-gap: 2.8rem; border-bottom: 1px solid var(--gray200); }
.player-tab > li {font-size: 1.4rem; padding-bottom: 1.2rem; font-weight: 500; color: var(--gray400); position: relative; cursor: pointer;}
.player-tab > li.active {color: var(--black); font-weight: 600;}
.player-tab > li.active::before {content: ''; width: 100%; height: .2rem; background-color: var(--black); position: absolute; bottom: -1px; left: 0;}

.player-tab-cont {display: none;}
.player-tab-cont.active {display: block;}

.player-part {margin: 0 auto 2.4rem; display: flex; align-items: center; justify-content: center;}
.player-part > li {width: 16rem; height: 4.4rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--gray200); font-size: 1.4rem; font-weight: 500; color: var(--gray500); cursor: pointer;}
.player-part > li.active {background-color: var(--red50); color: var(--red800); font-weight: 600; border-color: var(--red50);}
.player-part > li:nth-child(1) {border-radius: .4rem 0 0 .4rem; border-right: 0;}
.player-part > li:nth-last-child(1) {border-radius: 0 .4rem .4rem 0; border-left: 0;}

.player-list-wrap {display: none;}
.player-list-wrap.active {display: block;}

.player-list-wrap > div + div {margin-top: 2.4rem;}
.player-list-wrap > div > h6 {font-size: 2rem; font-weight: 700; margin-bottom: 1.6rem;}
.player-list-wrap > div > ul {display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 2.4rem 1.2rem;}
.player-list-wrap > div > ul > li {display: flex; align-items: center; row-gap: .8rem; margin: 0 auto; flex-flow: column;}
.player-list-wrap > div > ul > li .img {width: 10rem; height: 10rem; border-radius: .4rem; background-repeat: no-repeat; background-size: 100%; background-position: top center; display: flex; flex-flow: column; row-gap: .8rem; align-items: center; justify-content: center;}
.player-list-wrap > div > ul > li .info {display: flex; align-items: center; column-gap: .4rem; width: 100%;}
.player-list-wrap > div > ul > li .info > h6 {font-weight: 1.4rem; font-weight: 600;}
.player-list-wrap > div > ul > li .info > p {font-weight: 1.2rem; font-weight: 600; color: var(--gray400);}

@media screen and (max-width: 767px) {
    .player-tab {width: calc(100% + 3.2rem); margin: 0 -1.6rem 2rem; padding: 0 1.6rem; column-gap: 1.4rem;}
    .player-tab > li {font-size: 1.4rem; padding-bottom: 1.2rem; font-weight: 500; color: var(--gray400); position: relative; cursor: pointer;}
    
    .player-part {margin: 0 auto 2rem;}
    .player-part > li {width: 50%; height: 4rem; font-size: 1.2rem;}
    
    .player-list-wrap > div + div {margin-top: 2rem;}
    .player-list-wrap > div > h6 {font-size: 1.6rem; margin-bottom: 1.2rem;}
    .player-list-wrap > div > ul {grid-template-columns: repeat(3, 1fr); grid-gap: 1.2rem .8rem;}
    .player-list-wrap > div > ul > li .img {width: 8rem; height: 8rem;}
    .player-list-wrap > div > ul > li .info > h6 {font-weight: 1.2rem;}
    .player-list-wrap > div > ul > li .info > p {font-weight: 1rem;}
}

/* 24.01.17 수정사항 */
.order-list-table .prod-summary {width: 100%; column-gap: 1rem;}
.order-list-table .prod-summary .desc {width: calc(100% - 8rem - 1rem);}
@media screen and (max-width: 767px) {
    .prod-summary .count-num {margin-top: .6rem;}
}

.coupon-detail {width: 66rem;}

.coupon-desc {border-top: 1px solid var(--black); padding-top: 1.6rem;}
.coupon-desc > div {padding: 3rem; display: flex; flex-flow: column; row-gap: 1rem; border: 1px solid var(--gray200);}
.coupon-desc > div > h6 {font-size: 1.8rem; font-weight: 600;}
.coupon-desc > div > div {display: flex; align-items: center; justify-content: space-between;}
.coupon-desc > div > div > p {font-size: 1.6rem; font-weight: 500; color: var(--gray500);}

.prod-summary-wrap {border-top: 1px solid var(--gray200);}
.prod-summary-wrap .prod-summary {width: 100%; column-gap: 2rem; padding: 2.4rem 0; border-bottom: 1px solid var(--gray200);}
.prod-summary-wrap .prod-summary .desc {width: calc(100% - 8rem - 2rem);}

@media screen and (max-width: 767px) {
    .coupon-detail {width: 90%;}

    .coupon-desc {border-top: 1px solid var(--black); padding-top: 1.6rem;}
    .coupon-desc > div {padding: 1.6rem; row-gap: .4rem;}
    .coupon-desc > div > h6 {font-size: 1.6rem;}
    .coupon-desc > div > div > p {font-size: 1.4rem;}

    .prod-summary-wrap .prod-summary {column-gap: 1rem; padding: 1.6rem 0;}
    .prod-summary-wrap .prod-summary .desc {width: calc(100% - 8rem - 1rem);}
}


/* 24.02.01 수정사항 */
.stock > li {display: flex; align-items: center; column-gap: 1rem; line-height: 1.6;}
.stock > li > h5 {font-size: 1.4rem; color: var(--black); font-weight: 500;}
.stock > li > p {font-size: 1.4rem; color: var(--black); font-weight: 500; flex: 1;}


/* 24. 04.05 */
.pop-cont.img-detail {width: fit-content; height: fit-content; max-width: 80vw; max-height: 80vh; background-color: transparent; border-radius: 0; padding: 0; position: relative;}
.pop-cont.img-detail .ic-close-32 {position: absolute; top: 1.2rem; right: 1.2rem; cursor: pointer;}
.pop-cont.img-detail img {max-height: 80vh;}

.radio-box {border: 1px solid var(--gray100); padding: 2rem; display: flex; flex-flow: column; row-gap: 2rem; margin-top: 2rem;}
.radio-box input + label {align-items: initial;}
.radio-box input + label::before {top: .2rem; position: relative;}
.radio-box input + label > p {font-size: 1.6rem; flex: 1;}

/* 24.04.15 */
.table-desc.pay {color: var(--gray500); line-height: 1.6; word-break: keep-all; background-color: #f4f4f4; padding: 1.6rem;}
.table-desc.pay > h6 {font-size: 1.4rem; font-weight: 600; color: var(--system-blue); line-height: 1.6; margin-bottom: .2rem;}
.table-desc.pay > p {font-size: 1.4rem; line-height: 1.6; word-break: keep-all;}
.table-desc.pay > span {font-size: 1rem; line-height: 1.8; margin-top: 1.6rem; display: block; word-break: keep-all;}

/* 24.05.14 나의 응모내역 */
.my-event-list {display: flex; flex-flow: column; border-top: 1px solid var(--black);}
.my-event-list > li {display: flex; align-items: flex-start; justify-content: space-between; padding: 1.6rem 0; border-bottom: 1px solid var(--gray200);}
.my-event-list > li > p {font-size: 1.2rem; color: var(--gray500);}
.my-event-list > li.link > p {font-weight: 500; color: var(--red800);}
.my-event-list > li > div {display: flex; align-items: center; column-gap: 1.2rem;}
.my-event-list > li > div .img {width: 8rem; height: 8rem; border-radius: .2rem; border: 1px solid var(--gray200); background-repeat: no-repeat; background-size: contain; background-position: center;}
.my-event-list > li > div .info .label-wrap {display: flex; align-items: center; column-gap: .4rem; margin-bottom: 1.6rem;}
.my-event-list > li > div .info > p {font-size: 1.4rem; font-weight: 500; line-height: 1.6;}
.my-event-list > li > div .info > span {display: block; font-size: 1.2rem; color: var(--gray500); line-height: 1.6;}

@media screen and (max-width: 767px) {
    .my-event-list > li {flex-flow: column; row-gap: 2rem; padding: 2rem 0 0;}
    .my-event-list > li > p {width: 100%; height: 4.4rem; display: flex; align-items: center; padding: 0 1.2rem; background-color: var(--gray100);}
    .my-event-list > li > div {align-items: flex-start;}
    .my-event-list > li > div .img {width: 10rem; height: 10rem;}
    .my-event-list > li > div .info .label-wrap {margin-bottom: 1.2rem;}
}


/* nice pay 팝업 스타일 수정 */
#bg_layer {z-index: 9999!important;}
#nice_layer {z-index: 10000!important; top: 50%!important; left: 50%!important; margin-left: -330px;}