html{width: 100%; height: 100%; min-height: 100%; background-color:#f0f1f3; color:#111; font-size: 10px; font-weight: 400; 
    font-family: 'AppleSDGothicNeo', 'sans-serif' !important; letter-spacing: -0.05rem;}
.wrapper{min-height: 100%;}
.num {font-family: "AppleSDGothicNeo", sans-serif !important; color: #576675 !important;}
.num a {font-family: "AppleSDGothicNeo", sans-serif !important; color: #576675 !important;}

.blue {color: #0062E3;}
.red {color: #D91100;}

.btn-top {position: fixed; bottom: 2rem; right: 2rem; z-index: 1; opacity: 0; transition: 0.5s; border-radius: 50%; box-shadow: 0.4rem 0.8rem 0.8rem 0 rgba(0,0,0,0.2); width: 4.8rem; height: 4.8rem; background: #FFF url(../images/top.svg) center no-repeat;}
.btn-top.on {opacity: 1;}
main:has(.full-btn) .btn-top {bottom: 8.8rem;}
.full-btn {width: 100%; padding: 1.6rem 2rem 4.8rem; position: fixed; left: 0; bottom: 0; background-color:#f0f1f3}
.full-btn .close {width: 100%; height: 4.8rem; background-color: #111; border-radius: 1rem; font-size: 1.6rem; font-weight: 700; color: #fff;}

/*---------------------------------------------------------------------------------------*/
/* header */
.header {width: 100%;}
.header .nav {width: 100%; height: 5.6rem; padding: 0 0.4rem; display: flex; align-items: center; justify-content: space-between;}
.header .nav button {width: 4.8rem; height: 4.8rem;}
.header .nav .back {background: url(../images/back.svg) center no-repeat; background-size: 4.8rem;}
.header .nav .close {background: url(../images/close.svg) center no-repeat; background-size: 4.8rem;}
.header .nav .no {background-image: none;}

/* main */
.main section {min-height: calc(100vh - 18.8rem);}
.main section .top {width: 100%; padding: 0 2rem; display: flex; align-items: center; justify-content: center; height: 5.6rem;}
.main section .top li {width: 33.3%; text-align: center;}
.main section .top {border-bottom: 0.1rem solid #cfd4e0;}
.main section .top h3 {padding: 2rem 0 0.4rem; height: 5.6rem;}
.main section .top h3.on {border-bottom: 0.3rem solid #111;}

/* footer */
.footer {padding: 4rem 2rem; margin-top: auto;}
.footer .footer-top {display: flex; align-items: center;}
.footer .footer-top li .list {padding-right: 1.6rem; font-size: 1.2rem; color:#576675;}
.footer .footer-top li:last-child .list {padding-right: 0;}
.footer .footer-top .personal {color:#111 !important;}
.footer .footer-top h6 {display: flex; align-items: center;}
.footer .footer-top .tab::after {content: ''; display: flex; width: 1.6rem; height: 1.6rem; background: url(../images/down-16.svg) center no-repeat; background-size: 1.6rem;}
.footer .footer-top .tab.on::after {content: ''; display: flex; width: 1.6rem; height: 1.6rem; background: url(../images/up-16.svg) center no-repeat; background-size: 1.6rem;}
.footer .footer-tab-content {font-size: 1.2rem; line-height: 1.6rem; color: #576675;}
.footer .footer-tab-content .list {padding-top: 1.6rem; display: none;}
.footer .footer-tab-content .list p {word-break: keep-all;}
.footer .footer-tab-content .list.on {display: block;}
.footer .footer-tab-content .list .call {color: #111 !important;}
.footer .copy-right {font-size: 1.2rem; color:#576675; margin-top: 1.6rem;}

/*------------------------------------------------------------------------------------------------------*/

.contents {padding: 1.6rem 2rem 0 2rem;}

/* 공지 */
.contents .notice {padding: 0.3rem 0 2rem; font-size: 1.3rem; color: #576675;}
.contents .notice li {display: flex;}

/* 총 개수 */
.control {height: 3rem; margin-bottom: 0.7rem; font-weight: 700; color: #576675; display: flex; align-items: center;}
.control h4 {font-weight: 700;}

/* 쿠폰함 */
.coupon-box .list {position: relative; width: 100%; height: 14.4rem; margin-bottom: 2rem; padding: 2rem; display: flex; align-items: center; border-radius: 1rem; background-color: #fff; overflow: hidden;}
.coupon-box .list:last-child {margin-bottom: 0;}
.coupon-box .list .img-box {position: relative; width: 10rem; height: 10rem; margin-right: 1.6rem; border-radius: 1rem; border: 0.1rem solid #ECECEC; overflow: hidden; flex-shrink: 0;}
.coupon-box .list .img-box .product {width: 10rem; height: 10rem;}
.coupon-box .list .info {color: #576675;}
.coupon-box .list .info .title {margin: 0.4rem 0 0.8rem; color: #111; line-height: 2.1rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.coupon-box .list .info .from {margin-top: 0.4rem;}
.coupon-box .list .info .date {color: #008085;}

.coupon-box:has(.list-no) {min-height: calc(100vh - 43rem); display: flex; align-items: center; justify-content: center; flex-direction: column;}
.coupon-box .list-no {text-align: center;}
.coupon-box .list-no img {width: 10rem; height: 10rem; margin-bottom: 3.6rem;}

.opacity-box {position: absolute; top: 0; left: 0; z-index: 1; background-color: rgba(255, 255, 255, 0.7); width: 100%; height: 100%;}

.coupon-box .list .state-box {position: absolute; bottom: 0; right: 0; z-index: 2;} 
.coupon-box .list .state-box img {width: 5.2rem; height: 5.2rem;} 

/* 쿠폰 정보 */
.coupon-detail-box {position: relative; font-size: 0; display: flex; align-items: center; flex-direction: column; padding: 2rem; overflow: hidden; border-radius: 1rem; background-color: #fff;}

.coupon-detail-box .product {width: 20rem; height: 20rem; border-radius: 1rem;}
.coupon-detail-box .brand {margin-top: 1.6rem; color: #576675;}
.coupon-detail-box .title {text-align: center; margin-top: 0.8rem; font-weight: 500; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.coupon-detail-box .barcode {width: 24rem; height: auto; margin-top: 1.6rem;}

.coupon-detail-box .state-box {position: absolute; top: 0; left: 0; z-index: 1; background-color: rgba(255, 255, 255, 0.7); width: 100%; height: 100%;} 
.coupon-detail-box .state-box img {position: absolute; top: 2rem; right: 2rem; z-index: 2; width: 7.8rem; height: 7.8rem;} 

.coupon-info-box {margin: 2rem 0 2.4rem; padding: 1.6rem 2rem; border-radius: 1rem; background-color: rgba(255, 255, 255, 0.5);}
.coupon-info-box .coupon-info {margin: -0.6rem 0;}
.coupon-info-box .coupon-info .list {padding: 0.4rem 0; display: flex; align-items: center; justify-content: space-between; color: #576675;;}
.coupon-info-box .coupon-info .list h4 {color: #111;}
.coupon-info-box .coupon-info .list p {font-size: 1.5rem; color: #111 !important;}

.detail-info-box {padding-top: 2.4rem; border-top: 0.1rem solid #cfd4e0;}
.detail-info-box h3 {font-weight: 700;}
.detail-info-box h5 {margin-top: 1.6rem;}
.detail-info-box p {margin-top: 0.4rem; font-size: 1.3rem; color: #576675;}

/* 개인정보처리방침 */
.privacy section .top li {width: 50%; text-align: center;}

.privacy .tab-content{padding: 2.4rem 2rem 6rem;}
.privacy-info .select-wrapper {margin-bottom: 2.4rem;}
.privacy-info .info h2 {font-size: 1.4rem; font-weight: 400; color: #111; margin-top: 2.4rem;}
.privacy-info .info p {font-size: 1.4rem; line-height: 1.9rem; color: #111; padding-top: 0.4rem;}
.privacy-info .info p:last-child {margin-bottom: 8rem;}
.privacy .btn-top {bottom: 8.8rem;}

.privacy table {border: 1px solid #333; width: 100%; border-collapse: collapse; border-spacing: 0;}
.privacy table tr th {text-align: center;}
.privacy table tr th, .privacy table tr td {border: 0.1rem solid #333; font-size: 1.3rem; word-break: keep-all;}
.privacy table tr th {width: 50%; padding: 0.1rem 0; font-weight: 700; background-color: #a6a6a6;}
.privacy table tr td {padding: 0.4rem 0.8rem;}
.privacy table.center {text-align: center;}


/* 정기점검중, 페이지 에러 */
.error-box  {width: 100%; min-height: calc(100vh - 14.4rem); display: flex; justify-content: center; text-align: center; padding-top: 12rem;}
.error-box .content {width: 33.5rem;}
.error-box .content h2 {font-weight: 500; line-height: 2rem; margin-top: 1.6rem; letter-spacing: -0.05rem; color: #576675; word-break: keep-all;}
.error-box .content .title {color: #111; margin-top: 4.8rem; word-break: keep-all; font-weight: 700; line-height: 2rem;}
.error-box .content img {width: 10rem; height: 10rem;}
.error-box .content .time {font-size: 1.3rem; color: #576675; margin-top: 1.6rem; line-height: 1.6rem;}
.error .btn-top {bottom: 8.8rem;}

/* 팝업 */
.off {height: 100vh; overflow: hidden;}

.popup {width: 100%; position: fixed; top: 0; left: 0; z-index: 10; height: 100vh; display: none; font-size: 0;}
.popup.on {display: block;}
.popup .dim {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 0 2rem;  display: flex; align-items: center; justify-content: center;}
.popup .dim .inner {width: 100%; max-width: 33.5rem; height: auto; border-radius: 1rem; overflow: hidden; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.popup .dim .top {width: 100%;}

.popup .bottom {position: relative; width: 100%; height: 4.8rem; padding: 0 1.8rem; display: flex; align-items: center; justify-content: space-between; background-color: #fff;}
.popup .bottom input[type="checkbox"] {width: 0.5rem; height: 0.5rem; position: absolute; top: 2rem; left: 2rem; z-index: -1;}
.popup .bottom input[type="checkbox"] + label {font-size: 1.5rem; color: #22252a; display: flex; align-items: center; height: 2rem; padding-left: 2.8rem; content: ''; background: url('../images/check-off.svg') left center no-repeat; background-size: 2rem;}
.popup .bottom input[type="checkbox"]:checked + label {background: url('../images/check-on.svg') left center no-repeat; background-size: 2rem;}

.popup .close {font-size: 1.5rem; color: #000; background-color: transparent;}

.popup .alert {background-color: #FFF; border-radius: 1rem; width: 100%; padding: 3rem 2rem 2rem; display: flex; flex-direction: column; justify-content: center; z-index: 11;}
.popup .alert p {font-size: 1.6rem; line-height: 2.1rem; text-align: center; color: #111;}
.popup .alert button {background-color: #111; color: #FFF; height: 4.8rem; border-radius: 1rem; margin-top: 1.9rem;}
/* 20241107 alert popup */

/* 로딩바 */
body:has(.loading-box) {position: relative;}
.loading-box {display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; position: absolute; z-index: 15;}
.loading {width: 8rem; height: 8rem;}

@media (max-width: 360px) {html {font-size: 9px;}}
@media (max-width: 320px) {html {font-size: 8px;}}