/* ios 노치 대응 */ :root{ --ios-safe-top : env(safe-area-inset-top); --ios-safe-bottom : env(safe-area-inset-bottom); } .p-0 {padding: 0 !important;} .m-0 {margin: 0 !important;} .txt-hlight { background: #d2fafa;} input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s; -webkit-transition: background-color 9999s ease-out; -webkit-box-shadow: 0 0 0px 1000px white inset !important; } i.icon-search2::before {display: inline-block; content: ""; width: 23px; height: 25px; background: url(/assets/icons/icon-search.png) no-repeat; background-size: contain;} i.icon-cart::before {display: inline-block; content: ""; width: 23px; height: 25px; background: url(/assets/icons/icon-cart.png) no-repeat 0 1px; background-size: contain;} i.icon-recent::before {display: inline-block; content: ""; width: 22px; height: 23px; background: url(/assets/icons/icon-recent.png) no-repeat 0 1px; background-size: contain;} i.icon-home2::before {display: inline-block; content: ""; width: 23px; height: 25px; background: url(/assets/icons/icon-home.png) no-repeat 0 4px; background-size: contain;} i.icon-thumbs-up::before {display: inline-block; content: ""; width: 13px; height: 16px; background: url(/assets/icons/icon-thumbs-up.png) no-repeat 0 0; background-size: contain;} .intro-container .c1 p {letter-spacing: -2px;} /* .intro-container .c1 p:nth-child(2) {font-weight: 400;} */ .intro-container .c2 {text-align: center;} .intro-container .c2 p {line-height: 26px; margin-bottom: 16px; text-align: left;} .intro-container .c3 .btn {padding-left: 0; padding-right: 0;} .intro-container .c5 .gap-6 {gap: 12px;} .intro-container .c5 a {padding-left: 0; padding-right: 0;} .login-email .container-105 {padding-top: 30px;} .login-email .con-2 {position: relative;} .register-email .header-bar {border: none;} .register-email > form .container {padding-top: 30px;} /* .register-email > form .wrap > div:first-child {border-bottom: 1px solid #ECEEEE99;} */ .register-email > form .wrap > div:first-child .sub {color:#7B8383;} .register-email > form .wrap .form-check-item .title {color:#3F4646; font-size: 18px;} .register-email > form .wrap .form-check-item .title + div {color:#3F4646;} .register-email > form .wrap input[type="checkbox"] {display: none;} .register-email > form .wrap input[type="checkbox"] + label {display: flex; column-gap: 10px; flex-grow: 1;} .register-email > form .wrap input[type="checkbox"] + label .chkbox {display: block; width: 20px; height: 20px; margin-top: 2px; border:1px solid #3c3b3e; border-radius:4px; flex-shrink: 0;} .register-email > form .wrap input[type="checkbox"]:checked + label .chkbox {border-color: #00d0d8;} .register-email > form .wrap input[type="checkbox"]:checked + label .chkbox:before {display:block; content: '\e903'; margin: 1px 0 0 1px; font-family: 'icomoon' !important; font-size: 16px; color:#00d0d8; vertical-align: -2px;} .register-email > form .c1 p:first-child {letter-spacing: -3px;} .register-email > form .c1 .sub {font-size: 15px; margin-bottom: 30px;} .register-email > form .c2 {position: relative;} .register-email > form .c2 input {margin-bottom: 0.7em;} .register-email > form .c2 input::placeholder {letter-spacing: -2px;} .register-email > form .c2 .confirm {display: block; padding-left:8px; line-height: 24px;} /* .register-email > form .c2 .confirm::before {display:inline-block; content: '\27A5'; margin-right: 6px;} */ .register-email > form .c2 .confirm.wrong {color: #f91c46;} .register-email > form .c2 .confirm.well {color: blue;} .register-email > form .c2 #gender ~ .btn {padding-top:1px;} .register-email > form .c3 {margin:70px 0 60px;} .register-email > form .c3 a {border-radius: 8px;} .register-email > form .row .wd-50 {width: 50% !important;} .register-email > form .row .wd-25 {width: 25%;} .register-email > form .foot-btn {margin-bottom: 100px;} .register-email .info-box {background:#eee; border-radius:20px; padding: 15px 20px 1px; word-break: break-all; font-size: 14px; line-height: 22px; margin-bottom: -70px;} .register-email .info-box-button {font-size: 20px;} .register-email .info-box-button.active {transform: rotate(180deg);} .register-member .header-bar {border: none;} .register-member .container {padding-top: 30px;} .register-member .c1 p:first-child {letter-spacing: -3px;} .register-member .c1 .sub {font-size: 15px; margin-bottom: 30px;} .register-member .c2 {position: relative;} .register-member .c2 .confirm {display: block; padding-left:8px; line-height: 24px;} .register-member .c2 .confirm.wrong {color: red;} .register-member .c2 .confirm.well {color: blue;} .register-member .foot-btn {margin-bottom: 100px;} .main-container .main-p-list {margin-bottom: 0;} .main-container .main-p-list h2 {letter-spacing: -2px;} .main-container .main-p-list h2 > span {letter-spacing: -2px;} .main-container .product-card {background:none; border:none;} .main-container .footer-company {width: 100%; padding-bottom: 15px; background:#fff; border-top: 2px solid #09090a;} /* background: #f5f5f5;*/ .main-container .footer-company h3 {height:50px; line-height: 35px; padding: 15px 80px 0; margin: 0; overflow: hidden;} .main-container .footer-company h3 img {width: 34px; height: 100%; margin-right: 10px; float: left;} .main-container .footer-company h3 > span {float: left; font-weight: bold;} .main-container .footer-company h3 p {float: right; margin-bottom: 0; font-size: 12px; color:#3d3d3d;} .main-container .footer-company .company-info-button {width:16px; height:16px; margin-left:2px; margin-bottom: 3px; vertical-align: middle;} .main-container .footer-company .company-info-button.active {transform: rotate(180deg);} .main-container .company-info {margin: 15px 17px 0; color:#3c3b3e;} .main-container .company-info li {display: flex; padding: 6px 0; font-size: 12px;} .main-container .company-info li .tit {width: 30%; color: #808188;} .main-container .company-info li .txt {width: 60%; flex-grow: 2;} .main-container .company-policy {display: block; padding:0 20px 10px; text-align: center; font-size: 12px; color:#999;} .main-container .company-policy > span {font-weight: bold; color:#666; position: relative; margin-left: 12px;} .main-container .company-policy > span::before {background-color: #999;border-radius: 50%;content: "";height: 2px;left: -7px;position: absolute;top: 50%;transform: translateY(-50%);width: 2px;} .main-container .company-policy > p {margin: 15px 0 0; text-align: left;} .main-container .foot-banner {padding-bottom: 0;} .main-container .foot-banner img {margin: 0 auto;} .main-container #blank {line-height: 58px !important; background: #fff;} .container-18 .search-lists .item i {margin-left: auto;} .container-19 .checkbox {vertical-align: middle;} .container-19 + .search-filter .btn-round {min-width: 97px; padding: 3px 5px 1px 1em;} .container-19 + .search-filter .btn-round span {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .container-19 + .search-filter .con-1 {font-size: 13px; padding-left: 20px;} .container-20 .c1 .row > div{background: #fff;} .container-22 .main-visual {position: sticky; top: var(--ios-safe-top);} .container-22 .center .header-drop-down {padding-top:12px;} .container-22 .center .header-drop-down .btn {min-width: 75px; height: 32px; background-color: #FFFFFF80; border:none; gap: 0 9px;} .container-22 .center .header-drop-down .btn i {color:#00B5B5;} .container-22 > .container .item > div:first-child {flex-shrink:0; width:40px;height:40px; margin-top: 8px;} .container-22 .items .item > div:nth-of-type(2) {flex-grow: 1;} .container-22 .items .item > div:nth-of-type(2) .con {width:100%;} .container-22 .items .item > div:nth-of-type(2) .con p:nth-child(1) {margin-bottom: 6px;} .container-22 .items .item > div:nth-of-type(2) .con p:nth-child(2) {color: #3F4646; line-height: 22px; word-break: keep-all;} .container-22 .category_area {bottom:0} .container-22 .category_area h3 {display: flex; width: 100%; height: 27px; justify-content: flex-end; align-items: center;} .container-22 .category_area h3 p {position: absolute; width: 100%; left: 0; margin:0; text-align: center;} .container-22 .category_area .category-grid {padding: 20px 0 10px;display: grid;grid-template-columns: 1fr 1fr 1fr 1fr;row-gap: 18px;} .container-22 .category_area .category-grid a {display: flex;flex-direction: column;align-items: center;} .container-22 .category_area .category-grid img {height: 52px;} .container-22 .category_area .category-grid span {display: block;width: 100%;padding-top: 4px;margin-top: -14%;font-size: 12px;letter-spacing: -0.24px;text-align: center;background-color: #fff;} .container-23 .main-visual {position: sticky; top: var(--ios-safe-top); background: #FAFCFB; z-index: 99;} .container-23 .main-visual .container p, .container-23 .main-visual .container span {letter-spacing: -2px; line-height: 32px;} .container-23 .main-visual .container img {width: 60px;} .container-23 > .container .item {padding:17px 15px;} .container-23 > .container .item.active {border-color: #00B5B5;} .container-23 > .container .item .con p {margin-bottom: 6px; color: #3F4646; word-break: keep-all; line-height: 24px;} .container-23 > .container .item .con p:nth-child(2) {margin-bottom: 3px; color: #7B8383;} .container-23 > .container .item.active .con p:nth-child(2) {color: #00B5B5;} .container-23 > .container .con-4 {position: fixed; left: 0; bottom: var(--ios-safe-bottom); width: 100%;} .container-23 > .container .con-4 span {border-radius: 0;} .container-23 .footer-navigation {display: none;} .container-24 .product-filter .filter-group {gap: 6px;} .container-24 .product-order {top: 10px; height: 68px;} .container-24 .product-order .ac-compare {width: auto;} .container-24 .product-order .ac-compare .btn {padding:1px 8px; font-size: 13px;} .container-24 .product-order .ac-compare.active .btn {border-color: #00B5B5; color: #00B5B5;} .container-24 > .container {overflow: hidden;} .container-24 > .container .product-card.active {border-color: #00B5B5;} .container-24 > .container .product-card.active .p-function-box .active {border-color: #00B5B5; background-color: #e5f8f8; color: #00B5B5;} .container-24 > .container .p-top-box .h5:first-child {font-size: 13px; color: #7B8383;} .container-24 > .container .it_name {word-spacing: 2px; letter-spacing: 0;} .container-24 > .container .p-info-box .p-image {min-width: 120px;} .container-24 > .container .p-info-box .info {min-width: 120px;} .container-24 > .container .p-info-box .info > span {font-size: 12px; color:#7B8383;} .container-24 > .container .p-info-box .info li {line-height: 20px; font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .container-24 > .container .p-info-box .info li::before {display: inline; content: '\22C5';margin-right:5px; font-size: 20px;} .container-24 > .container .p-bottom-box .delivery {width: 36px; height: 36px; background:url("/assets/icons/delivery/ico-무료배송.svg") no-repeat; margin-top: 7px;} .container-24 > .container .p-bottom-box .delivery span {display: inline-block; text-indent: -9999px;} .container-24 .floating-action-button.active span {background-color: #00B5B5;} .container-24 .floating-action-button.active span i {color: #51DEDE;} .container-26 .product-card {background:none; border:none;} .container-26 .recommend-more {font-size: 13px; color: #626A6A;} .container-26 .header-bar {border-color: #ECEEEE; margin-bottom: 15px;} .container-26 .main-img .p-image .icon-box {position: absolute; display: flex; flex-direction: column; top: 11px; left: 11px; gap: 10px;} .container-26 .p-nav {padding:5px 0; background: #fff; position: sticky; top:0; z-index: 2;} /** 수정해야됨 **/ .container-26 .con-1 .a3 .b1 {margin-top: 3px;} .container-26 .con-1 .a3 .b2 {color: #000; font-weight: bold;} .container-26 .con-1 .a3 .b3 {color: #7B8383;} .container-26 .con-2 p:nth-of-type(1) {color: #7B8383;} .container-26 .con-2 p:nth-of-type(2) {color: #3F4646;} .container-26 .price-info .ratio {font-size: 20px;} .container-26 .con-7 {border-bottom: 1px solid #ECEEEE;} .container-26 .con-8 {padding-top: 30px;} .container-26 .con-8 .items:last-child {border-bottom: 1px solid #ECEEEE;padding-bottom: 20px;} .container-26 .con-8 .items .b3 {background: #fff; padding:20px 15px;} .container-26 .con-13 .item:last-child > p {color: #CBD3D3; font-size: 15px;} .container-26 .con-13 .item:last-child > span {width: 71px; height: 27px; font-size: 11px; text-align: center; border-radius: 6px; border: 1px solid #cbd3d3; background: #fff; line-height: 25px; color: #7B8383;} .container-26 .footer-navigation {display: none;} .container-26 ~ #cart_area {bottom:calc(73px + var(--ios-safe-bottom));} .container-26 ~ #cart_area .wrapper {padding-bottom:0;} .container-26 ~ #cart_area .product-buy-choice .con > div {margin-bottom:17px;} .container-26 ~ #cart_area .product-buy-choice {padding-bottom:0;} .container-26 .icon-download {color: #00B5B5;} .container-26 .review-score {margin-bottom: 20px} .container-26 .review-score .con-10 {border-bottom: 1px solid #ECEEEE80} .container-26 .review-score .line {display: block; width: 1px; height: 110px; background:#ECEEEE80;} .container-26 .review-score .a2:last-child .b1 {margin-bottom: 0;} .container-26 .review-score .a2:last-child .b2 img {width: 140px; height: 80px; margin-bottom: 3px;} .container-26 .compare-product.active {position: relative; background: #00B5B5; border-color: #00B5B5; border-radius:5px 5px 0 0; color:#fff;} .container-26 .compare-product.active i {color:#51DEDE;} .container-26 .compare-product.active::after {position: absolute; top: 45px; display: block; content: ""; width:calc(100% + 2px); height: 15px; background: #00B5B5;} .container-26 .compare-box {position: absolute; width:calc(100% - 60px); height: 171px; margin-top: 15px; background: #00B5B5; border-radius:0 6px 10px 10px;} .container-26 .compare-box .con {display:flex; gap: 10px; width:100%;padding: 20px 16px;} .container-26 .compare-box .con .go-compare {display:flex; width: 48px; height: 80px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; background: #fff; border-radius: 4px; color: #00B5B5; text-align: center;} .container-26 .compare-box .con .img-wrap {display: flex; flex-grow: 1; justify-content: space-between; gap: 5px;} .container-26 .compare-box .con .img-box {position: relative; width: 33%; max-width: 80px; height: 80px; display: flex; align-items: center; border-radius: 4px; overflow: hidden; background: #fff;} .container-26 .compare-box .con .img-box .close {position: absolute; top: 0; right: 0; font-size: 23px;} .container-26 .compare-box .btn {position: absolute; bottom: 0; width: 100%; height: 51px; background: #fff; border: 1px solid #00B5B5; border-radius:0 0 6px 6px;} .container-27 .header-bar {margin-bottom: 20px;} .container-27 .con-2 h3, .container-27 .con-3 h3 {font-size: 21px; font-weight: bold;} .container-27 .con-3 .items {margin-top: 20px;} .container-27 .con-3 .items span {color: #7B8383; border-color: #ECEEEE80;} .container-27 .con-5 .a2 {margin-top: 50px;} .container-27 .b3 {background: #fff; padding:20px 0 20px 20px;} .container-29 .con-3 .a2 .icon-plus {font-size: 14px;} .container-29 .con-4 .a2 {position: relative;} .container-29 .con-4 #request_select {justify-content: left;margin-bottom: 1em; padding: 0 1em; font-size: 15px;} .container-29 .con-4 #request_select i {margin-left: auto;} .container-29 .con-4 #request_select.active {border-bottom: 0; border-radius: 10px 10px 0 0; border-color: #00d0d8;} .container-29 .con-4 #request_select.direct {margin-bottom: 0; border-bottom: 0; border-radius: 10px 10px 0 0;} .container-29 .con-4 #request_list {position: absolute; top: 46px; background: #fff; padding: 5px 1em 10px; font-size: 16px; line-height: 34px; border-radius: 0 0 10px 10px; border:1px solid #00d0d8; color: #626A6A; z-index: 2;} .container-29 .con-4 #delivery_content {border-color: #CBD3D3; border-radius: 0 0 10px 10px; font-size: 15px;} .container-29 .con-7 .a2 .btn {min-width: 101px; padding:3px 0 1px;} .container-29 .con-9 .a2 {overflow: hidden;} .container-29 .con-11 .a1 > div {display: flex; align-items: center; gap:0 10px;} .container-29 .con-11 .a1 > span {margin-left: auto; font-size: 12px; padding-bottom: 1px; border-bottom: 1px solid #e3e3e3;} .container-29 .con-11 .a1.con {margin-left: 36px; font-size: 13px; color: #a1a1a1;} .container-29 .con-11 .a1.con .checkbox {width:20px; height: 20px;} .container-29 ~ .pop-up-bottom-layout {margin-bottom: var(--ios-safe-bottom); bottom: 0;} .container-29 ~ .pop-up-bottom-layout .wrapper {max-height: 70%; overflow: scroll; -ms-overflow-style: none; scrollbar-width: none;} .container-29 ~ .pop-up-bottom-layout .wrapper::-webkit-scrollbar {display: none;} .container-29 ~ .pop-up-bottom-layout::after {position: absolute; content: ""; width: 100%; height: var(--ios-safe-bottom); left:0; bottom: calc(0px - var(--ios-safe-bottom)); background: #fff;} .container-47 .product-card {background: none; border: none;} .container-56 .con-2 .items .item .a2 .b2 .c2 {margin-bottom: 0;} .container-56 .con-2 .items .item.active .a2 .b2 .c2 {color: #00B5B5;} .container-56 .con-2 .items .item .a2 .b1 {height:72px;} .container-73 {padding-top: 20px;} .container-75 .delete-account {font-size: 13px; color: #999; border-bottom: 1px solid #999; padding-bottom: 1px;} .container-76 .p-notice {overflow: hidden;} .container-76 .con-5 .row {flex-direction: column; align-items: center; gap: 10px; padding-top: 20px;} .container-81 {padding-top: 20px;} .container-81 .product-card {border: none; background: none;} .search-form-container {position: fixed; top:var(--ios-safe-top) ; z-index: 99;} .footer-fixed-action-bar .favorite {gap: 2px; padding-right: 5px;} .footer-fixed-action-bar .favorite svg {width: 20px; height: 18.35px;} .footer-fixed-action-bar .favorite span {font-size: 15px;} .footer-fixed-action-bar .favorite + div .btn {padding-left: 0; padding-right: 0;} .product-compare-container .overflow-container .h-holder {z-index: 3;} .tickets.active {background-image:url(./images/cupon-ticket-left-active.svg), url(./images/cupon-ticket-right-active.svg);;} .tickets.active .ticket {border-color: #00B5B5;} .tickets.active .ticket .a1 {color: #00B5B5;} .tickets.active .ticket .a1 span {color: #00B5B5;} .tickets .ticket .a1 .icon-download {color: #00B5B5;} .tickets .ticket .a1.disabled i, .tickets .ticket .a1.disabled span {color:#CBD3D3} .p-image .card-badge {height: 16px !important; border-bottom: none !important;} .swiper-pagination {display: none;} .btnClear {position: absolute; width: 44px; height: 44px; right: 10px; margin: 3px 0; border: none; background: url("/assets/icons/btnClear.svg"); background-size: contain; background-repeat: no-repeat;} .top-btn-area {width: 90px; height: 90px; position: fixed; bottom: 68px; right: 0;} .top-btn-area .top-btn {display: block; width: 50px; height: 50px; position: absolute; top: 20px; left: 20px;} .modal.msg_cart {top:auto; bottom: calc(73px + var(--ios-safe-bottom)); padding-bottom: 20px; align-items:end; overflow: hidden; z-index: 9999;} .modal.msg_cart .modal-container {padding: 15px; bottom: -100px;} .modal.msg_cart .modal-content {display: flex; padding: 0; align-items: center;} .modal.msg_cart .modal-content span {padding:0 10px;} .modal.msg_cart .modal-content span:last-child {margin-left: auto; font-size: 13px;} .safe-header {position: fixed; top: 0; width: 100%; height: var(--ios-safe-top); background: #fff; z-index: 99;} .safe-header + .vue-container {padding-top: var(--ios-safe-top);} .footer-navigation, .footer-fixed-action-bar, .floating-action-button {bottom:var(--ios-safe-bottom);} .container-39 .floating-action-button {padding-bottom: var(--ios-safe-bottom);} .footer-navigation::after {position: absolute; content: ""; width: 100%; height: var(--ios-safe-bottom); top:51px; background: #fff;} .footer-fixed-action-bar::after {position: absolute; content: ""; width: 100%; height: var(--ios-safe-bottom); top:73px; background: #fff;} .floating-action-button .action-button > span::after {position: absolute; content: ""; width: 100%; height: var(--ios-safe-bottom); top:51px; background: #fff;} #blank {padding-bottom: var(--ios-safe-bottom);} #topBtn {bottom: calc(80px + var(--ios-safe-bottom)) !important;} #reviewBtn {bottom: calc(130px + var(--ios-safe-bottom)) !important;} .scrollDisable {overflow: hidden;} /* 2025-03-13 리뉴얼-메인페이지 */ .renew1 {background: #fff;} .renew1 .header-bar {border-bottom: 1px solid #e7e8f0; background: none;} .renew1 .header-bar .left span {color: #000;} .renew1 .header-bar .left i {font-size: 28px;} .renew1 .header-bar .right span {color: #000;} .renew1 .header-bar.search-form-container {border-bottom:none;} .renew1.main-container .main-visual {padding-top: 12px;} .renew1.main-container .main-visual::before {background: #fff;} .renew1.main-container .main-visual .visual {flex-direction: row; justify-content: flex-start; align-items: center; gap: 5px; padding:8px 20px 15px;} .renew1.main-container .main-visual .visual .logo {position: static; height: 24px;} .renew1.main-container .main-visual .visual span {color:#00d0d8; font-size: 18px; font-weight: 600;} .renew1.main-container .main-visual .tab-menu { display: flex; padding: 0 20px; text-align: center; align-items: center; border-bottom: 1px solid #e7e8f0;} .renew1.main-container .main-visual .tab-menu div { flex: 1; padding: 10px 0 8px; font-size: 18px; font-weight: 600; color: #808188; } .renew1.main-container .main-visual .tab-menu .active {padding-bottom: 6px; border-bottom: 2px solid #000; color: #00d0d8; } .renew1 .banner-wrap .swiper-pagination {display: block;} .renew1.main-container .main-visual .banner-wrap {padding-bottom: 30px; overflow:hidden;} .renew1.main-container .main-visual #main-banner {overflow: visible;} .renew1.main-container .main-visual #main-banner .swiper-pagination {bottom: -20px;} .renew1.main-container .main-visual #main-banner .swiper-pagination span {width: 13px; height: 5px; border-radius: 5px; background: #c8c9d1; margin: 0 3px; opacity: 1;} .renew1.main-container .main-visual #main-banner span.swiper-pagination-bullet-active {background: #00d0d8;} .renew1.main-container .main-visual .category {padding: 0;} .renew1.main-container .main-visual .category > div {margin-bottom: 35px; padding: 0 17px; position: relative;} .renew1.main-container .main-visual .category > div .more-btn {position: absolute; top: 2px; right: 10px; display: block; width: 28px; height: 28px; line-height: 23px; text-align: center; font-size: 28px; font-weight: bold; color: #00d0d8;} .renew1.main-container .main-visual .category .category-grid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr; padding:12px 0 10px;} .renew1.main-container .main-visual .category .category-grid a {justify-content: flex-end; gap: 3px;} .renew1.main-container .main-visual .category .category-grid img {height: 48px;} .renew1.main-container .main-visual .category .category-grid span {color: #000;} .renew1.main-container .main-visual .category .user_cate h2 {margin: 0 ;} .renew1.main-container .main-visual .category .ingre_cate {padding:0 0 30px 17px;} .renew1.main-container .main-visual .category .ingre_cate .ingredient {display: block; padding: 8px 12px 6px; color: #000; border: 1px solid #c8c9d1; border-radius: 18px; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} .renew1 .scroll_box {display: flex; overflow-x: auto; gap: 10px;} .renew1 .scroll_box li {padding: 5px 0; flex-shrink: 0; color: #000;} .renew1 .scroll_box li.active {color: #00d0d8;} .renew1 .scroll_box li:last-of-type {margin-right: 17px;} .renew1 .scroll_box::-webkit-scrollbar {display: none;} .renew1 .container, .renew1 .container-block {padding-left: 17px; padding-right: 17px;} .renew1 .container-left {padding-left: 17px;} .renew1 #ranking-menu li {padding: 8px 2px; margin-right: 10px; font-weight: bold;} .renew1 #ranking-item {margin: 20px 0 5px;} .renew1 .product-card {gap: 10PX; background: none; border: none;} .renew1 .product-card.row {flex-direction: row; justify-content: flex-start;} .renew1 .product-card .card-badge {position: absolute; top: -20px; left: 0; font-size: 11px; color: #808188; z-index: 2;} .renew1 .product-card.row .p-image {max-width: 121px; margin-bottom: 8px; position: relative;} .renew1 .product-card .p-image .ranking {position: absolute; top: 5px; left: 5px; width: 30px; line-height: 17px; padding: 3px 0 0; background-color: rgb(25, 213, 220, 0.8); border-radius: 16px; color: #fff; font-weight: bold; text-align: center; z-index: 2;} .renew1 .product-card .p-image .img-box { border-radius: 12px; border-color: #f6f6fe; overflow: hidden;} .renew1 .product-card .info {display: flex; flex-direction: column; gap: 2px;} .renew1 .product-card .info .brand {color: #808188; margin: 0; font-size: 11px;} .renew1 .product-card .info .name {height: 39px; color: #3c3b3e; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .renew1 .product-card .info .score {position: relative; height: 18px; font-size: 14px;} .renew1 .product-card .info .score .num {padding-left: 20px; letter-spacing: 0;} .renew1 .product-card .info .score .num::before {display: inline-block; content: "\2605"; color: #edad19; font-size: 16px; position: absolute; top: -1px; left: 0;} .renew1 .product-card .info .score .num:empty:before {content: none;} .renew1 .product-card .info .score .count {color: #c8c9d1; letter-spacing: 0;} .renew1 .product-card .info .price {font-size: 16px; letter-spacing: 0;} .renew1 .product-card .info .price .per {color: #f91c46; letter-spacing: 0;} .renew1 .product-card .info .price .num {color: #3c3b3e;} .renew1 .product-card .info .price .num strong {color: #000; font-weight: 600; letter-spacing: 0;} .renew1 .product-card .info .tag {margin-top: 3px;} .renew1 .product-card .info .tag span {float: left; margin:0 4px 5px 0; padding: 3px 5px 2px; font-size: 12px; border-radius: 5px;} .renew1 .product-card .info .tag .best {background: #e5fafb; color: #00d0d8;} .renew1 .product-card .info .tag .free_dvr {background: #f3f4ff; color: #3c3b3e;} .renew1 .product-card .info .tag .new {background: #eefbe5; color: #56d93c;} .renew1 .product-card .info .tag .special {background: #fff4dc; color: #ff7800;} .renew1 .product-card .info .tag .discount {background: #ffeff2; color: #f91c46;} .renew1 .product-card .info .tag .lowest {background: #fef1ff; color: #f16df6;} .renew1 #suggest-menu {margin: 10px 0 15px;} .renew1 #suggest-menu .scroll_box {gap: 25px;} .renew1 .main-p-list .sub_banner {border-radius: 12px; overflow: hidden; margin-bottom: 32px;} .renew1 #wellness-contents {display: flex; flex-direction: column; gap: 25px; margin-bottom: 30px;} .renew1 #wellness-contents img {border-radius: 17px;} .renew1 #wellness-contents .tit {margin: 5px 5px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .renew1.main-container .footer-company h3 {width: 140px; height: auto; line-height: 30px; padding: 0; margin: 0 auto;} .renew1.main-container .footer-company h3 p {float: none; text-align: center; font-size: 15px; letter-spacing: 0; color: #000;} .renew1.main-container .company-policy > p {margin: 0; line-height: 20px; text-align: center; word-break: keep-all;} .renew1 .company-link {display: flex; justify-content: center; margin: 15px 0; gap: 25px; font-size: 14px; color: #000;} .renew1 .company-link > * {padding: 6px 0;} .renew1 .company-link > span {position: relative;} .renew1 .company-link > span::after {background-color: #c8c9d1; content: ""; width: 1px; height: 12px; position: absolute; top: 8px; right: -14px;} .renew1 .company-link > span:last-child:after {content: none;} .renew1 .company-link.link-icon {gap: 15px; margin: 20px 0 0;} .renew1 .company-link.link-icon a {width: 40px;} /* 리뉴얼-상품 리스트 */ .renew1.container-24 .header-bar {border-bottom: none;} .renew1.container-24 .product-filter {padding: 0 17px; height: auto; border-bottom: 1px solid #e7e8f0;} .renew1.container-24 .product-filter .filter-group {padding: 0;} .renew1.container-24 .product-filter .filter-group .filter-badge {color: #808188; font-size: 14px; padding: 2px 6px 8px;} .renew1.container-24 .product-filter .filter-group .filter-badge.active {color: #00d0d8; background: none; border-bottom: 2px solid #000;} .renew1.container-24 .product-order {top: 0; height: auto; justify-content: flex-end; gap: 20px; padding: 12px 17px 15px;} .renew1.container-24 .product-order .ac-order {width: auto; height: auto; margin-right: auto; position: relative;} .renew1.container-24 .product-order .ac-order::before {display: inline-block; content: "\21C5"; color: #1f1f22; font-size: 14px; position: absolute; top: 5px; left: 2px;} .renew1.container-24 .product-order .ac-order #search_order {width: auto; border: none; padding: 6px 20px 6px 16px; appearance: none; background: #fff; font-size: 13px; color: #000;} .renew1.container-24 .product-order .ac-compare {height: auto; margin-left: initial;} .renew1.container-24 .product-order span {color: #000; font-size: 13px;} .renew1.container-24 .product-tag {margin-bottom: 15px;} .renew1.container-24 .product-tag .scroll_box li {padding: 6px 12px; border: 1px solid #e7e8f0; border-radius: 16px; background: #fff; font-size: 13px;} .renew1.container-24 .product-tag .scroll_box li.active {border-color: #00d0d8; background-color: #00d0d8; color: #fff;} .renew1.container-24 .list-wrap {padding: 20px 0; margin: 0 17px; border-bottom: 1px solid #f6f6fe;} .renew1.container-24 .product-card {margin: 0;} .renew1 .list-wrap.badge {padding-top: 40px;} .renew1 .list-wrap.soldout .p-image::after {display: flex; content: "일시 품절"; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: rgb(0, 0, 0, 0.3); border-radius: 12px; z-index: 2; font-size: 17px; color: #fff; align-items: center; justify-content: center;} .renew1 .list-wrap.soldout .info {opacity: 0.5;} .renew1 .p-detail-box .show-btn {display: flex; justify-content: center; align-items: center; font-size: 13px; color: #000; margin: 10px 0 0;} .renew1 .p-detail-box .show-btn i {font-size: 20px;} .renew1 .p-detail-box .show-box {margin-top: 10px;} .renew1 .p-detail-box .show-box > div {display: flex; gap: 20px; font-size: 13px;} .renew1 .p-detail-box .show-box > div:first-child {margin-bottom: 10px;} .renew1 .p-detail-box .show-box .tit {flex-shrink: 0; color: #808188; padding-left: 4px; position: relative;} .renew1 .p-detail-box .show-box .tit::before {display: block; content: ""; width: 1px; height: calc(100% - 3px); background: #c8c8d4; position: absolute; top: 1px; left: 0;} .renew1 .p-detail-box .show-box .txt {letter-spacing: 0; color: #3c3b3e; line-height: 17px;} .renew1 .p-detail-box .default-box {margin-top: 10px; padding-left: 3px; border-left: 1px solid #c8c8d4;} .renew1 .p-detail-box .default-box p {font-size: 13px; color: #808188; line-height: 15px; margin-bottom: 5px;} .renew1 .p-content-box {margin-top: 10px; padding-left: 4px; position: relative;} .renew1 .p-content-box::before {display: block; content: ""; width: 1px; height: calc(100% - 6px); background: #c8c8d4; position: absolute; top: 1px; left: 0;} .renew1 .p-content-box > div::after {display: block; content: ""; clear: both;} .renew1 .p-content-box > div p {width: 50%; float: left; margin-bottom: 5px; font-size: 13px; color: #808188;} /* 리뉴얼-상품 상세페이지 */ .renew1.container-26 .main-img .p-image .card-badge {padding: 0; border: none; color: #808188;} .renew1.container-26 .main-img .p-image .img-box {border-radius: 12px; overflow: hidden;} .renew1.container-26 .con-1 {margin-bottom: 30px;} .renew1.container-26 .con-1 .a1 {margin-bottom: 3px;} .renew1.container-26 .con-1 .a3 {margin-bottom: 8px;} .renew1.container-26 .con-1 .a3 .b1 {margin-top: 0;} .renew1.container-26 .con-1 .a3 .b2 {color: #3c3b3e; font-weight: normal;} .renew1.container-26 .con-1 .a3 .b3 {color: #c8c9d1; letter-spacing: 0;} .renew1.container-26 .con-1 .a4 {margin-bottom: 8px; color: #808188;} .renew1.container-26 .con-1 .a5 {margin-bottom: 8px; font-size: 22px; display: flex; align-items: center; gap: 5px;} .renew1.container-26 .con-1 .a5 .per {color: #f91c46; letter-spacing: 0;} .renew1.container-26 .con-1 .a5 .price {color: #3c3b3e;} .renew1.container-26 .con-1 .a5 .price strong {color: #000; font-weight: 600; letter-spacing: 0;} .renew1.container-26 .con-1 .a5 .desc {color: #00d0d8; font-size: 15px; margin-left: auto;} .renew1.container-26 .con-1 .a6::after {display: block; content: ""; clear: both;} .renew1.container-26 .con-1 .a6 span {float: left; margin:0 4px 5px 0; padding: 3px 5px 2px; font-size: 12px; border-radius: 5px;} .renew1.container-26 .con-1 .a6 .best {background: #e5fafb; color: #00d0d8;} .renew1.container-26 .con-1 .a6 .free_dvr {background: #f3f4ff; color: #3c3b3e;} .renew1.container-26 .con-1 .a6 .new {background: #eefbe5; color: #56d93c;} .renew1.container-26 .con-1 .a6 .special {background: #fff4dc; color: #ff7800;} .renew1.container-26 .con-1 .a6 .discount {background: #ffeff2; color: #f91c46;} .renew1.container-26 .con-1 .a6 .lowest {background: #fef1ff; color: #f16df6;} .renew1.container-26 .con-3 > div:nth-of-type(2) {border-bottom: solid 1px #ECEEEE;} .renew1.container-26 .con-3 > div:nth-of-type(3) {display: flex; align-items: center; justify-content: space-between; padding: 15px 20px;} .renew1.container-26 .con-3 > div > div {display: flex; flex-direction: column; gap: 3px;} .renew1.container-26 .con-3 > div p {margin-bottom: 2px; font-size: 15px; color: #000;} .renew1.container-26 .con-3 > div span {font-size: 13px; color: #3c3b3e;} .renew1.container-26 .con-3 > div .tit span {display: flex; align-items: center; gap: 6px;} .renew1.container-26 .con-3 > div .tit span::before {display: inline-block; content: ""; width: 2px; height: 2px; background: #3c3b3e; border-radius: 2px;} .renew1.container-26 .con-3 > div .num {text-align: right;} .renew1.container-26 .con-3 > div .num > * {letter-spacing: 0;} .renew1.container-26 .con-3 .btn {padding: 10px 10px 8px 14px; border: 1px solid #e7e8f0; border-radius: 18px; font-size: 14px; color: #3c3b3e;} .renew1.container-26 .con-3 .btn .icon-download {color: #000; padding-left: 2px;} .renew1.container-26 .con-3 .price .num p {color: #fa3c5e;} .renew1.container-26 .con-3 .price .tit p {display: flex; align-items: center; gap: 3px;} .renew1.container-26 .con-3 .price .tit i {color: #00d0d8; font-size: 16px;} .renew1.container-26 .con-3 > div.point {border-bottom: none;} .renew1.container-26 .con-3 .point .tit span {color: #808188;} .renew1.container-26 .con-3 .point .tit span::before {background-color: #808188;} .renew1.container-26 .con-4 .row .btn {border-radius: 99px; color: #000;} .renew1.container-26 .con-4 .row .icon-favorite {font-size: 12px;} .renew1.container-26 .con-4 .row .compare-product.active {border-radius: 23px 23px 0 0;} .renew1.container-26 .compare-box {width: 336px;} .renew1.container-26 .compare-box .con .img-box img {object-fit: contain;} .renew1.container-26 .con-5 {margin: 30px 0 20px; padding: 20px 17px 10px; background: #f6f6fe;} .renew1.container-26 .con-5 .tit {color: #808188;} .renew1.container-26 .con-5 .txt p {color: #3c3b3e; margin-bottom: 5px;} .renew1.container-26 .con-5 .txt span {display: block; line-height: 22px; color: #808188;} .renew1.container-26 .con-5 .txt .bar {display: inline-block; width: 1px; height: 12px; background: #c8c9d1; margin: 0 4px 0 6px;} .renew1.container-26 .con-6 .product_sum {padding: 30px 17px; background: #fff;} .renew1.container-26 .con-6 .product_sum p {margin-bottom: 3px; color: #3c3b3e;} .renew1.container-26 .certify {display: flex; height: 60px; gap: 20px;} .renew1.container-26 .certify img {object-fit: contain;} .renew1.container-26 .certify div {display: flex; flex-direction: column; justify-content: center; gap:5px} .renew1.container-26 .certify p {margin-bottom: 0; color: #3fadae; font-size: 13px;} .renew1.container-26 .p-nav {padding: 0; border-top-color: #09090a; top: calc(var(--ios-safe-top) - 2px);} .renew1.container-26 .p-nav > div {padding: 15px; color: #808188;} .renew1.container-26 .p-nav > div.color-main {border-bottom: 2px solid #000;} .renew1.container-26 .p-nav > div p {margin: 0; float: left;} .renew1.container-26 .p-nav > div span {margin-left: 2px;} .renew1.container-26 .con-8 .a1 h2 span {font-size: 21px; color: #00d0d8;} .renew1.container-26 .con-8 .b2 {color: #000;} .renew1.container-26 .con-8 .b4 .c1 {display: flex; justify-content: center; align-items: center; color: #000; cursor: pointer;} .renew1.container-26 .con-8 .b4 .c1 i {font-size: 23px;} .renew1.container-26 .con-8 .b4 .c2 {font-size: 14px; color: #3c3b3e;} .renew1.container-26 .con-8 .b4 .c2 > p {line-height: 20px;} .renew1.container-26 .con-8 .b4 .c2 div {display: flex; flex-direction: column; gap: 5px; position: relative; padding-left: 5px;} .renew1.container-26 .con-8 .b4 .c2 div:first-of-type {margin-bottom: 15px;} .renew1.container-26 .con-8 .b4 .c2 div::before {display: block; content: ""; width: 1px; height: calc(100% - 5px); background: #c8c8d4; position: absolute; top: 3px; left: 0;} .renew1.container-26 .con-8 .b4 .c2 div p {margin-bottom: 0; color: #808188;} .renew1.container-26 .con-8 .b4 .c2 div span {display: flex; gap: 8px; padding-left: 8px;} .renew1.container-26 .con-8 .b4 .c2 div span::before {display: block; content: ""; flex-shrink: 0; width: 2px; height: 2px; background: #3c3b3e; border-radius: 2px; margin-top: 8px;} .renew1.container-26 .review-score .review_write {margin-top: 30px; color: #000;} .renew1.container-26 .review-score .review_write span {color: #000;} .renew1.container-26 .con-10 .a1 .b1 {font-family: "SUIT-Medium", sans-serif; font-size: 18px; font-weight: normal; color: #3c3b3e; margin-bottom: 0;} .renew1.container-26 .con-10 .a1 .b2 {font-family: "SUIT-ExtraBold", sans-serif; font-size: 48px; color: #3c3b3e; margin-bottom: 0;} .renew1.container-26 .con-10 .a1 .b4 {font-family: "SUIT-Medium", sans-serif; font-size: 13px; color: #3c3b3e; margin: 5px 0 0;} .renew1.container-26 .con-10 .a2 {justify-content: space-between;} .renew1.container-26 .con-10 .a2 .b1 {font-family: "SUIT-Medium", sans-serif; font-size: 18px; font-weight: normal; color: #3c3b3e; margin-bottom: 10px;} .renew1.container-26 .con-11 {justify-content: space-between;} .renew1.container-26 .con-11 .a1 {display: flex; align-items: center; gap: 2px; font-size: 14px; color: #000;} .renew1.container-26 .con-11 .a1 i {font-size: 16px;} .renew1.container-26 .con-11 .a2 {position: relative;} .renew1.container-26 .con-11 .a2::before {display: inline-block; content: "\21C5"; color: #1f1f22; font-size: 14px; position: absolute; top: 5px; left: -8px;} .renew1.container-26 .con-11 .a2 #review_order {width: auto; border: none; padding: 6px 17px 6px 8px; appearance: none; background: #fff; font-size: 13px; color: #000;} .renew1.container-26 .con-12 {position: relative; margin-bottom: 0;} .renew1.container-26 .con-12 .review_more {width: 100%; position: absolute; left: 0; bottom: 60px;} .renew1.container-26 .con-12 .review_more::before {content: ""; display: block; width: 100%; height: 40px; position: absolute; left: 0; top: -30px; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 80%);} .renew1.container-26 .con-12 .review_more::after {content: ""; display: block; width: 100%; height: 70px; position: absolute; left: 0; bottom: -60px; background: #fff;} .renew1.container-26 .con-12 .review_more .btn {position: relative; z-index: 2; font-size: 16px; color: #000;} .renew1.container-26 .con-12 .review_more .btn i {color: #808188;} .renew1.container-26 .con-12 .items .item {margin-bottom: 20px; border-bottom: 1px solid #f6f6fe;} .renew1.container-26 .con-12 .items .item .a1 {align-items: end; margin-bottom: 12px;} .renew1.container-26 .con-12 .items .item .a1 .b2 {padding-bottom: 5px;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c1 {display: flex; align-items: center; margin-bottom: 5px;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c1 img {margin-right: 10px; object-fit: contain;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c1 span {font-size: 15px; margin-right: 4px; color: #808188;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c2 {display: flex; align-items: center; gap: 20px; color: #000;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c2 span:first-child {position: relative;} .renew1.container-26 .con-12 .items .item .a1 .b2 .c2 span:first-child::after {content: ""; display: block; width: 1px; height: 14px; background-color: #ccc; position: absolute; top: 4px; right: -11px;} .renew1.container-26 .con-12 .items .item .a1 .b3 {padding-bottom: 5px; gap: 18px; color: #000;} .renew1.container-26 .con-12 .items .item .a1 .b3 .edit {position: relative;} .renew1.container-26 .con-12 .items .item .a1 .b3 .edit::after {content: ""; display: block; width: 1px; height: 14px; background-color: #ccc; position: absolute; top: 4px; right: -11px;} .renew1.container-26 .con-12 .items .item .review_tag {display: flex; align-items: center; gap: 5px; margin-bottom: 10px;} .renew1.container-26 .con-12 .items .item .review_tag span {padding:1px 3px; border: 1px solid; border-radius: 4px; font-size: 12px;} .renew1.container-26 .con-12 .items .item .review_tag .ingest {color: #00d0d8; border-color: #00d0d8;} .renew1.container-26 .con-12 .items .item .review_tag .real {color: #f91c46; border-color: #f91c46;} .renew1.container-26 .con-12 .items .item .review_tag .non-ingest {color: #3c3b3e; border-color: #3c3b3e;} .renew1.container-26 .con-12 .items .item .a2 {height: auto; max-height: 70px; line-height: 24px; letter-spacing: 0;} .renew1.container-26 .con-12 .items .item .a3 .b1 {background: #f6f6fe; border-radius: 10px; border-color: #c8c9d1; overflow: hidden;} .renew1.container-26 .con-12 .items .item .a4 .b1 {color: #000; gap: 22px;} .renew1.container-26 .con-12 .items .item .a4 .b2 .btn {gap: 5px; border: 1px solid #e7e8f0; color: #000;} .renew1.container-26 .con-12 .items .item .a4 .b1 span:not(:first-of-type) {padding: 0; position: relative;} .renew1.container-26 .con-12 .items .item .a4 .b1 span:not(:first-of-type)::before {content: ""; display: block; width: 1px; height: 14px; background-color: #ccc; position: absolute; top: 4px; left: -10px;} .renew1.container-26 .con-12 .items .item > .b3 {display: inline-block; margin-bottom: 10px; color: #00d0d8;} .renew1.container-26 .con-13 .items {background: none;} .renew1.container-26 .con-13 .items .item {border: none;} .renew1.container-26 .con-13 .items .item span {color:#c8c9d1;} .renew1.container-26 .con-13 .items .item i {width: 16px; margin-right: 0; color: #000; font-size: 21px;} .renew1.container-26 .recommend-more {width: 23px; font-size: 26px; color: #000;} .renew1.container-26 .swipe_list_more .btn {font-size: 16px; color: #000;} .renew1.container-26 .swipe_list_more .btn i {color: #808188;} /* 리뉴얼-로그인 */ .renew1.intro-container {position: static; flex-direction: column;} .renew1.intro-container .wrap {margin: auto auto 20px;} .renew1.intro-container .c1 > p {text-align: center; margin-bottom: 8px; font-size: 17px;} .renew1.intro-container .c1 > div {display: flex; align-items: center; justify-content: center; gap: 15px;} .renew1.intro-container .c1 > div p {color: #00d0d8;} .renew1.intro-container .c1 img {margin: 0; height: 45px;} .renew1.intro-container .c2 {margin: 110px 0 0;} .renew1.intro-container .c2 img {display: inline-block; height: 30px;} .renew1.intro-container .c3 {padding: 0 17px;} .renew1.intro-container .c3 .btn {font-size: 16px; border-radius: 8px;} .renew1.intro-container .c3 .btn-kakao {background-color: #fce800;} .renew1.intro-container .c3 .btn-naver {background-color: #2db400;} .renew1.intro-container .c3 .btn::before {display: inline-block; content: ""; background-size: contain; background-repeat: no-repeat;} .renew1.intro-container .c3 .btn-kakao::before { width: 22px; height: 20px; margin-right: 20px; background-image:url(./icons/1/btn-login-kakao2.png);} .renew1.intro-container .c3 .btn-naver::before { width: 32px; height: 32px; margin-right: 3px; background-image:url(./icons/1/btn-login-naver2.png);} .renew1.intro-container .c4 .row {justify-content: center; column-gap: 25px; height: 55px;} .renew1.intro-container .c5 .row {justify-content: center; align-items: center;} .renew1.intro-container .c5 a {color: #000; padding: 5px;} .renew1.intro-container .c5 .bar {display: block; width: 1px; height: 14px; margin-left: 3px; background: #c8c9d1;} .renew1.intro-container .footer {display: flex; width: 100%; flex-direction: column; align-items: center;} .renew1.intro-container .footer p {display: inline-block; margin: 0; padding: 5px; color: #000;} .renew1.intro-container .footer span {color: #808188;} .renew1.intro-container .footer div {padding: 10px 0;} .renew1.intro-container .footer div:last-child {width: 100%; padding: 10px 0; border-top: 1px solid #e7e8f0; text-align: center;} /* 리뉴얼-회원가입 */ .renew1.member-terms-container .c1 {color: #000; font-size: 24px;} .renew1.member-terms-container.terms-2 .form-text-item {margin-bottom: 24px; position: relative;} .renew1.register-email > form .container:last-of-type {padding-top:15px; margin-top: 20px; border-top: 1px solid #e7e8f0;} .renew1.register-email > form .c2 input {margin-bottom: 0; border-radius: 10px;} .renew1.register-email > form .c2 .confirm {font-size: 13px; position: absolute;} .renew1.register-email > form .wrap .line {padding-left: 12px; position: relative;} .renew1.register-email > form .wrap .line::before {display: block; content: ""; position: absolute; width: 1px; height: calc(100% - 48px); min-height: 202px; background: #c8c8d4; top: 12px; left: 0;} .renew1.register-email > form .wrap .form-check-item .title {font-size: 16px;} .renew1.register-email > form .wrap .form-check-item .title span {color: #808188; font-size: 15px; font-weight: normal; letter-spacing: 0;} .renew1.register-email > form .wrap .form-check-item .title .essential {color: #00d0d8;} .renew1.register-email > form .wrap .form-check-item:last-of-type .title {padding-right: 26px; word-break: keep-all;} .renew1.register-email > form .wrap input[type="checkbox"] + label .chkbox {margin-top: 0;} .renew1.member-terms-container .form-check-item i {color: #3c3b3e; font-size: 23px;} .btnReroll {position: absolute; top: 10px; right: 55px; padding: 5px; border: none; background: none; color: #00d0d8; font-size: 15px; font-weight: bold;} /* 리뉴얼-sns 회원가입 */ .renew1.register-member #mb_email {border-color: #e7e8f0; background-color: #f6f6fe;} .renew1.register-member > form .c4 {display: flex; margin: 5px 0 0; justify-content: space-between; align-items: center;} .renew1.register-member > form .c4 p {margin: 0; color: #000;} .renew1.register-member > form .c4 .btn {border-radius: 8px;} /* 리뉴얼-이메일 로그인 */ .renew1.login-email .con-2 .input {border-radius: 10px;} .renew1 .container-105 .con-3 .btn {border-radius: 10px;} .renew1 .container-105 .con-4 {justify-content: center; border: none; margin: 0;} .renew1 .container-105 .con-4 .a1 {color: #000;} .renew1 .container-105 .con-4 .a1 span {color: #808188;} /* 리뉴얼-비교하기 선택 */ .renew1 .product-card .compare-check-box {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0, 0, 0, 0.7); z-index: 3; border-radius: 12px;} .renew1 .product-card .compare-check-box > div {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #fff} .renew1 .product-card .compare-check-box i {font-size: 36px; font-weight: bold;} .renew1 .product-card .compare-check-box p {margin: 0;} .renew1 .product-card.active .compare-check-box > div {color: #00d0d8;} .container-24 .floating-action-button {bottom: 0; z-index: 11;} .floating-action-button .compare-box {width: 350px; margin: 0 auto; padding-bottom: var(--ios-safe-bottom); background: #fff; border: 2px solid #00d0d8; border-bottom: none; border-radius:10px 10px 0 0;} .floating-action-button .compare-box > p {margin: 20px 10px 0; color: #000; font-weight: bold;} .floating-action-button .compare-box .con {display:flex; gap: 10px; width:100%;padding: 20px 16px;} .floating-action-button .compare-box .con .go-compare {display:flex; width: 48px; height: 80px; flex-direction: column; justify-content: center; align-items: center; gap: 5px; background: #10b7bd; border-radius: 10px; color: #fff; text-align: center;} .floating-action-button .compare-box .con .img-wrap {display: flex; flex-grow: 1; justify-content: space-between; gap: 5px;} .floating-action-button .compare-box .con .img-box {position: relative; width: 33%; max-width: 80px; height: 80px; display: flex; align-items: center; border: 1px solid #c8c9d1; border-radius: 10px; overflow: hidden; background: #f6f6fe;} .floating-action-button .compare-box .con .img-box img {object-fit: contain;} .floating-action-button .compare-box .con .img-box .close {position: absolute; top: 5px; right: 5px; color: #fff; font-size: 11px; background: rgb(0,0,0,0.7); padding: 2px 5px 0; border-radius: 10px;} .floating-action-button .compare-box .con .img-box .close i {font-weight: bold;} .floating-action-button .compare-box .btn {position: absolute; bottom: 0; width: 100%; height: 51px; background: #fff; border: 1px solid #00B5B5; border-radius:0 0 6px 6px;} /* 리뉴얼-비교하기 페이지 */ .renew1.container-38 .header-bar {border: none;} .renew1.container-38 .fix-wrap {position: fixed; width: 100%; top: var(--ios-safe-top); background: #fff;} .renew1 .container.tab {padding: 7px 17px 0; border-bottom: 1px solid #e7e8f0; display: flex; text-align: center;} .renew1 .container.tab p {width: 50%; margin: 0; padding-bottom: 7px; color: #808188; font-weight: bold;} .renew1 .container.tab p.active {border-bottom: 2px solid #000; color: #00d0d8;} .renew1.container-38 .fix-product {display: flex; width: 100%; padding: 15px 5px; border-bottom: 1px solid #000; box-shadow: 0px 3px rgb(0, 0, 0, 0.1);} .renew1.container-38 .fix-product > div {display: flex; flex: 1; align-items: center; padding: 0 12px; gap: 8px; border-right: 1px solid #c8c9d1;} .renew1.container-38 .fix-product > div:last-of-type {border-right: none;} .renew1.container-38 .fix-product img {object-fit: contain; width: 34px; height: 34px; border: 1px solid #f6f6fe; border-radius: 4px;} .renew1.container-38 .fix-product .name {margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: #000;} .renew1.container-38 .add-product {padding: 30px 17px;} .renew1.container-38 .add-product a {width: 100%; height: 120px; display: flex; flex-direction: column; justify-content: center; background: #f8f8fe; border: 1px dashed #d3d4da; border-radius: 12px; text-align: center; color: #10b7bd;} .renew1.container-38 .add-product span {display: block; font-size: 42px; font-weight: bold;} .renew1.container-38 .com-product {display: flex; padding: 30px 5px; margin-bottom: 20px; border-bottom: 1px solid #e7e8f0;} .renew1.container-38 .com-product > div {display: flex; flex-direction: column; flex: 1; padding: 0 12px; align-items: center; gap: 6px; border-right: 1px solid #c8c9d1;} .renew1.container-38 .com-product > div:last-of-type {border-right: none;} .renew1.container-38 .com-product img {height: auto; border: 1px solid #f6f6fe; border-radius: 10px; margin-bottom: 4px;} .renew1.container-38 .com-product p {width: 100%; margin: 0;} .renew1.container-38 .com-product .brand {font-size: 13px; color: #808188;} .renew1.container-38 .com-product .name {color: #000; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px;} .renew1.container-38 .com-product .purchase {padding: 10px 0; text-align: center; color: #fff; background: #10b7bd; border-radius: 10px; margin-top: auto;} .renew1.container-38 h3 {font-weight: bold; margin-bottom: 20px; padding: 0 17px;} .renew1.container-38 .list-wrap {margin-bottom: 15px;} .renew1.container-38 .list-wrap p {margin: 0; color: #000;} .renew1.container-38 .list-wrap > div {display: flex;} .renew1.container-38 .list-wrap .tit {justify-content: space-between; align-items: center; gap: 10px; padding: 0 17px;} .renew1.container-38 .list-wrap .tit p {white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .renew1.container-38 .list-wrap .tit span {font-size: 12px; color: #18171a; white-space: nowrap;} .renew1.container-38 .list-wrap .con {padding: 10px 5px; min-height: 100px;} .renew1.container-38 .list-wrap .con > div {display: flex; flex-direction: column; flex: 1; padding: 10px 12px; border-right: 1px solid #c8c9d1; text-align: center;} .renew1.container-38 .list-wrap .con > div:last-of-type {border-right: none;} .renew1.container-38 .list-wrap .con span {color: #808188; font-size: 13px;} .renew1.container-38 .list-wrap .con .best {color: #00d0d8; font-size: 14px; padding-top: 5px;} .renew1.container-38 .com-information .list-wrap .con {min-height: auto;} .renew1.container-38 .com-information .list-wrap .con > div {gap: 2px;} /* 리뉴얼-비교하기 추가 */ .renew1.container-39 .header-bar {border: none;} .renew1.container-39 .con-1 {margin-top: 10px;} .renew1.container-39 .con-1 .list-wrap {padding: 20px 0; border-bottom: 1px solid #f6f6fe;} .renew1.container-39 .con-1 .list-wrap.badge {padding-top: 40px;} .renew1.container-39 .con-1 .product-card {margin-bottom: 0;} .renew1.container-39 .floating-action-button {bottom: 0; padding-bottom: 0;} /* 한알랭킹 */ .container-109 .main-p-list {margin-bottom: 30px;} .container-109 .main_cate {margin-top: 20px;} .container-109.main-container .main-visual .category .category-grid {grid-template-columns: 1fr 1fr 1fr 1fr;} .container-109 .container {position: relative;} .container-109 .container .more-btn {position: absolute; top: 2px; right: 10px; display: block; width: 28px; height: 28px; line-height: 23px; text-align: center; font-size: 28px; font-weight: bold; color: #00d0d8;} /* 한알랭킹-카테고리별 */ .container-110 .header-bar {border: none;} .container-110 .ranking-category {position: relative; display: flex; flex-direction: row; align-items: center; background-color: #fff; padding-left:17px; height: auto; border-bottom: 1px solid #e7e8f0;} .container-110 .ranking-category .cate_wrap {flex-grow: 1; position: relative; display: flex; width: 100%; overflow-x: auto; scrollbar-width: none; gap: 25px; padding: 0;} .container-110 .ranking-category .cate_wrap span {display: inline-flex; align-items: center; justify-content: center; flex-grow: 1; height: 28px; letter-spacing: -1px; line-height: 1; white-space: nowrap; font-size: 14px; padding: 2px 0 8px;} .container-110 .ranking-category .cate_wrap span.active {color: #00d0d8; background: none; border-bottom: 2px solid #000;} .container-110 .ranking-category .cate_wrap span:last-of-type {margin-right: 17px;} .container-110 .cate-detail {margin: 10px 0 20px;} .container-110 .cate-detail .scroll_box {gap: 30px;} .container-110 .update-date {margin: 0; font-size: 13px; text-align: right; color: #c8c9d1;} .container-110 .list-wrap {padding: 20px 0; border-bottom: 1px solid #f6f6fe;} .container-110 .list-wrap:first-child {padding-top: 20px;} .container-110 .list-wrap:last-child {border-bottom: none;} .container-110 .list-wrap .product-card {margin: 0;} .container-110 .ranking-info {margin: 10px 0 20px;} .container-110 .product-card .p-image .ranking.medal {height: 50px; top: 0; text-indent: -9999px; border-radius: 0; background-color: transparent; background-repeat: no-repeat; background-size: contain;} .container-110 .product-card .p-image .ranking.best-0 {background-image: url(../assets/icons/icon-rank-medal-0.png);} .container-110 .product-card .p-image .ranking.best-1 {background-image: url(../assets/icons/icon-rank-medal-1.png);} .container-110 .product-card .p-image .ranking.best-2 {background-image: url(../assets/icons/icon-rank-medal-2.png);} .container-110 .product-card .p-image .ranking.best-3 {background-image: url(../assets/icons/icon-rank-medal-3.png);} /* 리뉴얼-검색창 */ .search-container .header-bar {background: #00d0d8; gap: 0; padding: 6px 20px 6px 10px; border-bottom: none;} .search-container .header-bar .left {margin-right: 10px;} .search-container .header-bar .center {background: #fff; border-radius: 10px 0 0 10px;} .search-container .header-bar .header-search-form {height: 100%;} .search-container .header-bar .header-search-form > input {height: 100%; padding: 0 6px; background: none; border-radius: 10px 0 0 10px;} .search-container .header-bar .right {height: 100%; padding-right: 5px; align-items: center; background: #fff; border-radius: 0 10px 10px 0;} .search-container .list-wrap {padding: 20px 0; border-bottom: 1px solid #f6f6fe;} .search-container .list-wrap:first-child {padding-top: 20px;} .search-container .list-wrap:last-child {border-bottom: none;} .search-container .list-wrap .product-card {margin: 0;} .renew1 .container-20 {margin-top: 62px; padding: 0;} .renew1 .container-20 > .container:first-child {padding-top: 20px;} /* .renew1 .container-20 .c1 {position: relative;} */ .search-container .container-20 .c2 .d2 {gap: 6px 10px;} .search-container .container-20 .c2 .product-list {gap: 0;} .search-container .search_tab {display: flex; width: 100%; gap: 30px; padding: 0 17px; border-bottom: 1px solid #e7e8f0; position: fixed; top: calc(62px + var(--ios-safe-top)); background: #fff; z-index: 3;} .search-container .search_tab p {margin: 0; padding: 10px 0 8px; font-weight: bold; color: #808188;} .search-container .search_tab p.active {color: #00d0d8; border-bottom: 2px solid #000;} .search-container .search_empty {padding: 81px 0 40px; margin-bottom: 20px; text-align: center; border-bottom: 1px solid #000;} /* 리뉴얼-footer navbar */ .renew1 .footer-navigation {height: 58px; border-top: 1px solid #000; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);} .renew1 .footer-navigation::after {top: 57px;} .renew1 .footer-navigation > div {gap: 3px; color: #000;} .renew1 .footer-navigation > div:nth-child(1) img {padding-top: 1px;} .renew1 .footer-navigation > div:nth-child(3) img {height: 27px;} .renew1 .footer-navigation .basket {position: relative;} .renew1 .footer-navigation .basket_cnt {width: 16px; height: 16px; background: #00d0d8; border-radius: 50%; text-align: center; opacity: 0.9; color: #fff; position: absolute; top: -3px; right: 3px; font-family:"SUIT-Thin", sans-serif; line-height: 17px; font-size: 10px; letter-spacing: 0;} /* 리뉴얼-카테고리 */ .container-111 .header-bar {border-bottom: none;} .container-111 .item {margin-bottom: 40px;} .container-111 .item .main_cate {display: flex; align-items: center; gap: 8px; color: #000;} .container-111 .item .main_cate img {height: 25px; margin-left: 10px;} .container-111 .item .main_cate p {margin: 0; font-size: 20px; font-weight: bold; flex: 1;} .container-111 .item .main_cate i {font-size: 20px;} .container-111 .item .sub_cate {margin: 20px 18px 20px 43px;} .container-111 .item .sub_cate::after {display: block; content: ""; clear: both;} .container-111 .item .sub_cate p {width: 50%; float: left; color: #000;} /* 리뉴얼-카테고리-서비스 */ .container-111 .category-service {display: grid; gap: 18px; padding: 12px 0 10px; grid-template-columns: 1fr 1fr 1fr 1fr;} .container-111 .category-service a {display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;} .container-111 .category-service img {height: 48px;} .container-111 .category-service span {display:block; width:100%; padding-top:4px; font-size:12px; letter-spacing:-0.24px; text-align:center; color: #000;} /* 나에게 맞는 영양제 찾기 */ .container-112 .header-bar {border-bottom: none;} .container-112 .category {display: grid; gap: 18px; padding: 12px 0 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .container-112 .category div {display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;} .container-112 .category img {height: 48px; filter: grayscale(100%);} .container-112 .category div.active img {filter: none;} .container-112 .category span {display:block; width:100%; padding-top:4px; font-size:12px; letter-spacing:-0.24px; text-align:center; color: #000;} .container-112 .con {margin-bottom: 40px; color: #000;} .container-112 .con > p {font-weight: bold; font-size: 16px;} .container-112 .con .list span {display: inline-block; padding: 10px 20px; margin: 0 5px 20px 0; font-size: 14px; border: 1px solid #c8c9d1; border-radius: 21px; background: #fff;} .container-112 .con .list .active {border-color: #00d0d8; background: #00d0d8; color: #fff;} .container-112 .sub_cate_wrap {padding: 10px 0 20px 17px; border-bottom: 1px solid #e7e8f0;} .container-112 .sub_cate_wrap .sub_cate {display: block; padding: 10px 15px; border: 1px solid #c8c9d1; border-radius: 21px; font-size: 14px; color: #000; background: #fff;} .container-112 .sub_cate_wrap .sub_cate.active {border-color: #00d0d8; background: #00d0d8; color: #fff;} .container-112 .product-order {position: relative; display: flex; flex-direction: row; align-items: center; top: 0; height: auto; justify-content: flex-end; gap: 20px; padding: 12px 0 15px;} .container-112 .product-order .ac-order {margin-right: auto; position: relative;} .container-112 .product-order .ac-order::before {display: inline-block; content: "\21C5"; color: #1f1f22; font-size: 14px; position: absolute; top: 5px; left: 2px;} .container-112 .product-order .ac-order #search_order {width: auto; border: none; padding: 6px 20px 6px 16px; appearance: none; background: #fff; font-size: 13px; color: #000;} .container-112 .product-order span {color: #000; font-size: 13px;} .container-112 .product-tag {margin-bottom: 15px;} .container-112 .product-tag .scroll_box li {padding: 6px 12px; border: 1px solid #e7e8f0; border-radius: 16px; background: #fff; font-size: 13px;} .container-112 .product-tag .scroll_box li.active {border-color: #00d0d8; background-color: #00d0d8; color: #fff;} .container-112 .list-wrap {padding: 20px 0; border-bottom: 1px solid #f6f6fe;} .container-112 .product-card {margin: 0;} .container-112 #sub_cate_select {bottom: 0;} .container-112 #sub_cate_select h3 {display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px;} .container-112 #sub_cate_select .con {margin-bottom: 20px;} .container-112 #sub_cate_select .con .list span {padding: 6px 12px; margin: 0 5px 8px 0; font-size: 13px;} .container-112 .floating-action-button {bottom: 0;} .container-112 .floating-action-button .con {margin-bottom: 0;} /* 최근 본 상품 */ .renew1.container-81 {padding-top: 0;} .renew1.container-81 .header-bar {border: none;} .renew1.container-81 .product-control {position: relative; display: flex; align-items: center; top: 0; height: auto; justify-content: space-between; padding: 12px 0 15px;} .renew1.container-81 .product-control span {font-size: 14px;} .renew1.container-81 .product-control .edit {color: #3c3b3e; flex: 1;} .renew1.container-81 .product-control .edit .ck-wrap {display: flex; align-items: center; justify-content: space-between; gap: 20px;} .renew1.container-81 .product-control .edit .ck-wrap > span {color: #000;} .renew1.container-81 .product-control .edit input {display: none;} .renew1.container-81 .product-control .edit label {display: flex; align-items: center; gap: 7px; flex-grow: 1;} .renew1.container-81 .product-control .edit .chkbox {display: flex; width: 20px; height: 20px; margin-top: 2px; border:1px solid #3c3b3e; border-radius:4px; flex-shrink: 0;} .renew1.container-81 .product-control .edit input:checked + label .chkbox {background: #00d0d8; border-color: #00d0d8;} .renew1.container-81 .product-control .edit input:checked + label .chkbox::after {display:block; content: '\e903'; margin: 1px 0 0 1px; font-family: 'icomoon' !important; font-size: 16px; color:#fff;} .renew1.container-81 .product-control .detail {display: flex; gap: 20px; color: #000;} .container-81 .list-wrap {padding: 20px 0; border-bottom: 1px solid #f6f6fe;} .container-81 .product-card {margin: 0;} .container-81 .recent-item-check {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 1px solid #3c3b3e; border-radius: 12px; text-indent: -9999px; z-index: 3;} .container-81 .recent-item-check > div {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;color: #00d0d8;} .container-81 .recent-item-check i {font-size: 36px; font-weight: bold;} .container-81 .recent-item-check p {margin: 0;} .container-81 .active .recent-item-check {background: rgb(0, 0, 0, 0.7); text-indent: 0;} .container-81 .floating-action-button {bottom: 0;} /* 할인특가 */ .special_price .sub_menu {border-bottom: 1px solid #e7e8f0;} .special_price .sub_menu .scroll_box {gap: 15px;} .special_price .sub_menu .scroll_box li {padding:5px 5px 10px; color: #808188;} .special_price .sub_menu .scroll_box .active {color: #00B5B5; border-bottom: 2px solid #000;} .special_price.renew1 .product-filter {padding: 20px 0 0 17px;} .special_price.renew1 .product-filter::after {display: none;} /* 쿠폰 */ .renew1.container-76 .header-bar {border-bottom: none;} .renew1 .container.sub_tab {padding: 10px 17px; border-bottom: 1px solid #e7e8f0; display: flex; text-align: center; justify-content: space-around;} .renew1 .container.sub_tab p {margin: 0; padding: 0 10px;} .renew1 .container.sub_tab p.active {color: #00d0d8;} .renew1.container-76 .p-notice .title {font-size: 18px; font-family:"SUIT-SemiBold", sans-serif; font-weight: normal;} .renew1.container-76 .p-ul-list li {padding: 0; display: flex; gap: 8px; color: #3c3b3e;} .renew1.container-76 .p-ul-list li::before {display: none;} .renew1.container-76 .con-4 .a1 {overflow: hidden;} .renew1.container-76 .con-4 .a1:last-child {border-bottom: 1px solid #e7e8f0; padding-bottom: 10px;} .renew1.container-76 .tickets {border: 2px solid #00d0d8; border-radius: 10px; background-image: none; margin-bottom: 20px; padding: 0; box-shadow: none; position: relative;} .renew1.container-76 .tickets::before {content: ""; display: block; width: 20px; height: 20px; border: 2px solid #00d0d8; border-radius: 50%; position: absolute; top: 50%; left: -10px; margin-top: -10px; background: #fff;} .renew1.container-76 .tickets::after {content: ""; display: block; width: 20px; height: 20px; border: 2px solid #00d0d8; border-radius: 50%; position: absolute; top: 50%; right: -10px; margin-top: -10px; background: #fff;} .renew1.container-76 .tickets .ticket {height: auto; border: none; margin: 0; flex-direction: column; align-items: flex-start; background: none;} .renew1.container-76 .tickets .ticket .a1 {width: 100%; margin: 0; padding: 10px 0; border: none; background: #00d0d8; border-radius: 0 0 5px 5px;} .renew1.container-76 .tickets .ticket .a1 span {color: #fff;} .renew1.container-76 .tickets .ticket .a2 {width: 100%; padding: 20px 25px;} .renew1.container-76 .tickets .ticket .a2 .c1 {margin-bottom: 5px; color: #00d0d8; font-family:"SUIT-Light", sans-serif;} .renew1.container-76 .tickets .ticket .a2 .c1 span {color: #00d0d8; font-family:"SUIT-SemiBold", sans-serif;} .renew1.container-76 .tickets .ticket .a2 .c2 {margin-bottom: 5px; color: #3c3b3e; font-family:"SUIT-SemiBold", sans-serif;} .renew1.container-76 .disabled .tickets {border-color: #808188;} .renew1.container-76 .disabled .tickets::before {border-color: #808188;} .renew1.container-76 .disabled .tickets::after {border-color: #808188;} .renew1.container-76 .disabled .tickets .ticket .a1 {background: #808188; border-radius: 0 0 7px 7px;} .renew1.container-76 .disabled .tickets .ticket .a1 span {color: #fff;} .renew1.container-76 .con-5 {margin-bottom: 30px;} .renew1.container-76 .con-5 .a1 {border-bottom: 1px solid #e7e8f0; padding-bottom: 30px;} /* 장바구니 */ .renew1 .container-56 input[type="checkbox"] {display: none;} .renew1 .container-56 .con-1 label {display: flex; gap: 5px;} .renew1 .container-56 .con-1 .chkbox {position: static;} .renew1 .container-56 .chkbox {display: block; width: 20px; height: 20px; margin-top: 2px; border: 1px solid #3b3b3d; border-radius: 4px; background: #fff; position: absolute; top: 8px; left: 8px; z-index: 2;} .renew1 .container-56 input[type="checkbox"]:checked + label .chkbox {background: #00d0d8; border-color: #00d0d8;} .renew1 .container-56 input[type="checkbox"]:checked + label .chkbox::before {display: block; content: '\e903'; margin: 1px 0 0 1px; font-family: 'icomoon' !important; font-size: 16px; color: #fff; vertical-align: -2px;} .renew1 .container-56 .product-card {margin-bottom: 0;} .renew1 .container-56 .product-card:last-of-type {border-bottom: none;} .renew1 .container-56 .product-card .p-image {max-width: 82px;} .renew1 .container-56 .product-card .p-image .img-box {border-color: #c7c9d1;} .renew1 .container-56 .product-card {gap: 20px;} .renew1 .container-56 .product-card .info {height: 82px; gap: 0; justify-content: space-between;} .renew1 .container-56 .con-2 .items .item {padding: 0; border: none; border-bottom: 1px solid #f6f6fe;} .renew1 .container-56 .con-2 .items .number-control {align-items: flex-end; margin-bottom: 10px;} .renew1 .container-56 .con-2 .items .number-control > .wrap {gap: 0; font-size: initial;} .renew1 .container-56 .con-2 .items .number-control .d2 {min-width: 38px; color: #000; text-align: center;} .renew1 .container-56 .con-2 .items .number-control i {margin: 0; padding: 3px; font-size: 16px; font-weight: 600; color: #000; border: 1px solid #adadb5; border-radius: 5px;} .renew1 .container-56 .con-2 .items .cart_empty {display: flex; flex-direction: column; align-items: center; gap: 30px; margin-top: 40px;} .renew1 .container-56 .con-3 {border: 2px solid #00d0d8; border-radius: 10px; padding: 15px 15px 20px;} .renew1 .container-56 .con-3 .h2 {padding-bottom: 5px; border-bottom: 1px solid #e8e8e8;} .renew1 .container-56 .con-3 .total {padding-top: 15px; margin-top: 10px; border-top: 1px solid #000;} /* 배송지 추가 */ .renew1 .container-44 input {border-radius: 10px;} .renew1 .container-44 .con-2 .tit {display: block; font-size: 14px; margin-bottom: 5px; color: #3c3b3e;} .renew1 .container-44 .con-2 .addr_btn {padding:3px 0 1px; border: 1px solid #adadb5; color: #000;} .renew1 .container-44 .con-2 .readonly {background: #f6f6fe; border-color:#e7e7ef; color: #808188;} .renew1 .container-44 .con-1 .checkbox {border-color:#3b3b3d; width: 20px; height: 20px;} .renew1 .container-44 .con-1 .checkbox.active {border-color:#00d0d8; background: #00d0d8;} .renew1 .container-44 .con-1 .checkbox.active svg {fill: #fff;} /* 주문하기 */ .renew1.container-29 input {border-radius: 10px;} .renew1.container-29 .tit {display: block; font-size: 14px; margin-bottom: 5px; color: #3c3b3e;} .renew1.container-29 .con-2 .row {align-items: center;} .renew1.container-29 .con-2 .row p {font-size: 18px;} .renew1.container-29 .con-3 .a1 {align-items: baseline;} .renew1.container-29 .con-3 .a1 span {padding: 6px 10px; margin-right: -10px; color: #00d0d8; font-size: 15px; font-weight: 500; cursor: pointer;} .renew1.container-29 .con-3 .b1 .addr_btn {padding:3px 0 1px; border: 1px solid #adadb5; color: #000;} .renew1.container-29 .con-3 .b1 .readonly {background: #f6f6fe; border-color:#e7e7ef; color: #808188;} .renew1.container-29 .con-3 .b2 {display: flex; gap: 10px; align-items: center;} .renew1.container-29 .con-3 .b2 .checkbox {border-color:#3b3b3d; width: 20px; height: 20px;} .renew1.container-29 .con-3 .b2 .checkbox.active {border-color:#00d0d8; background: #00d0d8;} .renew1.container-29 .con-3 .b2 .checkbox.active svg {fill: #fff;} .renew1.container-29 .con-3 .a2 {padding-bottom: 15px;} .renew1.container-29 .con-3 .a3 {padding: 10px 0 15px;} .renew1.container-29 .con-3 .a3 .b1 span:first-of-type {color: #000; font-size: 17px; font-weight: 500;} .renew1.container-29 .con-3 .a3 .b1 .btn {color: #00d0d8; border-color: #00d0d8; padding: 3px 7px 1px; height: 22px;} .renew1.container-29 .con-3 .a3 .b2 p {color: #3c3b3e;} .renew1.container-29 .con-3 .a3 .b3 span {color: #808188;} .renew1.container-29 .con-5 h2 span {font-size: 16px; font-weight: normal; margin-left: 10px;} .renew1.container-29 .product-card .p-image {max-width: 82px;} .renew1.container-29 .product-card .p-image .img-box {border-color: #c7c9d1;} .renew1.container-29 .product-card {gap: 20px; margin-bottom: 0;} .renew1.container-29 .product-card .info {height: 82px; gap: 0; justify-content: space-between; flex: 1;} .renew1.container-29 .product-card .info .qty {float: right;} .renew1.container-29 h2.row {align-items: center;} .renew1.container-29 h2 .sub_txt {margin-bottom: 0; font-size: 15px; font-weight: normal;} .renew1.container-29 .con-7 .a2 {align-items: flex-start;} .renew1.container-29 .con-7 .a2 > div {display: flex; align-items: center; gap: 5px;} .renew1.container-29 .con-7 .a2 > div p {font-size: 18px; color: #000;} .renew1.container-29 .con-8 {border: 2px solid #00d0d8; border-radius: 10px; padding: 15px 15px;} .renew1.container-29 .con-8 h2 {padding-bottom: 10px; border-bottom: 1px solid #e8e8e8;} .renew1.container-29 .con-8 .a2 p {margin-bottom: 6px; color: #3c3b3e;} .renew1.container-29 .con-8 .total {padding-top: 15px; margin-top: 10px; border-top: 1px solid #000;} .renew1.container-29 .con-8 .total .b2 span {margin-right: 2px;} .renew1.container-29 .con-9 .a1 h2 {margin-bottom: 5px;} .renew1.container-29 .con-9 .a2 {overflow: visible;} .renew1.container-29 .con-9 .pay_list {padding: 10px 0; border-bottom: 1px solid #f6f6fe; position: relative;} .renew1.container-29 .con-9 .pay_list .od_settle_case {display: flex; width: auto !important; margin: 0; padding: 10px 0; align-items: center; gap: 10px;} .renew1.container-29 .con-9 .pay_list .radio {display: block; width: 25px; height: 25px; border: 1px solid #3c3b3e; border-radius: 50%;} .renew1.container-29 .con-9 .pay_list .active .radio {border-color: #00d0d8; border-width: 7px;} .renew1.container-29 .con-9 .pay_list .icon {width: 30px;} .renew1.container-29 .con-9 .pay_list .icon-pay-card {width: 26px; margin: 0 2px;} .renew1.container-29 .con-9 .pay_list .icon-pay-phone {width: 18px; margin: 0 6px;} .renew1.container-29 .con-9 .pay_list .name {flex: 1; margin-left: 5px; color: #000;} .renew1.container-29 .con-9 .pay_list .pay_event {display: flex; flex-direction: column; gap: 3px; position: absolute; right: 50px;} .renew1.container-29 .con-9 .pay_list .pay_event span {display: flex; align-items: center; gap: 4px; font-size: 12px; color: #000; font-family: "SUIT-Medium", sans-serif;} .renew1.container-29 .con-9 .pay_list .pay_event span::before {content: ""; display: block; width: 12px; height: 12px; background-size: contain; background-repeat: no-repeat;} .renew1.container-29 .con-9 .pay_list .pay_event span.kakao::before {background-image: url(/assets/icons/pay/icon-pay-kakao-mini.png);} .renew1.container-29 .con-9 .pay_list .pay_event span.naver::before {background-image: url(/assets/icons/pay/icon-pay-naver-mini.png);} .renew1.container-29 .con-9 .pay_list i {margin: 0; color: #000; font-size: 20px;} .renew1.container-29 .con-9 .od_card_select {margin-left: 35px;} .renew1.container-29 .con-9 .od_card_select > div {position: relative; margin-bottom: 12px;} .renew1.container-29 .con-9 .od_card_select > div:last-of-type {margin-bottom: 2px;} .renew1.container-29 .con-9 .od_card_select .card_select {width: 100%; padding: 0 5px 0 10px; border: 1px solid #3c3b3e; color: #000; justify-content: left;} .renew1.container-29 .con-9 .od_card_select .card_select span {flex: 1;} .renew1.container-29 .con-9 .od_card_select .card_select.active {border-bottom: 0; border-radius: 10px 10px 0 0; border-color: #00d0d8;} .renew1.container-29 .con-9 .od_card_select .card_list {position: absolute; width: 100%; height: 200px; overflow-y: scroll; top: 51px; background: #fff; padding: 10px 1em; font-size: 16px; line-height: 34px; border-radius: 0 0 5px 5px; border:1px solid #00d0d8; color: #626A6A; z-index: 2;} .renew1.container-29 .con-9 .od_payment_select {margin-left: 80px;} .renew1.container-29 .con-9 .od_payment_select .row {margin: 15px 0;} .renew1.container-29 .con-9 .od_payment_select .payment_list {display: flex; flex-direction: column; padding: 17px 0; border: 1px solid #c8c9d1; border-radius: 10px; align-items: center; flex: 1; gap: 6px;} .renew1.container-29 .con-9 .od_payment_select .payment_list.active {border-color: #00d0d8;} .renew1.container-29 .con-9 .od_payment_select .payment_list .name {margin-left: 0; font-size: 13px; color: #3c3b3e;} .renew1.container-29 .con-9 .od_payment_select .payment_list img {height: 20px;} .renew1.container-29 .con-9 .od_payment_select .payment_list .txt {font-size: 11px; color: #808188;} .renew1.container-29 .con-9 .pay_event_info {margin-bottom: 5px;} .renew1.container-29 .con-9 .pay_event_info span {display: block; font-size: 12px; color: #3c3b3e; word-break: keep-all;} .renew1.container-29 .con-11 {position: relative;} .renew1.container-29 .con-11::after {content: ""; display: block; width: 1px; height: 60px; background: #c8c8d4; position: absolute; left: 0; bottom: 3px;} .renew1.container-29 .con-11 .a1:first-of-type {margin-bottom: 25px; color: #000;} .renew1.container-29 .con-11 .a1.con {margin-left: 10px; color: #3c3b3e;} .renew1.container-29 .con-11 .a1 .color-main {font-size: 12px;} .renew1.container-29 .con-11 .a1 > span {border-bottom: none; padding-bottom: 0; font-size: 18px;} .renew1.container-29 .con-11 .checkbox {width: 20px; height: 20px; border-color: #3c3b3e;} .renew1.container-29 .con-11 .checkbox.active {border-color: #00d0d8;} .renew1.container-29 .orderer {border-top: 12px solid #eee; border-bottom: 12px solid #eee; padding: 15px 17px;} .renew1.container-29 .orderer .con-1 {margin-bottom: 0;} .renew1.container-29 .orderer .con-1 .b1 {align-items: end; color: #3c3b3e;} .renew1.container-29 .orderer.active .con-1 .b1 span {color: #fff;} .renew1.container-29 .orderer .con-1 .b1 i {font-size: 18px; margin: 0;} .renew1.container-29 .orderer .con-2 {display: none; margin-top: 20px;} .renew1.container-29 .orderer.active .con-2 {display: block;} .renew1.container-29 ~ #addressList {padding: 0;} .renew1.container-29 ~ #addressList .wrapper {padding: 0; background: #eaedef;} .renew1.container-29 ~ #addressList .container-46 {padding: 0;} .renew1.container-29 ~ #addressList .head-bar {padding: 15px 17px 20px; background: #fff;} .renew1.container-29 ~ #addressList .head-bar span {font-size: 22px; color: #000; margin: 0; position: absolute; top: 13px;} .renew1.container-29 ~ #addressList .head-bar .back {left: 17px;} .renew1.container-29 ~ #addressList .head-bar .close {right: 17px;} .renew1.container-29 ~ #addressList .con-2 {padding: 15px 17px;} .renew1.container-29 ~ #addressList .items .item {border: none; padding-top: 15px;} .renew1.container-29 ~ #addressList .items .item .a1 .b1 {font-weight: 500;} .renew1.container-29 ~ #addressList .items .item .a2 {display: flex; flex-direction: column; gap: 10px;} .renew1.container-29 ~ #addressList .items .item .a2 .b1 {color: #000;} .renew1.container-29 ~ #addressList .items .item .a2 .b2 {color: #808188;} .renew1.container-29 ~ #addressList .items .item .a3 {border: none; padding: 5px 0 20px;} .renew1.container-29 ~ #addressList .items .item .a3 .b1 {width: 100%; gap: 5px;} .renew1.container-29 ~ #addressList .items .item .a3 .btn {height: 32px; font-size: 13px; border-radius: 5px; color: #000; font-weight: 300; border-color: #e8e8e8;} .renew1.container-29 ~ #addressList .items .item .a3 .btn:last-child {margin-left: auto; border-color: #00d0d8; background-color: #00d0d8; color: #fff;} .renew1.container-29 ~ #addressList .items .item .a3 .btn:last-child::before {content: none;} .renew1.container-29 ~ #addressList .con-3 {padding: 10px; background: #fff;} .renew1.container-29 ~ #couponList {padding: 0;} #addressList #addressEdit {padding: 0; background: #fff;} #addressList #addressEdit .con-2 {padding: 10px 17px 15px; display: flex; flex-direction: column; gap: 10px;} #addressList #addressEdit .con-2 .tit {width: 20%; min-width: 55px; max-width: 65px; font-size: 14px; align-self: center; color: #808188;} #addressList #addressEdit .con-2 input {margin-bottom: 0; border-color: #e6e6e6;} #addressList #addressEdit .con-2 input.readonly {background: #F7F9FA;} #addressList #addressEdit .selec-box {position: relative; width: 20%;} #addressList #addressEdit .selec-box i {position: absolute; top: 12px; right: 6px; font-size: 22px; color: #000; margin: 0; pointer-events: none;} #addressList #addressEdit .selec-box select {width: 100%; height: 100%; padding: 0 1em; appearance: none; border: 1px solid #e6e6e6; border-radius: 5px;} #addressList #addressEdit .con-2 .addr_btn {width: 20%; padding: 0; border: 1px solid #00d0d8; color: #00d0d8; border-radius: 5px; font-size: 14px;} #addressList #addressEdit .con-2 .addr_box {display: flex; flex-direction: column; width: 100%; gap: 10px;} #addressList #addressEdit .con-3 {padding: 10px;} #addressList #addressEdit .con-2 .con-1 {display: flex; gap: 10px; align-items: center;} /* 매거진 */ .container-113 .mag_banner {margin-top: 30px; position: relative;} .container-113 .mag_banner .swiper-slide {height: 340px; padding:0 5px; border-radius: 10px; position: relative;} .container-113 .mag_banner .swiper-slide img {width: 100%; height: 100%; border-radius: 10px; transform: scale(0.9); transition: all 800ms ease; object-fit: cover;} .container-113 .mag_banner .swiper-slide-active img {transform: scale(1);} .container-113 .mag_banner .swiper-slide::after {content: ""; display: block; width: calc(100% - 10px); height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(0,0,0,0.3) 70%); position: absolute; bottom: 0; transform: scale(0.9); transition: all 800ms ease; border-radius: 0 0 10px 10px;} .container-113 .mag_banner .swiper-slide-active::after {transform: scale(1);} .container-113 .txt_area {position: absolute; width: 100%; padding: 0 5px; left: 0; bottom: 25px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; z-index: 2;} .container-113 .txt_area .tit {font-size: 18px; font-weight: 600; color: #fff; line-height: 24px;} .container-113 .txt_area .btn {width: 110px; height: 38px; padding: 0 1.6em; font-size: 13px; justify-content: end; color: #000; border-radius: 20px;} .container-113 .txt_area .btn i {font-size: 16px; margin: 0;} .container-113 .swiper-pagination {display: block;} .container-113 .swiper-pagination span.swiper-pagination-bullet {width: 13px; height: 5px; border-radius: 5px; background: #c8c9d1; margin: 0 3px; opacity: 1;} .container-113 .swiper-pagination span.swiper-pagination-bullet-active {background: #00d0d8;} .container-113 .mag_banner .swiper-pagination {bottom: -18px;} .container-113 .con-1 {position: relative; padding: 0 10px;} .container-113 .con-1 h2 {margin: 0 7px 10px;} .container-113 .con-1 .list {position: relative; display: flex; height: 210px; margin: 0 7px 15px 7px; border: 1px solid #e7e8f0; border-radius: 10px; overflow: hidden;} .container-113 .con-1 .list::after {content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255,255,255,0) 45%, rgba(0,0,0,0.3) 70%); position: absolute; bottom: 0; border-radius: 0 0 10px 10px;} .container-113 .con-1 .list img {width: 100%; height: 100%; object-fit: cover;} .container-113 .con-1 .list .txt_area {bottom: 18px; padding: 0 10px; text-align:left; align-items: flex-start;} .container-113 .con-1 .list .txt_area .tit {font-size: 16px; font-weight: 400;} .container-113 .con-1 .swiper-pagination {bottom: 0;} .container-113 .con-2 {position: relative;} .container-113 .con-2 .con-select {position: absolute; top: 0px; right: 0;} .container-113 .con-2 .con-select select {width: 105px; padding: 5px 15px; border: 1px solid #adadb5; border-radius: 8px; background: #fff; font-size: 14px; color: #000; appearance: none;} .container-113 .con-2 .con-select svg {width: 18px; height: 100%; color: #000; position: absolute; right: 8px; pointer-events: none;} .container-113 .con-2 .items {display: flex; flex-direction: column; gap: 35px;} .container-113 .con-2 .items .item img {border-radius: 10px;} .container-113 .con-2 .items .item p {margin: 6px 5px 10px; color: #000; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} .container-113 .con-2 .items .item .tag {display: flex; gap: 8px;} .container-113 .con-2 .items .item .tag span {padding: 8px 15px 6px; color: #000; font-size: 13px; border: 1px solid #c8c9d1; border-radius: 18px;} /* 마이페이지 */ .renew1 .container-75 {padding-top: 35px;} .renew1 .container-75 .con-1 {margin-bottom: 30px;} .renew1 .container-75 .con-1 .a2 span {font-family: "SUIT-SemiBold", sans-serif; margin-right: 5px;} .renew1 .container-75 .con-1 .a2 p {margin: 0; font-size: 15px;} .renew1 .container-75 .con-1 .a3 {display: flex; align-items: center; align-self: center; color: #000;} .renew1 .container-75 .con-1 .a3 i {color: #808188; font-size: 17px; margin: 0;} .renew1 .container-75 .con-2 {padding: 0; box-shadow: none; border: none; gap: 10px;} .renew1 .container-75 .con-2 .a1 {display: flex; width: 100%; height: 100%; border: 1px solid #c8c9d1; border-radius: 10px; align-items: center; justify-content: center;} .renew1 .container-75 .con-2 .a1 span{padding-right: 8px; color: #000; font-weight: 500;} .renew1 .container-75 .con-2 .a1 span::before {top: 5px; width: 3px; height: 3px; background-color: #00d0d8;} .renew1 .container-75 .con-3 .bar {width: 1px; height: 42px; margin-top: 5px; background: #c8c9d1;} .renew1 .container-75 .con-3 .a1 {font-family: "SUIT-SemiBold", sans-serif;} .renew1 .container-75 .con-3 .a2 {font-size: 14px; color: #808188;} .renew1 .container-75 .con-4 h2 {font-size: 14px; font-weight: 400; color: #00d0d8;} .renew1 .container-75 .con-4 .a1 .b1 {display: none;} .renew1 .container-75 .con-4 .a1 .b3 {display: flex; align-items: center;} .renew1 .container-75 .con-4 .a1 .b3 span {color: #808188;} .renew1 .container-75 .con-4 .a1 .b3 i {margin:0 0 0 5px; color: #000; font-size: 19px;} .renew1 .container-75 .con-4 .app_info {gap: 5px;} .renew1 .container-75 .con-4 .app_info .b1 {display: block;} /* 포인트 */ .renew1 .container-73 {padding-top: 35px;} .renew1 .container-73 .con-1 {border-color: #00d0d8; border-radius: 10px; box-shadow: none;} .renew1 .container-73 .con-1 .a1 {color: #000; font-size: 14px; font-weight: 500;} .renew1 .container-73 .con-1 .a1 i {font-size: 15px; transform: rotate(180deg);} .renew1 .container-73 .con-1 .a2 {color: #808188;} .renew1 .container-73 .con-1 .a2 .c1 {color: #00d0d8; font-family: "SUIT-SemiBold", sans-serif;} .renew1 .container-73 .con-1 .a3 {display: none;} .renew1 .container-73 .con-2 .a1, .renew1 .container-73 .con-2 .a3 {font-size: inherit; color: #000;} .renew1 .container-73 .con-2 .a2 p:last-of-type {color: #3c3b3e;} .renew1 .container-73 .con-4 .a1 {flex-direction: column; gap: 10px; border-bottom: none;} .renew1 .container-73 .con-4 .a1 .b1 {color: #3c3b3e;} .renew1 .container-73 .con-4 .a1 .b1 .c1 p {font-size: 17px; font-family: "SUIT-SemiBold", sans-serif;} .renew1 .container-73 .con-4 .a1 .b1 .e1 {color: #3c3b3e; font-size: 12px;} .renew1 .container-73 .con-4 .a1 .b1 .e1 span:not(:last-of-type):after {content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 3px 0 7px; background: #3c3b3e;} .renew1 .container-73 .con-4 .a1 .b2 {text-align: left; color: #00d0d8; font-size: 16px; font-family: "SUIT-SemiBold", sans-serif; letter-spacing: 0;} .renew1 .container-73 .con-4 .a1 .used {color: #3c3b3e;} .renew1 .container-73 .con-4 .a1 .canceled {color:#808188} .renew1 .container-73 .point_info {bottom: 0;} .renew1 .container-73 .point_info .wrapper {position: relative; padding: 15px 10px 0 20px; padding-bottom: var(--ios-safe-bottom);} .renew1 .container-73 .point_info .wrapper h3 {font-weight: 600;} .renew1 .container-73 .point_info .wrapper img {position: absolute; top: 13px; right: 11px;} .renew1 .container-73 .point_info .txt_area {max-height: 320px; padding-right: 10px; overflow-y: scroll;} .renew1 .container-73 .point_info .txt_area::-webkit-scrollbar {width: 2px;} .renew1 .container-73 .point_info .txt_area::-webkit-scrollbar-thumb {background: #808188;} .renew1 .container-73 .point_info .txt_area h4 {font-weight: 500; margin-bottom: 10px;} .renew1 .container-73 .point_info .txt_area ul {margin-bottom: 20px;} .renew1 .container-73 .point_info .txt_area ul li {display: flex; gap: 3px; margin-bottom: 10px; color: #3c3b3e;} .renew1 .container-73 .point_info .txt_area ul li span:first-of-type {display: inline-block; width: 12px; flex-shrink: 0; letter-spacing: 0;} /* 나의 문의 내역 */ .renew1 .container-96 .inquiry-items .item .item-q .a1 {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word;} /* 문의 작성 */ .renew1 .container-42 .a1 {position: relative; } .renew1 .container-42 .a1 select {background-color: #fff; color: #3c3b3e; appearance: none;} .renew1 .container-42 .a1 i {position: absolute; top: 14px; right: 12px; font-size: 20px; color:#000;} .renew1 .container-42 .a1 select, .renew1 .container-42 .a2 input, .renew1 .container-42 .a2 textarea {border: none; border-bottom: 1px solid #000; border-radius: 0; margin-bottom: 0; font-family: Arial, Helvetica, sans-serif;} .renew1 .container-42 .a2 .b1 {padding-right: 20px;} .renew1 .container-42 .a2 .b1 span {letter-spacing: 0;} /* 공지사항 */ .renew1 .container-86 {padding-top: 20px;} .renew1 .container-86 .con-1 {text-align: right;} .renew1 .container-86 .con-1 p {color: #000; font-size: 16px;} .renew1 .container-86 .con-2 .item {border-bottom: none;} .renew1 .container-86 .con-2 .item .a1 {font-size: 15px;} .renew1 .container-86 .con-2 .item .a1 .b1 {margin-bottom: 5px; color: #3c3b3e;} .renew1 .container-86 .con-2 .item .a1 .b2 {display: flex; justify-content: space-between; align-items: center; font-size: 16px; color: #000;} .renew1 .container-86 .con-2 .item .a1 .b2 span {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: break-word; padding-right: 10px;} .renew1 .container-86 .con-2 .item .a1 .b2 i {margin: 0; margin-right: -5px; font-size: 18px;} .renew1 .container-86 .con-2 .item .a2 {display: none; position: relative; padding: 20px 5px;} .renew1 .container-86 .con-2 .item .a2::before {content: ""; position: absolute; width: 1px; height: calc(100% - 48px); top: 25px; left: 0; background: #c8c9d1;} .renew1 .container-86 .con-2 .item.active .a2 {display: block;} /* 주문 상세 정보 */ .renew1 .container-58 .con-0 {justify-content: flex-start; color: #808188;} .renew1 .container-58 .con-0 .confirm_date:not(:empty) {margin-right: 10px;} .renew1 .container-58 .con-0 span:last-child {margin-left: auto;} .renew1 .container-58 .con-1 {flex-direction: column; gap: 15px;} .renew1 .container-58 .product-card {gap: 20px; margin-bottom: 0;} .renew1 .container-58 .product-card .p-image {max-width: 82px;} .renew1 .container-58 .product-card .p-image .img-box {border-color: #c7c9d1;} .renew1 .container-58 .product-card .info {height: 82px; gap: 0; justify-content: space-between; flex: 1;} .renew1 .container-58 .product-card .info .qty {float: right;} .renew1 .container-58 .con-2 .btn {height: 38px; border-radius: 8px;} .renew1 .container-58 .con-4 {padding: 20px 18px; border: 2px solid #00d0d8; border-radius: 10px;} .renew1 .container-58 .con-4.od_point {border-color:#c8c9d1; margin: 25px 0 15px;} .renew1 .container-58 .con-4 .h2 {width: 100%; padding-bottom: 10px; border-bottom:1px solid #e8e8e8;} .renew1 .container-58 .con-4 .total {padding: 18px 0 5px; margin-top: 10px; font-size: 16px; border-top:1px solid #000;} .renew1 .container-58 .con-4 .total b {font-family: "SUIT-Heavy", sans-serif; letter-spacing: 0;} .renew1 .container-58 .con-4 .a2 span {color: #3c3b3e;} .renew1 .container-58 .con-4 .a2 .num {font-size: 15px; font-family: "SUIT-Bold", sans-serif; letter-spacing: 0;} /* 주문 취소 */ .renew1 .container-63 {padding-top: 30px;} .renew1 .container-63 .h2 {margin-bottom: 10px;} .renew1 .container-63 .con-0 {display: flex; margin-bottom: 20px; align-items: center; color: #808188;} .renew1 .container-63 .con-0 .confirm_date:not(:empty) {margin-right: 10px;} .renew1 .container-63 .con-0 span:last-child {margin-left: auto;} .renew1 .container-63 .con-1 {border-bottom: none;} .renew1 .container-63 .con-1 .check_wrap {margin-top: 31px;} .renew1 .container-63 .con-1 .check_wrap .check_box {display: none;} .renew1 .container-63 .con-1 .check_wrap .chkbox {display: block; width: 20px; height: 20px; border: 1px solid #3c3b3e; border-radius: 4px;} .renew1 .container-63 .con-1 .check_wrap .check_box:checked + label .chkbox {border-color: #00d0d8; background: #00d0d8;} .renew1 .container-63 .con-1 .check_wrap .check_box:checked + label .chkbox:before {display:block; content: '\e903'; margin: 1px 0 0 1px; font-family: 'icomoon' !important; font-size: 16px; color:#fff; vertical-align: -2px;} .renew1 .container-63 .product-card {gap: 20px; margin-bottom: 10px;} .renew1 .container-63 .product-card .p-image {max-width: 82px;} .renew1 .container-63 .product-card .p-image .img-box {border-color: #c7c9d1;} .renew1 .container-63 .product-card .info {height: 82px; gap: 0; justify-content: space-between; flex: 1;} .renew1 .container-63 .product-card .info .qty {float: right;} .renew1 .container-63 .cancel_reason {display: flex; padding: 10px 0; gap: 10px; align-items: center;} .renew1 .container-63 .cancel_reason .radio {display: block; width: 23px; height: 23px; border: 1px solid #3c3b3e; border-radius: 50%; cursor: pointer;} .renew1 .container-63 .cancel_reason.active .radio {border-color: #00d0d8; border-width: 6px;} .renew1 .container-63 .cancel_reason span:first-of-type {color: #808188;} .renew1 .container-63 .cancel_reason span:last-of-type {color: #3c3b3e;} .renew1 .container-63 .con-3 .a1 {padding: 5px 0 15px;} .renew1 .container-63 .con-3 .a1 .row span {color: #3c3b3e;} .renew1 .container-63 .con-3 .a2 {padding: 15px 0; border-top: 1px solid #000;} .renew1 .container-63 .con-3 .a2 .row {margin-bottom: 5px; color: #3c3b3e; font-size: 16px;} .renew1 .container-63 .con-3 b {font-family: "SUIT-Bold", sans-serif; letter-spacing: 0;} .renew1 .container-63 .con-3 .a2 b {font-family: "SUIT-Heavy", sans-serif; letter-spacing: 0; font-size: 18px;} .renew1 .container-63 .con-4 {padding: 5px 0 30px; border-bottom: 1px solid #e7e8f0;} .renew1 .container-63 .p-notice li {line-height: 24px; margin-bottom: 8px; justify-content: flex-start; word-break: keep-all;} .renew1 .container-60 {padding-top: 30px;} .renew1 .container-60 .con-1 {display: flex; gap: 10px; align-items: center; justify-content: center; padding: 25px 0 30px; border: 1px solid #00d0d8; border-radius: 8px;} .renew1 .container-60 .con-1 img {width: 32px; margin-top: 5px;} .renew1 .container-60 .con-1 p {margin-bottom: 0; font-size: 18px;} .renew1 .container-60 .con-2 {border-top: none; background-color: #fff; padding: 20px 0;} .renew1 .container-60 .con-2 .cancel_reason {display: flex; gap: 10px;} .renew1 .container-60 .con-2 .cancel_reason span:first-of-type {color: #808188;} .renew1 .container-60 .con-2 .cancel_reason span:last-of-type {color: #3c3b3e;} .renew1 .container-60 .con-4 {border-top: none; border-color: #e7e8f0; background-color: #fff; padding: 10px 0 30px;} .renew1 .container-60 .con-4 .col-3 .btn {padding: 3px 0 1px; color: #000; font-size: 17px;} .renew1 .container-60 .con-6 {padding: 30px 0 15px;} .renew1 .container-60 .con-6 .b {margin-bottom: 5px; color: #000;} /* 마이페이지 건강 정보 */ .renew1 .myhealth .con-1 {margin-bottom: 30px;} .renew1 .myhealth .con-1 .a1 {margin-bottom: 10px;} .renew1 .myhealth .con-1 .a2 {font-size: 16px; color: #3c3b3e;} .renew1 .myhealth .con-3 .item {border: none; padding: 10px 0; gap: 10px;} .renew1 .myhealth .con-3 .item .checkbox {width: 23px; height: 23px; border-color: #3c3b3e; border-radius: 5px;} .renew1 .myhealth .con-3 .item svg {fill: #00d0d8;} .renew1 .myhealth .con-3 .item p {font-size: 16px; color: #3c3b3e;} /* 건강고민 관심분야 */ .renew1 .container-53 .healthy-category > .wrap {gap: 10px 15px; justify-items: stretch;} .renew1 .container-53 .healthy-category .item {gap: 5px; text-align: center; word-break: keep-all;} .renew1 .container-53 .healthy-category .item img {width: 52px;} .renew1 .container-53 .healthy-category .item span {font-size: 14px; color: #000;} .renew1 .container-53 .healthy-category .cate-select img {border: 2px solid #00d0d8; border-radius: 50%;} .renew1 .container-53 .healthy-category .cate-select span {color: #00d0d8;} /* 배송조회 */ .renew1 .container-59 .con-1 .a2 .wrap {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} .renew1 .container-59 .con-1 .a2 .wrap > span {opacity: 1; filter: grayscale(1);} .renew1 .container-59 .con-1 .a2 .wrap > .active {filter: grayscale(0); color: #00d0d8;} .renew1 .container-59 .con-1 .a2 img {width: 26px;} .renew1 .container-59 .con-2 {display: flex; flex-direction: column; gap: 15px; padding-top: 30px;} .renew1 .container-59 .product-card {gap: 20px; margin-bottom: 0;} .renew1 .container-59 .product-card .p-image {max-width: 82px;} .renew1 .container-59 .product-card .p-image .img-box {border-color: #c7c9d1;} .renew1 .container-59 .product-card .info {height: 82px; gap: 0; justify-content: space-between; flex: 1;} .renew1 .container-59 .product-card .info .qty {float: right;} .renew1 .container-59 .con-3 {padding: 40px 0 30px;} .renew1 .container-59 .con-3 > div {display: flex; flex-direction: column; gap: 10px;} .renew1 .container-59 .con-3 .a1 > div {display: flex; gap: 15px; font-size: 14px;} .renew1 .container-59 .con-3 .a1 span:first-child {color: #808188;} .renew1 .container-59 .con-3 .a1 span:last-child {color: #3c3b3e;} .renew1 .container-59 .con-3 .a2 {margin-top: 10px;} .renew1 .container-59 .con-3 .a2 p {margin-bottom: 0; color: #3c3b3e; font-size: 14px;} .renew1 .container-59 .con-3 .a2 p:first-of-type {color: #808188;} .renew1 .container-59 .con-3 > div > span {color: #000 !important; font-size: 16px; margin-left: auto; margin-top: 10px;} .renew1 .container-59 .con-3 > div > span i {font-size: 17px; color: #808188; margin: 0;} .renew1 .container-59 .con-4 {background: none; border: none; padding: 30px 0 50px;} .renew1 .container-59 .con-4 .a1 {display: flex; flex-direction: column; gap: 10px;} .renew1 .container-59 .con-4 .a1 > div span:first-of-type {width: auto;} .renew1 .container-59 .con-4 .a1 > div span:nth-last-of-type(2) {flex: 1; max-width: 120px; text-align: center;} .renew1 .container-59 .con-4 .a1 > div span:last-of-type {margin-left: auto; color: #3c3b3e;} .renew1 .container-59 .con-4 .a1 > div span {color: #808188;} .renew1 .container-59 .con-5 {background: none; border-color: #e7e8f0; padding: 20px 0;} .renew1 .container-59 .con-7 {padding: 40px 0 20px;} .renew1 .container-59 .con-7 .inquiry-items {display: flex; flex-direction: column; gap: 10px;} .renew1 .container-59 .con-7 .inquiry-items .list {color: #000; font-size: 16px;} .renew1 .container-59 .con-7 .inquiry-items .item-q {display: flex; gap: 10px; align-items: center; margin-bottom: 10px; word-break: keep-all;} .renew1 .container-59 .con-7 .inquiry-items .item-q i {margin-left: auto; font-size: 18px; margin-right: 0;} .renew1 .container-59 .con-7 .inquiry-items .item-a {margin-bottom: 20px; color: #808188; display: none;} /* 건강검진기록 가져오기 */ .renew1 .container-68 .con-1 .a1 {margin-bottom: 15px;} .renew1 .container-68 .con-1 p {color: #3c3b3e;} .renew1 .container-68 .con-3 {margin-top: 80px;} .renew1 .container-69 .con-1 .a1 {margin-bottom: 15px;} .renew1 .container-69 .con-1 p {color: #3c3b3e;} .renew1 .container-69 .con-3 {margin-top: 80px;} .renew1 .container-70 .con-1 {margin-bottom: 30px;} .renew1 .container-70 .con-1 .a1 {margin-bottom: 15px;} .renew1 .container-70 .con-1 p {color: #3c3b3e;} .renew1 .container-70 .con-2 input {border-radius: 10px; margin-bottom: 25px;} .renew1 .container-70 .con-2 .form-text-item {position: relative;} .renew1 .container-70 .con-2 .form-text-item > span {position: absolute; bottom: 8px; left: 10px; color: #f91c46; font-size: 12px;} .renew1 .container-71 .btn-kakao {background-color: #ffcc00; color: #fff;} .renew1 .container-71 .btn-naver {background-color: #2db400; color: #fff;} .renew1 .container-71 .btn-pass {background-color: #1f1f22; color: #fff;} .renew1 .container-71 .btn-payco {background-color: #f41c2c; color: #fff;} /* 건강검진기록 확인하기 */ .renew1 .container-66 .con-2 {border: none; padding-bottom: 20px;} .renew1 .container-66 .con-2 .a1 {color: #3c3b3e; font-family: "SUIT-Medium", sans-serif;} .renew1 .container-66 .con-2 .a2 {color: #3c3b3e; font-family: "SUIT-Regular", sans-serif;} .renew1 .container-66 .con-2 .a3 {color: #808188; font-family: "SUIT-Bold", sans-serif; margin-bottom: 5px;} .renew1 .container-66 .con-2 .a4 {color: #808188; font-size: 14px; line-height: 24px;} .renew1 .container-66 .con-3 {padding-top: 0;} /* 추천 영양제 */ .renew1 .container-47 .heading {position: relative; margin-bottom: 25px;} .renew1 .container-47 .heading h3 {font-size: 20px; font-weight: 600;} .renew1 .container-47 .heading .more-btn {position: absolute; top: 2px; right: -5px; display: block; width: 28px; height: 28px; line-height: 23px; text-align: center; font-size: 28px; font-weight: bold; color: #00d0d8;} .renew1 .container-47 .heading p {color: #000; margin-bottom: 0;} .renew1 .container-47 .main-p-list {margin-bottom: 20px;} /* 게시판 */ .container-114 h2 {text-align: center; word-break: keep-all; margin-bottom: 10px;} .container-114 .con-1 {display: flex; justify-content: flex-end; gap: 10px; color: #808188; font-size: 13px; margin-bottom: 30px;} .container-114 .con-2 {display: flex; justify-content: center; margin-bottom: 10px;} .container-114 .con-3 {padding: 20px 0 40px;} .container-114 .con-3 span {white-space: pre-line; color: #000;} .container-114 .con-4 {margin: 20px 0;} .container-114 .con-5 {padding: 20px 0 0;} .container-114 .con-5 > div {display: flex; gap: 20px; padding: 15px 0; color: #3c3b3e;} .container-114 .con-5 .pre {border-bottom: 1px solid #e7e8f0;} .container-114 .con-5 > div > div:first-child {display: flex; gap: 3px; align-items: center; font-size: 14px;} .container-114 .con-5 > div i {font-size: 18px; margin: 0;} .footer-navigation.mini {height: 38px; padding: 0 17px; justify-content: flex-end; gap: 10px; border-color: #e7e8f0;} .footer-navigation.mini span {font-size: 16px; color: #3c3b3e;} .footer-navigation.mini .footer-heart {display: flex; align-items: center; gap: 3px;} .footer-navigation.mini .footer-heart.active i {color: #dd4d8a;} .footer-navigation.mini .heart_cnt {font-size: 13px;} /* 배송목록 */ .renew1 .container-64 .search-box {height: 56px; padding: 0 17px; border-bottom: 1px solid #000 ;} .renew1 .container-64 .con-3 {background: none;} .renew1 .container-64 .con-3 .header {flex-direction: column; gap: 10px;} .renew1 .container-64 .con-3 .header .top {display: flex; gap: 25px; color: #808188;} .renew1 .container-64 .con-3 .header .btm {display: flex; gap: 5px;} .renew1 .container-64 .con-3 .header .btm h4 {color: #00d0d8;} .renew1 .container-64 .con-3 .header .btm a {margin-left: auto; color: #000;} .renew1 .container-64 .con-3 .p-con-1 {margin-bottom: 23px;} .renew1 .container-64 .con-3 .p-con-1 .a1 {width: 82px; height: 82px; border-color: #c7c9d1; border-radius: 12px; overflow: hidden;} .renew1 .container-64 .con-3 .p-con-1 .a2 {height: 82px; flex:1; display: flex; flex-direction: column; justify-content: space-between; ;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b1 {margin: 0; color: #3c3b3e; height: 39px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b2 {font-size: 16px; display: block;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b2 span {letter-spacing: 0; color: #3c3b3e;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b2 b {color: #000; font-size: 16px;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b2 .c1 {color: #f91c46;} .renew1 .container-64 .con-3 .p-con-1 .a2 .b2 .c3 {float: right;} .renew1 .container-64 .con-3 .buttons {justify-content: flex-end;} .renew1 .container-64 .con-3 .buttons .btn:first-of-type {margin-right: auto;} .renew1 .container-64 .con-3 .buttons .btn {font-size: 14px; border-radius: 16px; padding: 3px 16px 1px;} .renew1 .container-64 .con-3 .buttons .btn-outline-gray {color: #1f1f22;} /* 내 영양제 */ .renew1 .container-81 {padding: 30px 0;} /* 회원 정보 수정 */ .renew1 .container-115 {padding-top: 30px;} .renew1 .container-115 p {margin-bottom: 20px;} .renew1 .container-115 #mb_confirm_id {display: inline-flex; width: 100%; height: 52px; padding: 3px 1em 1px; margin-bottom: 20px; border: 1px solid #e7e8f0; border-radius: 10px; background: #f6f6fe; color: #000; align-items: center;} .renew1 .container-115 #confirm_mb_password {border-radius: 10px; margin-bottom: 40px;} .renew1 .container-115 #btn_submit {border: none;} .renew1 .container-115 .c2 {margin-bottom: 60px;} .renew1 .container-115 .c2 input {border-radius: 10px;} .renew1 .container-115 .c2 .nickCheck {width: 80px; height: 37px; position: absolute; top: 7px; right: 8px; border: 1px solid #e7e8f0; border-radius: 8px; background: #f6f6fe; color: #000;} .renew1 .container-115 .c2 .confirm {display: block; position: absolute; left: 5px; bottom: 0; font-size: 12px;} .renew1 .container-115 .c2 .confirm.wrong {color: #f91c46;} .renew1 .container-115 .c2 .nick_random {display: flex; align-items: center; color: #000;} .renew1 .container-115 .c2 .nick_random > div {flex: 1;} .renew1 .container-115 .c2 .nick_random .btn {height: 37px; border-radius: 8px; color: #000;} /* 이벤트 리스트 */ .renew1 .container-116 {padding-top: 30px;} .renew1 .container-116 .event_list {margin-bottom: 30px;} .renew1 .container-116 .event_list img {border-radius: 10px; margin-bottom: 5px;} .renew1 .container-116 .event_list .tit {padding-left: 5px; margin-bottom: 5px; color: #000; font-size: 16px; font-weight: 500;} .renew1 .container-116 .event_list .end_time {padding-left: 5px; margin-bottom: 0; color: #808188;} .renew1 .container-116 .event_list .end_time span {color: #00d0d8;} .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0;text-indent:-9999em;line-height:0;border:0 !important;overflow:hidden !important} @media screen and (min-width:411px) { .container-26 .compare-box .con .img-wrap {justify-content: space-evenly;} } /* 모바일 */ @media screen and (max-width: 420px) { .container-113 .con-2 .con-select {top: -5px;} .renew1 .container-73 .con-1 .a1 i {margin-bottom: 3px;} } @media screen and (max-width: 719px) { .renew1.container-38 .add-product span {line-height: 35px; padding-top: 12px;} } /* pc */ @media screen and (min-width: 720px) { .search-form-container, .search-container .search_tab, .renew1.container-38 .fix-wrap {width: 370px !important;} .modal .modal-container {max-width: 350px;} .renew1 .container-58 .con-2 .btn {padding: 0 1em;} }