/*-------------------------------------------------------------- >>> color-set main color: #0068b7 / danger : #f44336 sub color : #e74683(Pink), #c39d5f(Brown), #19d3a1(Mint) link color: #3a383e txt color : #4c4b46 - #666464 - #abafb0(#969693) bg color(main) : #eaeff9 bg color(gray) : #f9f9f9 #abafb0 #666464 border color : #f0f0f0 - #e0e0e0 - #c2c2c2 >>> Z-index .header .area-menu - 990 .header-logo.affix - 999 .main_slide .slick-arrow 2 .fix-state>li:first-child 99998 .select-option 1 .list-bottom > .pagination 9999 .gallery .item-summary 3 .gallery .item-type -1 .learn-detailView .detailView-body .tab-header 900 .group-detailView .detailView-body .tab-header 900 .cl-popup-overlay 90000 .cl-popup-closer 99999 >>> TABLE OF CONTENTS: 0.0 Import 1.0 Genericons 일반 * 1.1 Normalize 표준화 - 1.1.0 ALL Element - 1.1.1 Typography - 1.1.2 Link - 1.1.3 Image - 1.1.4 Table * 1.2 Genericons 일반 2.0 3.0 4.0 5.0 Layout Desgin : 레이아웃 디자인 6.0 7.0 8.0 Contents Design : 콘텐츠별 디자인 9.0 Print ----------------------------------------------------------------*/ /*-------------------------------------------------------------- 0.0 Import ----------------------------------------------------------------*/ /* nanum square - light */ @font-face { font-family: 'NanumSquare'; src: url('font/nanumSquare/nanumsquareL.eot');/* IE9 Compat Modes */ src: url('font/nanumSquare/nanumsquareL.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/nanumSquare/nanumsquareL.woff') format('woff'),/* Modern Browsers */ url('font/nanumSquare/nanumsquareL.ttf') format('truetype'),/* Safari, Android, iOS */ url('font/nanumSquare/nanumsquareL.svg#017f9c78318bcde3d1dc4451e8eaca0a') format('svg');/* Legacy iOS */ font-weight: normal; font-weight: 300; } /* nanum square - regular */ @font-face { font-family: 'NanumSquare'; src: url('font/nanumSquare/nanumsquareR.eot'); src: url('font/nanumSquare/nanumsquareR.eot?#iefix') format('embedded-opentype'), url('font/nanumSquare/nanumsquareR.woff2') format('woff2'), url('font/nanumSquare/nanumsquareR.woff') format('woff'), url('font/nanumSquare/nanumsquareR.ttf') format('truetype'), url('font/nanumSquare/nanumsquareR.svg#nanumsquarerregular') format('svg'); font-weight: normal; font-weight: 400; } /* nanum square - bold */ @font-face { font-family: 'NanumSquare'; src: url('font/nanumSquare/nanumsquareB.eot'); src: url('font/nanumSquare/nanumsquareB.eot?#iefix') format('embedded-opentype'), url('font/nanumSquare/nanumsquareB.woff2') format('woff2'), url('font/nanumSquare/nanumsquareB.woff') format('woff'), url('font/nanumSquare/nanumsquareeB.ttf') format('truetype'), url('font/nanumSquare/nanumsquareB.svg#nanumsquarebregular') format('svg'); font-weight: 700; } /* nanum square - extra bold */ @font-face { font-family: 'NanumSquare'; src: url('font/nanumSquare/nanumsquareEB.eot'); src: url('font/nanumSquare/nanumsquareEB.eot?#iefix') format('embedded-opentype'), url('font/nanumSquare/nanumsquareEB.woff') format('woff'), url('font/nanumSquare/nanumsquareEB.ttf') format('truetype'), url('font/nanumSquare/nanumSquareEB.svg#090d6763bc81b49309446d23fbd10e87') format('svg'); font-weight: 900; } /*-------------------------------------------------------------- 1.0 Genericons 일반 ----------------------------------------------------------------*/ :root { --primary-dark-color: #F5B017; --primary-color: #EAC92D; --secondary-color: #693b1c; --green-color:#009444; --light-green:#d7f7e7; --blue-color:#336fb7; --red-color:#e51d22; --purple-color:#9C27B0; --text-color: #343a40; --text-gray: #727171; --text-light: #9FA0A0; --light-gray: #B5B6B6; --black: #343a40; --white: #fff; --bg-lightgray: #f6f9fc; --bd-lightgray: #dde6e9; --bg-darkgray: #26393c; --bd-darkgray: #36494c; --container-width: calc(100% - 100px); --fixed-search-width: calc(100% - 520px - 2rem) ; --container-padding: 50px; --container-side: calc(100% - 45px); --product-summary-img-zone: calc(33vw + 35px); --product-summary-img: 33vw; --product-summary-info-zone: calc(100% - 33vw - 35px); } @media only screen and (max-width: 768px) { :root { --container-padding: 15px; --container-width: calc(100% - 30px); --fixed-search-width: calc(100% - 190px - 2rem) ; --container-side: calc(50% + 520px); } } @media only screen and (min-width: 1024px) { :root { --container-width: calc(100% - 100px); --fixed-search-width: calc(100% - 520px - 10rem) ; --container-padding: 50px; --container-side: calc(100% - 45px); } } @media only screen and (min-width: 1600px) { :root { --container-width: 1500px; --fixed-search-width: calc(1000px - 10rem) ; --container-padding: calc(50% - 750px); --container-side: calc(50% + 755px); --product-summary-img-zone: calc(33% + 135px); --product-summary-img: calc(33% + 100px); --product-summary-info-zone: calc(67% - 135px); } } html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { background: transparent; border: 0; box-sizing: border-box; font-size: 100%; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } body, textarea { font-family: 'NanumSquare', Arial, sans-serif; color: var(--black); } /* 1.1 Basic HTML */ h1, h2, h3, h4, h5, h6 { font-family: 'NanumSquare', Arial, sans-serif; color: var(--black);} h1 { font-size: 2rem;} h2 { font-size: 1.8rem; margin:20px 0} h3 { font-size: 1.5rem; margin:15px 0} /* 1.1 Links */ a { color:var(--text-color); text-decoration: none;} a:hover, a:active{ color:var(--red-color)} input, textarea {font-family: 'NanumSquare'; } .blind { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 1.2 Embedded content */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } canvas, img, svg, video { max-width: 100%; height: auto; box-sizing: border-box; } img:not([src]) { visibility: hidden; min-width: 1px;} /*-------------------------------------------------------------- 2.0 Plugin 관련 ----------------------------------------------------------------*/ /*-------------------------------------------------------------- 3.0 Element Desgin : 콘텐츠 요소 디자인 ----------------------------------------------------------------*/ .nowrap {white-space: nowrap; } .nowrap.inlineBlock { display: inline-block;} .nowrap.block { display: block;} .tyPrimary { color:var(--primary-dark-color) !important} .tyWarning { color:var(--red-color) !important} .tySafe { color:var(--green-color) !important} .tyInfo { color:var(--blue-color) !important} .tyPend { color:var(--purple-color) !important} .floatLeft { float: left;} .floatRight { float: right;} .clearFloat { clear: both;} /* 3.1 라벨 및 버튼 */ .label {display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: .875rem; line-height: 100%; font-weight: bold; background-color: var(--bd-lightgray);} /* .info_type .icon_type 도 똑같이 맞춰줄 것 */ .label.title { background-color: unset;} /* 주요 기능 버튼 : Main Function Button*/ .mfBtn {appearance: none; -webkit-appearance: none; -moz-appearance: none; border:none; border-radius: 4px; padding:8px 20px; background-color: var(--light-gray); color:var(--text-color); font-weight:700; font-size: 1.125rem; text-decoration: none; cursor: pointer; transition: background 0.3s, color 0.3s;} .mfBtn.emphas { background-color: var(--primary-color);} .mfBtn.dark {background-color: var(--text-color); color:#fff } .mfBtn.dark.fontSizeSmall {font-size: 0.9rem;} .mfBtn.disabled { background-color: #ddd; color:var(--light-gray); cursor:default; } .mfBtn:not(.disabled):hover {background-color: var(--green-color); color:#fff} /* 블릿 타입 버튼 */ .blitBtn {appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; display:inline-block; padding:10px 10px 10px 40px; border:1px solid var(--text-color); border-radius: 4px; color:var(--text-color); font-weight:700; font-size: 1rem; text-decoration: none; background-color: #fff; cursor: pointer; transition: background 0.3s, color 0.3s;} .blitBtn:before { content: ""; display: block; position: absolute; left:8px; top:50%; width: 24px; height:24px; background-position: 50% 50%; background-size: 24px; background-repeat: no-repeat; transform: translateY(-50%); } .blitBtn.small {padding:5px 10px 5px 30px;} .blitBtn.small::before { width: 20px; height:20px; background-size: 20px 20px;} /* 라인인 타입 버튼 마진 추가 */ .blitBtn.pointMarginRight { margin-right: 5px; } /* 라인인 타입 버튼*/ .lineBtn {appearance: none; -webkit-appearance: none; -moz-appearance: none; display:inline-block; padding:10px; border:1px solid var(--text-color); border-radius: 4px; color:var(--text-color); font-weight:700; font-size: 1rem; text-decoration: none; background-color: #fff; cursor: pointer; transition: background 0.3s, color 0.3s;} .lineBtn.small {padding:5px 10px;} /* 다크 버튼 */ .blitBtn.dark, .lineBtn.dark {border-color: #888; background-color:#888; color:#fff;} .blitBtn.gray, .lineBtn.gray { border-color: var(--text-light); color:var(--text-gray)} /* 마우스 오버 효과 */ .blitBtn:hover { background-color: var(--primary-color);} .blitBtn.dark:hover, .lineBtn:hover {border-color: #000; background-color: #000; color:var(--primary-color)} /* 셀렉트박스타입 버튼 */ button.typeSelectBox { display: block; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0 none; background-color: transparent; padding-right: 20px; background-image: url(../images/common/icon_arrowdown.svg); background-repeat: no-repeat; background-position: 100% 50%; } a.typeSelectBox { display: inline-block; padding-right: 20px; background-image: url(../images/common/icon_arrowdown.svg); background-repeat: no-repeat; background-position: 100% 50%; } a.hvMore, button.hvMore{ text-decoration: none; padding-right:15px; background-image: url(../images/common/icon_arrowright.svg); background-repeat: no-repeat; background-position: 100% 50%; background-size:auto .75rem; white-space: nowrap;} a.typeLinkBox{ text-decoration: none; padding-right:15px; background-image: url(../images/common/icon_arrowright.svg); background-repeat: no-repeat; background-position: 100% 50%; background-size:auto .75rem;} button.typeSelectBox .RechargeValue { font-size: 1.5rem; font-weight: bold; color:var(--text-color)} /* 아이콘 타입 관심상품, 장바구니, 공유 버튼 */ .item_thumn button, .iconBtn { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 40px; height: 40px; border: none; cursor: pointer; opacity: .4; transition: opacity 0.3s, background-color 0.3s; border-radius: 50%; background-position: 49% 52%; background-size:30PX 30PX; background-repeat: no-repeat;} .item_thumn button { position: absolute; bottom: 10px; background-color: #000;} .iconBtn { border:1px solid #aaa; background-color: #fff} .iconBtn.checked, .iconBtn.dark { border:1px solid #000; background-color: #000;opacity: 1;} .iconBtn.disabled { opacity:.2; cursor:default; } .item_box>a .item_thumn button {display: none;} .item_box>a:hover .item_thumn button, .item_box>a .item_thumn button.checked{display: block;} .item_thumn button:hover {opacity: .8;} .item_thumn button.checked {opacity:1;} .item_thumn .item_wish { right: 55px; } .item_thumn .item_cart { right: 10px; } /* 3.3 아이콘 */ .item_wish { background-image: url(../images/common/icon_like_white.png);} .item_wish.checked, .iconBtn.item_wish.checked { background-image: url(../images/common/icon_like_full_white.png);} .item_cart { background-image: url(../images/common/icon_shopping_cart_white.png);} .item_cart.checked { background-image: url(../images/common/icon_shopping_cart_full_white.png);} .item_share { background-image: url(../images/common/icon_share_white.png);} .item_lock {background-image: url(../images/common/icon_lock.png);} /* 상품목록 — 비로그인 시 가격 비공개 안내 (브랜드 노란색 계열) */ .price_lock_inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9375rem; color: var(--primary-dark-color); line-height: 1.45; } .info_price.price_member_only { padding-top: 2px; padding-bottom: 2px; } /* icon_lock.png를 프라이머리 골드톤으로 보이게 (원본이 어두운 실루엣일 때) */ .item_info .price_lock_inline .ico_lock { display: inline-block; width: 20px; height: 20px; min-width: 20px; background-size: 20px; background-repeat: no-repeat; background-position: 50%; vertical-align: middle; flex-shrink: 0; filter: brightness(0) saturate(100%) invert(72%) sepia(85%) saturate(1800%) hue-rotate(359deg) brightness(1.02) contrast(1.05); } .item_info .price_lock_txt { font-weight: 700; color: var(--primary-dark-color); } .item_write::before { background-image: url(../images/common/icon_write.png);} .item_write.dark::before { background-image: url(../images/common/icon_write_white.png);} .iconBtn.item_wish { background-image: url(../images/common/icon_like.png);} .iconBtn.item_share { background-image: url(../images/common/icon_share.png);} .iconBtn.item_store, .blit_store::before { background-image: url(../images/common/icon_store.png);} .iconBtn.item_write { background-image: url(../images/common/icon_write.png);} .inlineBlit.cash::before, .blitBtn.cash::before { background-image:url(../images/common/icon_cash.png);} .inlineBlit.coin::before { background-image:url(../images/common/icon_coin.png);} .inlineBlit.coupon::before { background-image:url(../images/common/icon_coupon.png);} .inlineBlit.sale::before { background-image:url(../images/common/icon_sale.png);} .inlineBlit.WL_coupon::before { background-image:url(../images/common/lineicon_coupon_w.png);} .inlineBlit.WL_receipt::before { background-image:url(../images/common/lineicon_receipt_w.png);} .inlineBlit.WL_cash::before { background-image:url(../images/common/lineicon_cash_w.png);} .inlineBlit.WL_location::before { background-image:url(../images/common/lineicon_location_w.png);} .inlineBlit.member::before { background-image:url(../images/common/icon_member.png);} .inlineBlit.memberUser::before { background-image:url(../images/common/icon_member_personal.png);} .inlineBlit.memberBizR::before { background-image:url(../images/common/icon_member_business.png); } .inlineBlit.memberBizD::before { background-image:url(../images/common/icon_member_distribution.png); } .inlineBlit.memberFoodR::before { background-image:url(../images/common/icon_member_food_regular.png); } .inlineBlit.memberFoodS::before { background-image:url(../images/common/icon_member_food_sliver.png); } .inlineBlit.memberFoodG::before { background-image:url(../images/common/icon_member_food_gold.png); } .inlineBlit.memberFoodP::before { background-image:url(../images/common/icon_member_food_Platinum.png); } .inlineBlit.memberFoodV::before, .inlineBlit.vip::before { background-image:url(../images/common/icon_member_food_vip.png); } .inlineBlit.master::before { background-image:url(../images/common/icon_master.png); } .item_location, .blit_location::before { background-image:url(../images/common/icon_location.png);} /* 아이콘 블릿이 있는 블록 요소*/ .blockBlit { display: block; position: relative; padding-left:25px} .blockBlit:before { content: ""; display: block; position: absolute; top:10px; left:0; width: 20px; height:1.8rem; background-position: 0 50%; background-size: 20px; background-repeat: no-repeat; } .blockBlit.item_store::before { background-image:url(../images/common/icon_store_secondary_color.png); } .blockBlit.item_store::after { content:">"; display: inset-block; font-weight: lighter; color:var(--text-light); margin-left: 10px;} /* 아이콘 블릿이 있는 인라인 블록 요소*/ .inlineBlit { display: inline-block; position: relative; padding-left:25px; font-style: normal;} .inlineBlit:before { content: ""; display: block; position: absolute; top:calc(50% - 12px); left:0; width: 24px; height:24px; background-position: 0 50%; background-size: 24px; background-repeat: no-repeat; } .inlineBlit.member, .inlineBlit.sale { font-weight: 900; width: 3.5em; } .inlineBlit.vip, .inlineBlit.master { font-weight: 900; color:var(--red-color); width: 3.5em; } .inlineBlit.master.widthCheck { width: 4.5em; } /* 3.4 서브페이지 Form UI 관련 */ .formGroup { border-top:3px solid #000; border-bottom: 1px solid var(--light-gray); padding:20px 0;} .inlineFormGroup { display: inline-block; white-space: nowrap;} .formGroup>dt { float:left; clear: both; width:8rem; font-size:1.0625rem; color:#000; line-height: calc(1.6rem + 22px); padding:3px 0;} .formGroup>dd { margin-left: calc(8rem + 10px); line-height: calc(1.6rem + 22px); padding:3px 0;} .formGroup input[type=text], .formGroup input[type=password], .formGroup input[type=date], .inlineFormGroup input[type=text], .inlineFormGroup input[type=password], .inlineFormGroup input[type=date] { line-height: 1.6rem; padding-inline: 2px; padding-block: 1px; padding:4px; max-width: clac(100% - 8px); border: 1px solid var(--light-gray); border-radius: 5px;} .formGroup select, .inlineFormGroup select { appearance: none; -webkit-appearance: none; -moz-appearance: none; line-height: 1.6rem; padding-inline: 2px; padding-block: 1px; padding:4px 20px 4px 4px; border: 1px solid var(--light-gray); border-radius: 5px; background-image: url(../images/common/icon_arrowdown.svg); background-position: calc(100% - 5px) 50%; background-repeat: no-repeat; } .formGroup dd button, .inlineFormGroup button { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:#eee; color:var(--text-color); color:#fff; background-color:var(--text-gray); line-height: 1.6rem; padding: 5px; border:1px solid var(--text-gray); border-radius:3px;} .formGroup label { white-space: nowrap;} label.mainInput { display: block; font-weight: 900;} div.mainInput {position: relative; border-bottom: 1px solid var(--text-color); margin-top: 20px;} div.mainInput input, div.mainInput button {appearance: none; -webkit-appearance: none; -moz-appearance: none; border:none; background-color: transparent;} div.mainInput input { display: block; width: calc(100% - 50px); font-size: 2rem; font-weight: bold; } div.mainInput .resetBtn { position: absolute; top:0; right: 0;} .inputAmountSet input { padding-right:50px;} .inputAmount-unit { position: absolute; left:0; top:0; display: block; width:100%; height:100%; font-size: 1.5rem; font-weight: bold; } .inputAmount-value { visibility: hidden; font-size: 2rem;} div.btnBlock { display: flex; justify-content: stretch; align-items: stretch; margin:10px 0 5px; } div.btnBlock button { display: block; flex: 1; appearance: none; -webkit-appearance: none; -moz-appearance: none; border-top:1px solid var(--light-gray); border-bottom:1px solid var(--light-gray); border-left: 1px solid var(--light-gray); border-right:0 none; background-color: #fff; font-size: 1rem; line-height: 1.375rem; padding:.75rem; text-align: center; } div.btnBlock button:first-child { border-bottom-left-radius: 5px; border-top-left-radius: 5px; } div.btnBlock button:last-child { border-bottom-right-radius: 5px; border-top-right-radius: 5px; border-right: 1px solid var(--light-gray)} div.btnBlock button:hover { background-color: #eee;} .subInput { margin: -5px 0 10px; padding:5px 10px; line-height: 2rem; background-color: #f4f4f4;} .subInput label { display: inline-block; margin-right: 1em; min-width:6rem; font-size:.875rem;} .subInput input[type=text], .subInput input[type=password] { line-height: 1.2rem; padding-inline: 2px; padding-block: 1px; padding:2px; } .input-full { width: calc(100% - 20px) !important; } dd .descText { margin-top: -5px;} ul.descText, ol.descText { padding-left: 1rem;} .formGroup + ul.descText, .formGroup + ol.descText {width: 100%; background-color: #f7f7f7; padding:10px 10px 10px 30px;} .descText, .helfLink {color:var(--text-gray); font-size: .85rem; line-height: 1.2rem; padding: .3rem 0; } div.descText { margin-top: 5px;} footer .helfLink { text-align: center;} .helfLink a {color:var(--text-gray); text-decoration: none; transition: color 0.3s;} .helfLink a:hover {color:var(--text-color); text-decoration:underline;} .Required { display: inline-block; width:.6em; height: 30px;overflow: hidden; white-space: nowrap; color:red; letter-spacing:20px ;} .emphasText { display: inline-block; line-height: 1.2rem; padding: 5px 10px; border-radius: 5px; color:#fff; font-weight: bold; font-style: italic; animation-name: emphasText; animation-duration: 3s; animation-iteration-count: infinite; word-wrap:keep-all;} .emphasText > em {color: #FFE812} @keyframes emphasText { 0% { background-color: var(--green-color); } 50% { background-color: var(--text-color); } 100% { background-color: var(--green-color); } } @media only screen and (max-width: 600px) { .formGroup>dt { float:none; width:auto; line-height: 1.4rem; margin-top: 10px;} .formGroup>dt:first-child {margin-top:0;} .formGroup>dd { margin-left: 0;} } /* 3.4.9 특수 Form UI */ /* 인증 박스 */ .certifyBox {width: 100%; background-color: #f7f7f7; padding:35px 0 25px;} .certifyBox_btn { display: block; width:340px; margin: 0 auto; padding:30px 10px; border:1px solid #333;text-align: center; text-decoration: none; font-weight: 500; font-size: 1.125rem; color:#333; background: #fff; } .certifyBox_btn::before {content: ""; display: inline-block; width: 30px; height:50px; background-position: 50%; background-size: 100%; background-repeat: no-repeat; vertical-align: middle; margin-right: 10px; opacity: .7;} .certifyBox_btn.type_phone::before { background-image: url(../images/common/lineicon_phone.svg);} .certifyBox_btn.type_phone.isCheck::before { background-image: url(../images/common/lineicon_phone_isCheck.svg);} .certifyBox_btn:hover { border-color: #000; color:#000} .certifyBox_btn:hover::before { opacity: 1;} .certifyBox_btn.isCheck {color:#000; font-weight: 900;} .certifyBox .descText {width:360px; margin: 0 auto;} /* 약관 동의 */ .formSect details { border-bottom:1px solid var(--light-gray);} summary::-webkit-details-marker { display: none;} .termsTitle { display: block; padding:20px 10px; border-top:3px solid #000; border-bottom: 1px solid #000; font-size: 1.25rem; } .termsSummary { list-style-type: none; position: relative; padding: 20px 30px 20px 10px; font-size: 1.125rem; line-height:160%; cursor: pointer;} .termsSummary::after { content:""; position: absolute; top:20px; right:10px; display: block; width: 20px; height: 20px; background-image: url(../images/common/footer-icon_top.svg); background-size:20px auto; background-repeat: no-repeat; background-position: 50%; opacity: .5; transform: rotate(180deg);} details[open] .termsSummary::after {transform: rotate(0);} .termsBox { overflow-y: auto; width: 100%; max-height: 160px; padding: 20px; background-color: #f8f8f8; border-top:1px solid #e8e8e8; color:var(--text-gray); line-height: 1.6rem; word-break: break-all;} .termsTitle input[type=checkbox], .termsSummary input[type=checkbox] { margin-right: 5px;} .termsSummary .nowrap.inlineBlock { font-size:smaller;} /* 체크박스 & 라디오 , 버튼 커스텀 */ textarea {appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; font-size: 1rem; border:1px solid var(--light-gray); padding: 10px; width:calc(100% - 20px) ; border-radius: 5px;} input[type=checkbox] { box-sizing: border-box; width:1.25rem; height:1.25rem; padding: 0; margin: 0; cursor: pointer; vertical-align: middle; } input[type=radio], .inlineCheck input[type=checkbox] {appearance: none; -webkit-appearance: none; -moz-appearance: none; width:25px; height:25px; margin:0; vertical-align: middle; border:0; background-image: url(../images/common/formUI_checkboxCircle.png); background-position: 50% 50%; background-size:30px 30px; background-repeat: no-repeat;} input[type=radio]:checked, .inlineCheck input[type=checkbox]:checked { background-image: url(../images/common/formUI_checkboxCircle_checked.png);} .subInput input[type=radio] { width:1.5rem; height:1.5rem; background-size: 1.5rem 1.5rem; } .subInput input[type=checkbox] { width:1rem; height:1rem; } .subInput input[type=text] {appearance: none; -webkit-appearance: none; -moz-appearance: none; border:1px solid var(--light-gray); height:1.5rem; line-height: 1.5rem; padding: 5px; border-radius: 5px; min-width: calc(100% - 12rem - 30px);} .btnHelp { display:inline-block; appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; vertical-align: middle; border:0; background-color: transparent; background-image:url(../images/common/icon_help.svg); background-repeat: no-repeat;} label.includeMemo { display: block;} label.includeMemo input[type=text]{ display: none; } label.includeMemo.active input[type=text] {display: inline-block;} label.includeMemo input.typeBlock[type=text] { margin-left: 24px; width: calc(100% - 3.44rem);} label.includeMemo.active input[type=text] {display: block;} .inputPhoneSet, .inputCashCardSet, .inputBizNumSet { display: flex; justify-content: center; justify-items: stretch; align-items: stretch; padding: 5px; border:1px solid var(--light-gray); border-radius: 5px; flex-wrap: nowrap; width: 100%; margin:5px 0} .inputPhoneSet input, .inputCashCardSet input, .inputBizNumSet input { appearance: none; -webkit-appearance: none; -moz-appearance: none; border:0 none; background-color: transparent; font-size: 1.0625rem; text-align: center; } .inputPhoneSet input { max-width: 30%;} .inputCashCardSet input { max-width: 22%;} .inputBizNumSet input { width: 17%; } .inputBizNumSet input:first-child { width: 27%; } .inputBizNumSet input:last-child { width: 47%; } button.typeSelectBox.blockBox {padding: 5px 20px 5px 5px; border:1px solid var(--light-gray); border-radius: 5px; width: 100%; font-size: 1.0625rem; margin-bottom: 5px; background-position: calc(100% - 10px) 50%; text-align: left;} /* 가상 체크박스 - 전체 선택 */ .formUi.checkedAll {appearance: none; -webkit-appearance: none; -moz-appearance: none;position: relative; padding-left:30px; border:none; font-size:1.2rem; color: #222; text-decoration: none; line-height: 1.2rem; background-color: transparent; cursor: pointer;} .formUi.checkedAll::before { content:""; display: block; position: absolute; top:calc(50% - 12px); left:0; width: 20px; height:20px; border: 2px solid #aaa; border-radius: 3px; background-color: #fff; background-position: 50% 50%; background-size: 18px; background-repeat: no-repeat; background-image: none; } .formUi.checkedAll.isCheck::before, .formUi.checkedAll:checked::before { background-image: url(../images/common/formUI_checked2.png); background-size: 28px; border-color: transparent; } /* 가상 체크박스 & 라디오 버튼튼 - 옵션 선택 */ .formUi.checkBox, .formUi.radioBtn {appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; padding: 15px 7px 15px 37px; border:1px solid #aaa; border-radius: 5px; color: #222; text-decoration: none; line-height: 1.2rem; background-color: #fff; cursor: pointer;} .formUi.checkBox>strong, .formUi.checkBox>span { display:inline-block;} .formUi.checkBox>strong:first-child { margin-right:10px;} .formUi.checkBox::before {content:""; display: block; position: absolute; top:calc(50% - 12px); left:.5rem; width: 24px; height:24px; background-position: 0 50%; background-size: 24px; background-repeat: no-repeat; background-image: url(../images/common/formUI_checkbox.png); } .formUi.checkBox.selected {padding: 13px 5px 13px 33px; border-color: var(--primary-color); border-width: 3px; } .formUi.checkBox.selected::before {background-image: url(../images/common/formUI_checked.png);} .formUi.radioBtn::before {content:""; display: block; position: absolute; top:calc(50% - 12px); left:.5rem; width: 24px; height:24px; background-position: 0 50%; background-size: 24px; background-repeat: no-repeat; background-image: url(../images/common/formUI_radioBtn.png); } .formUi.radioBtn.selected {padding: 13px 5px 13px 33px; border-color: #000; border-width: 3px; } .formUi.radioBtn.selected::before {background-image: url(../images/common/formUI_radioBtn_checked.png);} /* 수량 */ .quantity-control { display: flex; align-items: center; gap:2px; } .quantity-control button { width: 32px; height: 32px; font-size: 20px; line-height: 1; border: 1px solid #ccc; background: #fff; cursor: pointer; } .quantity-control input[type="number"] { width: 50px; height: 28px; text-align: right; font-size: 16px; border: 1px solid #ccc; background: #f9f9f9; } /* 반응형 */ @media only screen and (max-width: 600px) { .termsSummary .nowrap.inlineBlock { display: block; margin-left: 26px; } } @media only screen and (max-width: 480px) { .certifyBox_btn, .certifyBox .descText { width: auto; margin: 0 5.8%; } .termsTitle {font-size: 1.125rem;} .termsSummary { font-size: 1rem;} } /* 3.5 목록 */ /* */ .infoGroup { display: flex; flex-wrap: wrap; justify-content: stretch; border-top:3px solid #000; border-bottom: 1px solid var(--light-gray);} .infoGroup>dt { width:8rem; font-size:1.0625rem; color:#000; line-height: calc(1.2rem + 12px); padding:10px 0;} .infoGroup.wideDT>dt { width:12rem; text-align: right;} .infoGroup.wideDT>dd { display: flex; gap: 10px; justify-content: stretch; } .infoGroup>dd+dt, .infoGroup>dd+dt+dd {border-top:1px solid var(--light-gray)} .infoGroup>dd {min-width:calc(100% - 12rem); flex: 1; line-height: calc(1.2rem + 12px); padding:10px 0 10px 10px;} .infoGroup>dd+dd { min-width:100%; padding: 0 0 10px calc(8rem + 10px);} .infoGroup>dd .coupon-item { display: inline-block; font-size: smaller;} .infoGroup>dd .mainExplan strong { display: inline-block; white-space: nowrap; font-size: larger; font-weight: 900; margin-right: .1rem;} .infoGroup>dd .mainExplan.amount { width:8rem; text-align: right; } .infoGroup.wideDT>dd .descText { flex:1; margin-top: 0; line-height: 1rem;} .infoGroup>dd .descText strong, .infoGroup>dd .coupon-item strong { color: var(--red-color);} .infoGroup input[type=text]{ line-height: 1.2rem; padding-inline: 2px; padding-block: 1px; padding:4px; max-width: clac(100% - 8px); } .infoGroup>dt.emphas, .infoGroup>dd.emphas { background-color: #fee; color:var(--red-color)} .listPage_navi {display: flex; flex-wrap: nowrap; justify-content: center; gap:20px; padding:10px 0} .listPage_navi .pageLink {display:inline-block; text-align: center; } .listPage_navi a, .listPage_navi button { appearance: none; -webkit-appearance: none; -moz-appearance: none; display:inline-block; min-width: 20px; border:none; text-decoration: none; background-color:var(--bd-lightgray); border-radius: 15px; line-height: 1.5rem; padding:3px 5px; transition: all .3s; } .listPage_navi .btnNavi { width: 70px; background-repeat: no-repeat; background-size: 8px; font-weight: light; font-size: 1rem;} .listPage_navi .tyPrev { padding-left: 25px; background-image: url(../images/common/icon_arrowleft.svg); background-position:10px 50% ;} .listPage_navi .tyNext { padding-right: 25px; background-image: url(../images/common/icon_arrowright.svg); background-position:calc(100% - 10px) 50% ;} .listPage_navi a.active, .listPage_navi button.active { font-weight: bold; color:var(--bg-darkgray); background-color: var(--primary-color);} .listPage_navi a:hover, .listPage_navi button:hover { color:#fff; background-color: var(--bg-darkgray);} /* 반응형 */ @media only screen and (max-width: 720px) { .termsSummary .nowrap.inlineBlock { display: block; margin-left: 26px; } } @media only screen and (max-width: 620px) { .infoGroup>dd .mainExplan.amount { display: block; width: 100%; text-align: left} .infoGroup.wideDT>dd { display: block } .infoGroup>dd {line-height:1.2rem} } @media only screen and (max-width: 540px) { .infoGroup.wideDT { display: block } .infoGroup.wideDT>dt { width:100%; text-align: left; padding:10px 10px 0 10px; ;} .infoGroup.wideDT>dd { width:100%; padding:0px 10px 10px; border-top: 0 none } } /* 3.6 콘텐츠 */ .borderBox { position: relative; border-top:1px solid var(--bd-lightgray); border-bottom:1px solid var(--bd-lightgray); padding:20px; line-height: calc(1rem + 22px);} .borderBox.alignC { display: flex; justify-content: center; gap:10px; flex-wrap: wrap; } .borderBox .boxTitle {font-size: 1.25rem;} .borderBox .inlineBlock { display: inline-block; font-weight: 100; line-height: calc(1rem + 22px);} .borderBox .inlineBlock strong { font-weight: bold;} .borderBox p.inlineBlock { font-size: 1.375rem; } .borderBox p.amount { font-weight: bold; } .borderBox p.amount strong { font-weight: 900; font-size: 1.725rem; color:var(--red-color) } .borderBox .sideBtnSet { position: absolute; right:20px; top:50%; line-height:2rem; transform: translateY(-50%);} .borderBox input[type=text]{ line-height: 1.5rem; font-size: 1.25rem; font-weight: bold; font-family: 'NanumSquare'; padding-inline: 2px; padding-block: 1px; padding:4px; text-align: center;} @media only screen and (max-width: 720px) { .borderBox {padding:2.7%} .borderBox label, .borderBox .inlineBlock { display: block; text-align: center;} .borderBox .inlineBlit {margin: 10px auto; } .borderBox .blitBtn.floatRight, .borderBox .lineBtn.floatRight { float:none; display: block; } .borderBox .blitBtn.floatRight, .borderBox .lineBtn.floatRight.pointMarginBottom { margin-bottom: 5px; } /* 라인인 타입 버튼 마진 추가 */ .blitBtn.pointMarginRight { margin-right: 0px; } } @media only screen and (max-width: 480px) { .borderBox {padding:10px} .borderBox.alignC { display: block;} .borderBox.alignC label { margin-bottom: 10px;} .borderBox label.nowrap {white-space:inherit;} .borderBox label input, .borderBox label textarea { display:block; width:calc(100% - 12px);} .borderBox .lineBtn, .borderBox .blitBtn { display:block; width: 100%;} } /* 3.9 기타 특수 요소 */ /* 3.9.01 콘텐츠 카테고리 리스트 콘트롤 박스 */ .contentsCtrl { display: flex; justify-content: space-between; margin-bottom: 30px;} .ctrlView { display: flex; flex-wrap: wrap; justify-content: start; align-content: stretch;} .ctrlView input[type="checkbox"] + span { display:block; text-wrap: nowrap; padding: 8px 12px; margin-right:5px; margin-bottom:5px; font-size: 14px; line-height: 100%; font-weight: bold; cursor: pointer; border-width:2px; border-style: solid; border-color:var(--text-light); border-radius: 8px; transition: background 0.3s, color 0.3s, border-color 0.3s; } .ctrlView input[type="checkbox"] + span:not(.typeAll) {color:var(--text-light)} .ctrlView input[type="checkbox"] + span.typeAll { color: white; background-color: var(--text-light);} .ctrlView input[type="checkbox"] + span::before { filter: grayscale(); opacity: .5; display:inline-block; vertical-align: middle; color:var(--text-gray)} .ctrlView input[type="checkbox"]:checked + span::before { filter: none; opacity: 1;} .ctrlView input[type="checkbox"]:checked + span {border-color: var(--text-color); color:var(--text-color)} .ctrlView input[type="checkbox"]:checked + .typeAll { background-color: var(--text-color); color:#fff} .ctrlView input[type="checkbox"]:checked + .typeToday { border-color: var(--primary-color); } .ctrlView input[type="checkbox"]:checked + .typeSale { border-color: var(--red-color); } .typeToday:before {content: "🚀 "; } .ctrlView input[type="checkbox"] + .typeSale:before {content: "% "; color: var(--red-color)} .ctrlSort select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #fff; color:var(--text-color); font-size: 14px; font-weight: bold; text-wrap: nowrap; overflow: hidden; padding: 8px 32px 8px 16px; border: 1px solid var(--text-gray); border-radius: 4px; cursor: pointer; transition: background 0.3s, color 0.3s; } /* 포커스 시 테두리나 그림자 등으로 포커스 상태를 시각적으로 표현 */ .ctrlSort select:focus { outline: none; box-shadow: 0 0 0 2px rgba(91, 145, 245, 0.5); } /* 옵션이 선택된 상태와 유사하게 보이도록 하기 위한 커스텀 화살표 추가 */ .ctrlSort { position: relative; display: inline-block; } /* 화살표 아이콘 (선택박스 오른쪽에 배치) */ .ctrlSort::after { content: "▼"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 12px; color: var(--text-light); } /* 모바일 화면에서 화살표 아이콘 위치 조정 */ @media only screen and (max-width: 563px) { .ctrlSort::after { top: 20%; } } /* 3.9.02 주소박스 */ aside.address { display: flex; align-items: center; justify-content: space-between; margin-top:20px; padding:20px; background-color:#fff; font-size:1.125rem; border:5px solid #eee } aside.address .inlineBlit { font-weight:900; width:6rem;} aside.address p {flex-grow: 1;} section.address { margin-top:20px;} section.address h4 { font-weight:900; font-size: 1.2rem;} .addressItem { position: relative; padding:20px; margin:10px auto; border:1px solid var(--light-gray); border-radius: 10px;} .addressItem_title { line-height: 1.5rem; padding: .25rem 0; font-size: 1.25rem;} .addressItem dl { margin-bottom: 10px;} .addressItem dd { line-height: 1.25rem; padding: .375rem 0;} .addressItem .phoneNum { font-size:1.125rem; font-weight: bold; color:var(--text-gray); margin-right: 10px;} label {position: relative; display: inline-block;} label .tooltip { white-space: nowrap; top:1.25rem} .addressItem > button[data-popupid="paymentPopup_ChangeDelivery"] { position: absolute; right:20px; top:20px} .addressItem > button[data-popupid="paymentPopup_DeliveryNote"] { width:100%; margin-bottom:10px; font-size: 1rem; border:1px solid var(--light-gray); background-position: calc(100% - 10px) 50%; height:40px; line-height: 40px;border-radius: 5px; text-align: left; color:var(--text-gray)} .addressItem textarea[name="DeliveryNote"] { background-color: #fff; display: block; pointer-events: none; visibility: hidden; height:0; padding:0 } .addressItem textarea.active[name="DeliveryNote"] { background-color: #fff; display: block; pointer-events: auto; visibility: visible; padding:10px; height:2.4rem; line-height: 1.2rem; margin-bottom:10px; margin-top:-5px} /* 3.9.03 추천 콘텐츠 */ /* 추천 광고 배너 */ .recom_ad a{display: block; width:100%; margin:20px 0; text-align: center; border:0 none; border-radius: 5px; overflow: hidden} .recom_ad a>img {display: block; margin: 0 auto; max-width: 100%;} /* 추천 상품 리스트 */ .recom_goods {margin:50px 0 } .recom_goods h4 {padding:10px 0; font-size:1.4rem; font-weight: 600; border-bottom:1px solid var(--light-gray); } .recom_list { margin: 20px 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */} .recom_list::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */} .recom_track { display:block; white-space: nowrap;} .recom_track .item_box { display:inline-block; list-style: none; width:calc(50% - 12px); margin-right: 24px;} .recom_track .item_box a {position: relative; display: block; text-decoration: none; padding-left:143px; min-height: 143px;} .recom_track .item_thumn { position: absolute;top:0; left:0; width:143px; height:143px; border:1px solid var(--light-gray)} .recom_track .item_thumn img { width: 100%;} .recom_track .item_info {padding:0 12px; font-size: 14px; color: #333; } .recom_track .item_info .icon_type{margin-bottom: 10px; padding: 4px 7px; font-size: 12px; line-height: 100%;} @media only screen and (max-width: 860px) { .recom_track .item_box { width:32%; margin-right:calc(1.5% - 1px);} .recom_track .item_box a{padding-left:0} .recom_track .item_thumn { position:static; width:100%; height: auto;} .recom_track .item_info {padding:10px 0} .recom_track .item_info .icon_type {position: absolute; top: 10px;left:10px;} } @media only screen and (max-width: 580px) { .recom_track .item_box { width:48%; margin-right:2%;} } @media only screen and (min-width: 1280px) { .recom_track .item_box { width:calc(33% - 20px); margin-right: 30px;} } /* 메인: 세일가 추천 — 상품목록과 동일 구조이나 메인용 컴팩트 사이즈 */ .main-sale-goods { margin: 28px 0; min-height: 400px;} @media only screen and (max-width: 768px) { .main-sale-goods { min-height: 200px; } } .main-sale-goods h4 { padding: 6px 0 8px; font-size: 2.0rem; font-weight: 600; } .main-sale-goods .recom_list { margin: 12px 0; } /* 메인 세일가 없음 — productList item_empty 와 동일 마크업, 가로 스트립 레이아웃용 */ .main-sale-goods .recom_track.main-sale-strip .item_empty { display: block; width: 100%; white-space: normal; margin: 0; padding: 30px 20px 0px; text-align: center; list-style: none; box-sizing: border-box; } .main-sale-goods .recom_track.main-sale-strip .item_box { position: relative; width: 132px; margin-right: 10px; background: #fff; border-radius: 6px; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); overflow: hidden; vertical-align: top; transition: transform 0.25s, box-shadow 0.25s; } @media only screen and (min-width: 480px) { .main-sale-goods .recom_track.main-sale-strip .item_box { width: 148px; margin-right: 12px; } } @media only screen and (min-width: 1024px) { .main-sale-goods .recom_track.main-sale-strip .item_box { width: 250px; margin-right: 20px; } } .main-sale-goods .recom_track.main-sale-strip .item_box:hover { transform: translateY(-3px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12); } .main-sale-goods .recom_track.main-sale-strip .item_box a { padding-left: 0; min-height: 0; text-decoration: none; } /* 정사각보다 약간 낮게 → 카드 전체 높이 축소 */ .main-sale-goods .recom_track.main-sale-strip .item_thumn { position: relative; width: 100%; padding-top: 88%; height: 0; overflow: hidden; background: #f8f8f8; border-radius: 6px 6px 0 0; border: none; } .main-sale-goods .recom_track.main-sale-strip .item_thumn img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; } .main-sale-goods .recom_track.main-sale-strip .item_info { padding: 8px 8px 10px; font-size: 12px; color: #333; } .main-sale-goods .recom_track.main-sale-strip .item_info .company { font-size: 11px; margin-bottom: 2px; } .main-sale-goods .recom_track.main-sale-strip .item_info .title { font-size: 12.5px !important; font-weight: 800; line-height: 1.35; display: block; margin-top: 2px; } .main-sale-goods .recom_track.main-sale-strip .item_info .info_price { margin: 6px 0 0; } .main-sale-goods .recom_track.main-sale-strip .item_info .info_price del { font-size: 11px; margin-bottom: 3px; } .main-sale-goods .recom_track.main-sale-strip .info_price .discount_rate { font-size: 0.95rem !important; } .main-sale-goods .recom_track.main-sale-strip .info_price .discount_price, .main-sale-goods .recom_track.main-sale-strip .info_price .discount_price strong { font-size: 0.95rem !important; font-weight: 800; } .main-sale-goods .recom_track.main-sale-strip .priceItem { line-height: 1.35rem; margin-top: 2px; } .main-sale-goods .recom_track.main-sale-strip .priceItem .inlineBlit:before { width: 18px; height: 18px; background-size: 18px; top: calc(50% - 9px); } .main-sale-goods .recom_track.main-sale-strip .priceItem .inlineBlit { padding-left: 20px; min-height: 1.35rem; } .main-sale-goods .recom_track.main-sale-strip .item_info .icon_type:not(.typeSale) { position: absolute; top: 6px; left: 6px; display: inline-flex; align-items: center; justify-content: center; padding: 3px 6px !important; font-size: 10px !important; font-weight: 700; border-radius: 3px; } .main-sale-goods .recom_track.main-sale-strip .item_info .icon_type.typeSale { width: 3.25rem !important; height: 3.25rem !important; padding-top: 1.85rem !important; font-size: 0.65em !important; background-size: 3.25rem auto !important; } @media only screen and (max-width: 860px) { .main-sale-goods .recom_track.main-sale-strip .item_info .icon_type.typeSale { position: absolute; top: 0; right: 0; left: auto; margin-bottom: 0; } } /* 화살표 아이콘 (선택박스 오른쪽에 배치) */ /* 모바일 검색 모달 */ .mobile-search-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: none; align-items: center; justify-content: center; z-index: 9999; } .mobile-search-modal.active { display: flex; } .mobile-search-modal-inner { width: 90%; max-width: 420px; background: #fff; border-radius: 12px; padding: 20px 18px 16px; box-shadow: 0 12px 30px rgba(0,0,0,0.2); } .mobile-search-modal-title { font-size: 16px; font-weight: 600; margin-bottom: 12px; } .mobile-search-input-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; } .mobile-search-input-wrap input { flex: 1; height: 40px; padding: 0 10px; border-radius: 6px; border: 1px solid #ddd; font-size: 14px; } .mobile-search-input-wrap button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; } .mobile-search-input-wrap button img { width: 20px; height: 20px; } .mobile-search-actions { text-align: right; margin-top: 4px; } .mobile-search-actions button { border: none; background: none; font-size: 13px; color: #777; padding: 4px 6px; } @media (min-width: 769px) { .mobile-search-modal { display: none !important; } } /*-------------------------------------------------------------- 4.0 Layout Desgin : 레이아웃 디자인 ----------------------------------------------------------------*/ .page { position:relative; margin: 0; padding: 0; overflow-x: hidden; } /* 전체 폭 레이아웃 */ .layout-full, .full-width, .container-fluid { width: 100%; margin: 0; padding: 0; } /* 좌우 여백이 있는 고정된 너비 */ .contained-width, .container, .layout-contained { max-width: var(--container-width); /* 최대 너비 설정 */ margin: 0 auto; /* 가운데 정렬 */ padding: 0 20px; /* 좌우 여백 */ } /* 4.1 Header */ #app>header { border-bottom: 5px solid var(--primary-color); height:220px; background-color: #fff; } .skip-nav-list { background-color: var(--black); color: var(--white); height: 4rem; line-height: 4rem; position: fixed; text-align: center; top: -50rem; width: 100%; z-index: 60; } .header-main { position: relative; max-width: var(--container-width); margin: 0 auto; } .header-logo { position: relative; top:20px; width: 210px; } .header-logo a { display: block; width: 100%; height: 210px; background-image: url(../images/common/header-logo.svg); background-repeat: no-repeat; background-size: 100%; overflow: hidden; text-decoration: none; } .header-logo a>span { position: relative; top:200%} .header-category { position: absolute; top:50px; left:210px; overflow: visible; z-index: 3000; } .header-category .btn-category { position: relative; z-index: 3001; background-image: url(../images/common/icon_category.svg); background-color: transparent; background-repeat: no-repeat; background-position: 0% 50%; padding-left: 2.2rem; background-size: 1.8rem; white-space: nowrap; font-size: 1.125rem; font-weight: 700; display: block; height: 2rem; width: 10rem; overflow: hidden; } .header-category button { border: 0; cursor: pointer; padding: 0; } .header-menu { display: none; } .header-menu li, .header-user li { display: block; flex-grow: 1; list-style: none; } .header-search { position: absolute; top:120px; left: 210px; right: 8px; display: flex; flex-wrap: nowrap; justify-content: space-between; border: 1px solid var(--black); border-radius: 12px; padding:.5rem } .header-search label { display: block; padding: 0.5em; width: calc(100% - 50px); } .header-search input[type="text"] { display: block; border: none; font-size: 1.2rem; font-weight: 400; line-height: 2.2rem; color:var(--light-gray); width: 100%; height: 100%; } .header-search input[type="text"]:focus { color: var(--black); } .header-search input[type="text"]:focus-visible { outline: -webkit-focus-ring-color auto 0; } .header-search button { border: 0; cursor: pointer; padding: 0; width: 2rem; background-color: transparent; overflow: hidden; white-space: nowrap; opacity:.75; } .header-search button:hover, .header-search button:active { opacity: 1;} .search-correction-banner { position: absolute; top: 185px; left: 210px; right: 8px; margin: 0; z-index: 4; padding: .2rem 1rem; border-radius: 8px; border: 1px solid #cfe3ff; background: #f3f8ff; } .search-correction-text { margin: 0; color: #2b5ea8; font-size: .88rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-correction-type { display: inline-block; margin-left: .35rem; padding: 2px 8px; border-radius: 999px; font-size: .75rem; background: #e6f0ff; color: #1f4f93; vertical-align: middle; } .search-correction-toast { position: fixed; left: 12px; right: 12px; top: 188px; bottom: auto; transform: none; max-width: none; padding: 10px 14px; border-radius: 10px; border: 1px solid #cfe3ff; background: #f3f8ff; color: #2b5ea8; font-size: .85rem; line-height: 1.35; z-index: 4000; opacity: 0; display: none; pointer-events: none; transition: opacity .18s ease; } .search-correction-toast.show { display: block; opacity: 1; } @media only screen and (max-width: 1024px) { /* 모바일/태블릿: 검색창 위 영역에 배너 고정 */ .search-correction-banner { display: none; } } .header-user { position: absolute; display: flex; align-content: space-between; top:43px; right:0; width: 308px; } .header-user li:nth-child(2) {display: none;} .header-user a{ display: block; width: 50px; height: 50px; font-size: .825rem; margin: 0 auto; background-size: 35px; background-position: center center; background-color: var(--primary-dark-color); background-repeat: no-repeat; border-radius: 50%; text-align: center; font-size: .825rem; font-weight: 700; text-decoration: none; } .header-user .user-mn-fav {background-image:url(../images/common/icon-white_fav.svg)} .header-user .user-mn-search {background-image:url(../images/common/icon_white_search.svg)} .header-user .user-mn-user {background-image:url(../images/common/icon-white_user.svg)} .header-user .user-mn-cart {background-image:url(../images/common/icon-white_cart.svg)} .header-user .user-mn-cash {background-image:url(../images/common/icon-white_cash.svg)} .header-user .user-mn-cs {background-image:url(../images/common/icon-white_cs.svg)} .header-user .user-mn-logout {background-image:url(../images/common/icon-white_logout.svg)} .header-user a:hover{ background-color: var(--primary-color); } .header-user a>span { position: absolute; display:block; top:calc(100% + 3px); width: 85px; text-align: center; margin:0 -14px; letter-spacing: -1px; opacity: 0; } .header-user a:hover>span { opacity: 1 !important; } /* 4.1.1 Header Fixed */ #app>.fixed-header { position: fixed; top:0; left: 0; right:0; height: 85px; z-index: 999; } #app>.compact-header {height: 85px} .fixed-header .header-main, .compact-header .header-main { display: flex; justify-content: space-between; height:80px; align-items: center;} .fixed-header .header-logo, /*.compact-header .header-logo { position: static; width: 120px; height: 120px;} 로고 짤려서 position: static; 삭제*/ .compact-header .header-logo { width: 120px; height: 120px;} .fixed-header .header-category, .compact-header .header-category { position: relative; top:auto; left: auto;} .fixed-header .header-category .btn-category, .compact-header .header-category .btn-category{ width: 2rem } .fixed-header .header-menu, .compact-header .header-menu { display: none; } .fixed-header .header-search, .compact-header .header-search {position: static; width:var(--fixed-search-width); height: 58px;} .fixed-header .header-user, .compact-header .header-user {position: static; } .fixed-header .header-user a>span, .compact-header .header-user a>span { top:70px; display: block; width: 85px; text-align: center; margin:0 -18px; opacity: 0; } /* 4.2 Category */ #subCategory { display: none; position:absolute; z-index: 2999; top: -10px; left: -13px; right: -13px; width: calc(100% + 30px); min-width: calc(10rem + 30px); padding:50px 10px 13px 10px; overflow: visible; border:1px solid #000; background-color: #fff; transition: transform 0.5s ease, opacity 0.1s ease; opacity: 0; } .header-category:hover #subCategory { display:block; opacity: 1;} .subMenu_list li { list-style: none; padding: 2px 0; position: relative;} .subMenu_list>li>a { display: block; text-decoration: none; color:var(--text-gray); padding:.25rem; line-height: 1.25rem; font-weight: 500; border-radius:5px; background-color: #fff;; transition: background-color .5s ease; } .subMenu_list>li>a:hover { background-color:#f4f4f4 } .subMenu_list .forMobile a { color:#000; } .fixed-header #subCategory{ top: -10px; left: -15px; right: -15px; width: calc(100% + 30px); } .subMenu_list ul { position: absolute; z-index: 3003; top:0; left: calc(10rem + 10px); width: auto; padding:10px; background-color: #eee; } .subMenu_list>li:hover ul { display: block;} .subMenu_list ul a { display: block; white-space: nowrap; text-decoration: none; line-height: 1.5rem; color:#000 } .subMenu_list ul a:hover{ text-decoration: underline; } .forMobile, .subMenu_list ul { display: none;} /* 4.8 Footer */ .footer-cs { display: flex; justify-content:space-between; align-items: center; flex-wrap: wrap; width: var(--container-width); margin: 0 auto; padding: 25px 0; border-top: 1px solid var(--text-light); } .mypage + footer {border-top: 1px solid var(--text-light);} .mypage + footer .footer-cs { border-top: 0 none} .cs-info { display: flex; justify-content: flex-start; width: 100%} .cs-info dt { padding-right: 7px; } .cs-info dt img { width: 60px; } .cs-info dd a { display: block; letter-spacing: -4px; font-size: 2.4rem; font-weight: 900; text-decoration: none; color:var(--text-color); } .cs-info dd span { display: block; font-size: 1rem; letter-spacing: -1px; color:var(--text-light) } a.cs-kakao, .cs-menu a { display: block; width:calc(15vw - 14px); height:calc(5vw - 14px); padding-top: 10vw; border-radius: 10px; background-repeat: no-repeat; background-position: 50% 30%; background-size: 60%; text-align: center; line-height: calc(5vw - 14px); font-size: .875rem; text-decoration: none; letter-spacing: 0; font-weight: 700; opacity: .75; } a.cs-kakao:hover, .cs-menu a:hover { opacity: 1; } a.cs-kakao { margin-top: 20px; border:1px solid #FFE812; background-image: url(../images/common/footer-icon_kakao.svg); border-radius: 10px; color:var(--text-color); background-color:#FFE812; } .cs-menu { display: flex; justify-content:space-between; width:calc(75vw - 34px); padding-top:2vw } .cs-menu a { border:1px solid #C9CACA; color:var(--text-gray);} .cs-menu a.cs-1on1 {background-image: url(../images/common/footer-icon_1on1.svg);} .cs-menu a.cs-qna {background-image: url(../images/common/footer-icon_qna.svg);} .cs-menu a.cs-notice {background-image: url(../images/common/footer-icon_notice.svg);} .cs-menu a.cs-store {background-image: url(../images/common/footer-icon_store.svg);} .cs-menu a.cs-staff {background-image: url(../images/common/footer-icon_people.svg);} .footer-menu { display: flex; justify-content: space-between; width: 100%; padding: 1rem var(--container-padding); background-color: #F7F8F8; border-top: 1px solid var(--light-gray); border-bottom: 1px solid var(--light-gray); line-height: 1.2rem; } .footer-main-menu { display: flex; justify-content: flex-start; align-items: center; } .footer-main-menu a { padding:0 .8rem; border-left: 1px solid #9FA0A0; font-weight: 700; } .footer-main-menu a:first-child { border-left: none; padding-left: 0; } .footer-link-menu { position: relative; left: 50px; display: flex; align-items: center; justify-content: flex-end; } .footer-link-menu .btn-link{ padding:0 1rem 0 2rem; vertical-align: middle; background-position: .5rem 45%; background-repeat: no-repeat; background-size: 1.6rem; } .footer-link-menu .btn-link.link-apple { background-image: url(../images/common/footer-link_apple.svg);} .footer-link-menu .btn-link.link-google { background-image: url(../images/common/footer-link_google.svg);} .footer-link-menu .btn-top { display: block; width: 40px; height: 28px; padding-top: 12px; border:1px solid #EFEFEF; border-radius: 50%; background: #fff url(../images/common/footer-icon_top.svg) no-repeat; background-position: 50% 7px; background-size: 12px; text-align:center; font-size: .8rem; line-height: 28px; opacity:.75; } .footer-link-menu .btn-top:hover { opacity: 1;} .footer-link-menu .fixed-window { position: fixed; left:var(--container-side); bottom:85px; } .footer-menu a { display: block; color: var(--text-gray); font-size: 1rem; text-decoration: none; } .footer-menu a:hover { color: var(--text-color); } .footer-info { position: relative; justify-content: flex-start; width: var(--container-width); margin: 0 auto; padding:35px 0; } .footer-logo { position: absolute; left: 0; } .footer-logo img{ width: 190px;} .footer-info dl { margin-left:240px ; display: flex; flex-wrap: wrap; line-height: 1.3rem; color:var(--text-light); font-size: .8rem; } .footer-info dl:nth-child(2){ line-height: 1.5rem; color:var(--text-gray); font-size: 1rem; font-weight: 700; } .footer-info dt, .footer-info dd { margin-inline-start: 0; padding: 0; } .footer-info dt{ padding-right: .5rem; } .footer-info dt:nth-child(3)::before{ content: "|"; display: inline-block; margin: 0 .5rem; } .footer-info dl:nth-child(2) dt:nth-child(3)::before { content: "/"; display: inline-block; margin: 0 .5rem; } /* 4.9 레이어 팝업 및 모달 html file : module_fullPageModal.html */ .fullPageModal_Wrap { position:fixed; top:0; left:0; right: 0; bottom:0; display: none; background-color: rgba(0,0,0, 0.75); z-index: 9999;} .fullPageModal_Wrap.open {display: block; animation: fadeIn 0.3s ease-out;} .fullPageModal {position: absolute; top: 50%; left: 50%; display: none; transform: translate(-50%, -50%); border-radius: 10px; background-color: #fff; z-index: 99999; } .fullPageModal.sizeFull { width: calc(100vw - 40px); height: calc(100vh - 40px); max-width: calc(100vw - 40px); max-height: calc(100vh - 40px)} .fullPageModal.sizeMidium { width:720px;} .fullPageModal.sizeSmall { width:320px;} .fullPageModal > header { padding:20px; text-align: center; background-color:#eee; border-top-right-radius: 10px; border-top-left-radius:10px;} .fullPageModal .modal_title { font-size: 2rem; line-height: 1.2; margin: 10px 0; } .fullPageModal header p { margin-top:10px} .fullPageModal > div { padding:20px 20px 10px} .fullPageModal h3 { font-size: 1.625rem; font-weight: 900; line-height: 1.2; } .fullPageModal h4 { font-size:1.25rem; line-height: 1.2; margin: 20px 0 10px;} .fullPageModal .typeInlineNotice { text-align: center; font-size:1.2rem;} .fullPageModal ul { margin-left: 20px; color: var(--text-gray)} .fullPageModal li { margin: 10px 0;} .fullPageModal > footer { padding:0 10px 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;} .fullPageModal > footer .btnSet { display: flex; gap:10px; width: 100%; justify-content: space-between;} .fullPageModal > footer .btnSet > a, .fullPageModal > footer .btnSet > button {flex:1; text-align: center;} .popupSummary { position: relative; padding-left: 120px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin-top: 20px;} .popupSummary .info-thumn { position: absolute; left:0; top:0; width:110px; height: auto; border-radius: 5px; border:1px solid var(--light-gray)} .popupSummary .info-ID { display: block; margin-bottom: 5px;} .popupSummary .info-ID input {appearance: none; -webkit-appearance: none; -moz-appearance: none; border:0 none} .popupSummary .info-title { font-size: 1.25rem;} .fullPageModal ul.checkList { margin-left: 0;} .checkList li {list-style: none; border-top:1px solid var(--light-gray)} .checkList li>label { display: flex; justify-content: stretch; align-items: center; gap: 10px;} .noStyleList { margin-bottom: 5px;} .noStyleList li { line-height: 1.25rem; padding: .125rem 0; list-style: none; color: var(--text-gray);} .noStyleList li.small { line-height: 1.125rem; font-size: .875rem;} .compactList { position: relative;} .compactList .listTitle {margin: 0 0 20px;} .compactList p { margin-bottom: 10px;} .compactList .list-item { display: block; line-height: 1.6rem; padding: .5rem 0;} .compactList .list-item.active { font-weight: bold; color:#000} .compactList .listSideBtn {position: absolute; right:20px; top:15px; white-space: nowrap; font-size: .975rem; } .compactList .listSideBtn.popupClose { text-decoration: none;background: transparent url(../images/common/icon-line_close.svg) 50% 50% no-repeat; width:30px; height: 30px; line-height: 30px; overflow: hidden; opacity: .7; transition: opacity .3s;} .compactList .listSideBtn.popupClose:hover { opacity: 1;} .list-item .label { display: inline-block; padding:0 5px; background-color: var(--light-green); border-radius: 10px; font-size: smaller; color:var(--green-color)} .resetBtn { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:transparent; display: inline-block; height:40px; width:40px; background-image:url(../images/common/icon_x.svg); background-size: 30px 30px; background-position: 50% 50%; background-repeat: no-repeat;} .addBtn { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:transparent; display: inline-block; line-height: 40px; height:40px; min-width:40px; padding-right:35px; background-image:url(../images/common/icon_plus.svg); background-size: 30px 30px; background-position: 100% 50%; background-repeat: no-repeat; border:0 none; text-decoration: none; opacity: .7; transition: opacity .3s; font-weight: bold;} .addBtn:hover { opacity: 1;} @media only screen and (max-width: 780px) { .fullPageModal.sizeMidium { width:calc(100% - 60px); } } /*-------------------------------------------------------------- 5.0 Main Page Design ----------------------------------------------------------------*/ /* 5.1 최상단 top-banner */ .top-banner-zone {position: relative; height: 70px;} .top-banner-zone a { display: block; width: 100%; margin:0; padding: 0;} .top-banner-zone a>img { display: block; margin: 0 auto; max-width: calc(100vw - 40px);} .top-banner-zone .btn-close { position: absolute; top: calc(50% - 15px); right:calc(50% - var(--container-width)/2); background: transparent url(../images/common/icon-line_close.svg) 50% 50% no-repeat; width:30px; height: 30px; overflow: hidden; opacity: .7;} .top-banner-zone .btn-close:hover { opacity: 1;} .top-banner-zone .btn-close span {display: block; position: relative; top:-200%;} .top-banner-zone button { border: 0; cursor: pointer; padding: 0; } /* 5.2 최상단 slider container */ /* 슬라이더 컨테이너: 전체 너비 사용 */ .slider-container { width: 100%; overflow: hidden; margin: 35px 0; min-height: 380px; /* PC 기준 배너 높이 */} .fixed-header + .slider-container { margin: 200px 0 35px } /* 슬라이더 래퍼: overflow-hidden 처리 */ .slider-wrapper { overflow: hidden; height:380px } /* 슬라이더: flex 레이아웃으로 슬라이드 나열 및 좌우 이동 효과 */ .slider { display: flex; transition: transform 0.3s ease; } /* 각 슬라이드: PC/태블릿에서는 고정 너비 520px와 좌우 여백 10px */ .slide { flex: 0 0 auto; width: 760px; max-width: 100%; margin: 0 10px;} .slide>img { border-radius: 20px;} /* 슬라이더 네비게이터: 가로 스크롤 가능 */ .slider-nav { display: flex; justify-content: center; margin-top: 10px; } .slider-nav button { position: relative; display: block; width:2rem; height:2rem; overflow: hidden; border-radius: 5px; background-color: #ddd; background-position: 50% 50%; background-size: 40%; background-repeat: no-repeat; color: #000; border: none; cursor: pointer; margin: 0 3px; opacity: .5; } #prevBtn { background-image: url(../images/common/slider-btn_prev.svg);} #nextBtn { background-image: url(../images/common/slider-btn_next.svg);} #toggleBtn.stop {background-image:url(../images/common/slider-btn_pause.svg);} #toggleBtn.restart {background-image:url(../images/common/slider-btn_play.svg);} .slider-nav button>span { position: relative; top:200%; } .slider-nav button:hover { opacity: 1; } .slider-nav>span { display: block; height:2rem; line-height: 2rem; padding: 0 10px; font-size: 16px; color: var(--text-light); } .slider-nav>span strong { color: var(--text-color); } .nav-item { display: block; width: 12px; height: 12px; border-radius: 50%; background: #ccc; margin: 0 5px; cursor: pointer; flex-shrink: 0;} .nav-item.active { background: #333;} /*-------------------------------------------------------------- 6.0 Body Contents Layout : 본문 콘텐츠 레이아웃 ----------------------------------------------------------------*/ /* 6.1 콘텐츠 페이지 레이아웃 */ /* 6.1.1 콘텐츠 페이지 헤더 */ main h2 {font-size: 1.8rem; margin:20px 0} .contentsTitle summary { padding:20px 0 10px; font-size: 1.2rem;} .contentsTitle summary h2, .contentsTitle summary h3 { display: inline-block;} .contentsTitle summary::marker {color:var(--text-light)} .contentsTitle ul { display: grid; grid-template-columns: repeat(4, 1fr); gap:5px; border: 1px solid var(--text-light); border-radius: 5px; padding:10px 20px; margin-bottom: 10px; } .contentsTitle ul li {display: block; list-style: none; } .contentsTitle ul a {display: inline-block; padding:5px 10px; text-decoration: none; border-radius: 10px; transition: background 0.3s ease ;} .contentsTitle ul a:hover { color:#fff; background-color: #999; } .contentsTitle ul li.on a { color:#fff; background-color: #555; } /* 새탭 헤더 */ .step-header { display: flex; justify-content: space-between; margin-top:30px; padding-bottom:20px; border-bottom: 1px solid var(--light-gray); } .step-header h2 {font-size: 1.8rem; line-height: 3rem; margin:0} /* 반응형 */ @media only screen and (max-width: 600px) { .step-header { display: block;} .step-header h2 { text-align: center;} } /* 6.1.2 콘텐츠 페이지 네비게이션 */ /* 네비게이션 - 일반 */ a.btn-home { display:block; padding-left:20px; background: no-repeat 0 50% url(../images/common/icon_nav_home.svg)} .contentsNavi { position: relative; height: 50px; z-index: 99;} .contentsNavi a { text-decoration: none; } .contentsNavi ol {/*float:right;*/ display: flex; align-content: flex-start; padding-left:20px; padding-top:20px; flex-wrap: wrap; } .contentsNavi ol>li { content:">"; list-style: none; position: relative; white-space: nowrap; padding:5px 0; } .contentsNavi ol>li::before { content: ">"; display:inline-block; color:var(--text-gray); padding:0 5px; opacity:.5;} .contentsNavi ol>li:first-child { margin-left: -20px} .contentsNavi ol>li:first-child::before { display: none } .contentsNavi li.havSub { padding-right: 30px;} .btn-toggle { width: 17px; height: 17px; border-radius: 50%; border: 1px solid #bbb; cursor: pointer; position: relative;transform: rotate(90deg); background-image: url(../images/common/slider-btn_next.svg); background-repeat: no-repeat; background-position: 50% 50%; background-size:10px;} .contentsNavi .btn-toggle {position: absolute; top: 5px; right: 5px; } .contentsNavi li.havSub.on .btn-toggle {transform: rotate(270deg);} .contentsNavi li.havSub ul { display: none; position: absolute; top:25px; right:0; border:1px solid #ddd; padding:5px; background-color: #fff; z-index: 2;} .contentsNavi li.havSub li { list-style: none;} .contentsNavi li.havSub li a { display:block; line-height:120%; padding:5px 3px; white-space: nowrap;} .contentsNavi li.havSub li a:hover { background-color:#eee;} .contentsNavi li.havSub.on ul {display: block; } /* 네비게이션 - 스탭형 */ .stepNavi { height: 3rem; line-height: 3rem; } .stepNavi ol {/*float:right;*/ display: flex; align-content: flex-start; flex-wrap: wrap; justify-content: center; } .stepNavi ol>li { list-style: none; position: relative; white-space: nowrap; padding:5px 0; color:var(--text-gray); font-size: 1.125rem; } .stepNavi ol>li::before { content: ">"; display:inline-block; color:var(--text-gray); padding:0 5px; opacity:.5;} .stepNavi ol>li:first-child::before { display: none } .stepNavi ol>li.isActive { font-weight: 900; color:var(--text-color)} /* 반응형 */ @media only screen and (max-width: 600px) { .stepNavi ol>li { font-size: 1rem;} } /* 6.1.3 콘텐츠 페이지 본문 */ .page .content { width: var(--container-width); margin: 0 auto; padding: 35px 0 0;} .page .sect_header { position: relative; } .page .sect_header .asideMn { position: absolute; right:0; top:50%; transform: translateY(-50%); } .sect_header > h4, .sect_title { margin-bottom: 20px; font-size: 1.5rem; font-weight: 600;} .sect_tab { display: flex; gap:5px; flex-wrap: nowrap; justify-content: stretch;} .sect_tab > label, .sect_tab > a { flex: 1; display: block; font-size: 1.125rem; border:1px solid var(--light-gray); line-height: 1.6rem; padding: 15px; } .sect_tab > label.checked, .sect_tab > a.selected { padding: 13px; border:3px solid var(--green-color)} .sect_footer { text-align: center;} /* 반응형 */ @media only screen and (max-width: 720px) { .sect_header > h4, .sect_title { margin-top: 5px; font-size: 1.375rem; } } @media only screen and (max-width: 540px) { .sect_title {font-size: 1.2rem;} .sect_tab > label, .sect_tab > a {font-size: 1rem;} } @media only screen and (max-width: 480px) { .page .sect_header .asideMn { position: static; display: inline-block; margin-bottom: 5px; } .page .sect_header .asideMn.info { position: absolute; display: inline-block; margin-bottom: 5px; } } /* 6.1.9 콘텐츠 페이지 풋터 */ main > footer { margin:50px 0 100px; text-align: center;} main > footer>p.strong { font-size: 1.0625rem; color:var(--green-color); font-weight: 900;} main > footer>p.strong + button { margin-top:50px} main > footer button, .formGroup button, a.btn_more {appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:#eee; color:var(--text-color); font-size: 14px; font-weight: bold; text-wrap: nowrap; overflow: hidden; padding: 8px 16px; border: 0 none; border-radius: 4px; cursor: pointer; transition: background 0.3s, color 0.3s; text-decoration: none;} button.btn_more, a.btn_more {width:210px; font-size: 1.125rem; display: inline-block; } button.btn_more.emphas, a.btn_more.emphas { background-color: var(--primary-color);} button.btn_more.dark, a.btn_more.dark {background-color: var(--text-color); color:#fff } button.btn_more.disabled, a.btn_more.disabled { background-color: #ddd; color:var(--light-gray); cursor:default; } main > footer button:hover, a.btn_more:hover { background-color: var(--text-color); color: #fff} main > footer button:active, a.btn_more:active { background-color: var(--primary-color); color:#000} .loginBtn > img { height: 1.125rem; width: auto; vertical-align: middle;} .loginBtn { display: block; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:#eee; color:var(--text-color); font-size: 14px; font-weight: bold; text-wrap: nowrap; overflow: hidden; padding: 8px 16px; border: 0 none; border-radius: 4px; cursor: pointer; transition: background 0.3s, color 0.3s; text-decoration: none; width:calc(100% - 32px); margin:10px auto} .typeNaver { background-color: #03c75a; color:#fff; } .typeKakao { background-color: #FFE812; color:var(--text-color)} .loginBtn:hover { background-color: var(--text-color); color: #fff} /* 6.2 콘텐츠 페이지 본문 레이아웃 */ .content .info_header { margin-bottom: 16px; } .info_header .subTitle { font-size:1.2rem; color: var(--text-gray); text-decoration: none; white-space: nowrap; line-height: 150%; padding:10px 0 10px 25px } .info_header h3 { font-size: 1.8rem; font-weight: 900; margin: 10px 100px 10px 0; line-height: 120%; } .info_header h3 > small { display: block; font-size: 1.3rem; color: #888; font-weight: 100;} .info_header .btnSet { position: absolute; right:0; top:calc(1.8rem + 25px)} /* 6.2.1 탭 스크롤 뷰 */ .tabview { position: relative; margin: 50px 0;} .tabview_navi { display:grid; grid-template-columns: repeat(4, 1fr); gap:0; width: 100%; background: white; z-index: 10; padding-top:10px; border-bottom: 1px solid #bbb; position: relative; /* 기본은 고정 아님 */ transition: all 0.2s ease; background-color: #fff;} .tabview_navi.fixed { position: fixed; top: 76px; left: var(--container-padding); right: var(--container-padding); z-index: 99; max-width: var(--container-width); } .tabview_navi li { list-style: none; cursor: pointer; } .tabview_navi li a {display:block; width: 100%; padding:10px; text-align: center; text-decoration: none; font-size: 1.125rem;} .tabview_navi li.on a { font-weight: bold; color: #000; border-bottom: 3px solid #000;} .tabview_navi li a .numOf_items { font-weight: 100;} .tabview_navi li a .numOf_items:before { content: "(";} .tabview_navi li a .numOf_items:after { content: ")";} .tabview:not(.typeSwitch) .tabview_contents > section {position:relative; padding:20px 0; border-bottom:1px solid var(--light-gray)} .tabview_contents > section:last-child { border-bottom: 0 none;} .tabview:not(.typeSwitch) .tabview_contents > section > header {padding:20px 0; } .tabview_contents > section > header h4 {font-size:1.4rem;margin:10px 0; font-weight: 600;} /* 6.1.3 콘텐츠 페이지 본문 sect_title 과 통일성 유지 */ .tabview_contents > section > header p { color:var(--text-light)} .tabview_contents > section > div { display: flex; padding:10px 0; flex-direction: column; /* 내용물이 여러 개일 경우 세로로 쌓이게 함 */} .tabview_contents > section > footer .btnSet { position: absolute; top:68px; right:0; width: auto; display:flex;} .tabview_contents > section > footer .btnSet a {display: block;} /* 상품설명 등: section 직계 div 한 개(exContents) 안에 figure가 오거나, 그 안의 .exContents-rest 등으로 한 번 더 감싸짐 → 자손 선택자 사용 */ .tabview_contents > section > div figure img { display: block; margin: 0 auto; float: none; max-width: 100%; height: auto; } .typeSwitch .tabview_contents > section { display: none;} .typeSwitch .tabview_contents > section.active { display: block;} .tabview.typeSwitch .tabview_contents > section > header {padding:10px 0 0; } @media only screen and (max-width: 720px) { .tabview_contents > section > header p { font-size: .925rem;} } /*-------------------------------------------------------------- 7.0 BBS System : 게시판 시스템 ----------------------------------------------------------------*/ /* 7.1 게시판 시스템 - 목록 */ /* 7.1.1 반응형 게시판 목록 */ ul.bbsList { border-top:1px solid #000;} ul.bbsList>li {list-style: none;} .bbsList .forOrder {width:3rem;} .bbsList .forTitle { flex:1; width:calc(100% - 23rem);} .bbsList .forType {width:10rem;} .bbsList .forDate, .bbsList .forWrite {width:6rem;} .bbsList .forValue {width:7rem; padding-right: 15px; } .bbsList .forMethod {width:15rem; flex-shrink: 0;} .bbsList .forMemo {flex:1; min-width: 10rem; flex-shrink: 1;} .bbsList_header { display: flex; align-items:center; flex-wrap: nowrap; border-bottom: 1px solid var(--text-light);} .bbsList_header>* {display: block; padding:20px 10px; font-size:.9rem; font-weight: 900; flex-shrink: 0;} .bbsList_header {text-align:center;} .bbsList_header .forDate {width:10rem;} .bbsList_header .forType {width:10rem;} .bbsList_header .forValue {width:7rem;} .bbsList_header .forMethod {width:15rem;} .bbsList_header .forMemo {flex:1; min-width: 10rem;} ul.bbsList.tyBasic .bbsList_item, ul.bbsList .item_header { display: flex; align-items:center; flex-wrap: nowrap; padding:15px 0;} ul.bbsList .item_header>* {display: block; flex-shrink: 0; padding: 0 10px;} ul.bbsList.tyBasic .bbsList_item>* { text-align: center; flex-shrink: 0; padding: 0 10px;} ul.bbsList.tyBasic .bbsList_item>.forTitle { white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } ul.bbsList.tyBasic .bbsList_item>.forValue { text-align:right;} ul.bbsList.tyBasic .bbsList_item>.forDate {width:10rem;} ul.bbsList.tyBasic .bbsList_item>.forType {width:10rem;} ul.bbsList.tyBasic .bbsList_item>.forValue {width:7rem;} ul.bbsList.tyBasic .bbsList_item>.forMethod {width:15rem;} ul.bbsList.tyBasic .bbsList_item>.forMemo {flex:1; min-width: 10rem; text-align: left; overflow: hidden; text-overflow: ellipsis;} ul.bbsList .item_header .forOrder {font-size:.8rem; color:var(--text-gray); text-align: center;} ul.bbsList .item_header .forTitle .simpleIcon { vertical-align: bottom; width:1.8rem; height: auto; margin:-.2rem 0 -.2rem -.25rem; } ul.bbsList .item_header .forTitle .simpleIcon.typeSecret {opacity: .3;} ul.bbsList .item_header .forTitle a {text-decoration: none; font-size: 1.05rem;} ul.bbsList .item_header .forType {text-align: center; padding:5px; border-radius:5px; font-size: .8rem; color:#fff} .forType.wait { background-color: var(--light-gray);} .forType.completed { background-color: var(--green-color); } ul.bbsList .item_header .forWrite { text-align: center;} ul.bbsList .item_header .forDate { text-align: center; font-size: .8rem; color:var(--blue-color)} ul.bbsList .item_details { height:0; overflow: hidden; border-bottom: 1px solid var(--text-light); font-size:1rem; line-height: 1.6; transition: height 0.3s;} ul.bbsList .item_details.open { height: auto; padding:20px 20px 20px 3.6rem; border-top:1px solid #ccc} .preText {white-space: pre-wrap; word-break: break-word; } .password-form { display: block; } .password-form p { margin-bottom:.8rem;} .password-form input {padding: 10px; } .password-form button { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color:var(--text-color); color:#fff; padding: 10px; border: 0 none; border-radius:3px;} .blankPage { text-align: center; padding:150px 20px 80px; background-image: url(../images/common/icon_warning_70x70_lightgray.png); background-position: 50% 70px ; background-repeat: no-repeat;} li.blankPage { border-bottom: 1px solid #000; } @media only screen and (max-width: 720px) { ul.bbsList .item_header .forTitle a { font-size: 1rem;} } @media only screen and (max-width: 560px) { .bbsList .bbsList_header { display: none;} ul.bbsList .item_header { display: block; position: relative; padding-left: 3rem;} ul.bbsList .item_header>* { display: inline-block;} ul.bbsList .item_header>.forTitle { width:calc(100% - 6rem)} .bbsList .forDate, .bbsList .forWrite { width: auto;} ul.bbsList .item_header .forOrder { position: absolute; left:0; top:50%; transform: translateY(-50%);} ul.bbsList .item_details.open {padding:10px 20px 20px 20px; } } @media only screen and (max-width: 500px) { } @media only screen and (max-width: 450px) { } @media only screen and (max-width: 320px) { } @media only screen and (min-width: 1024px) { } /*-------------------------------------------------------------- 8.0 Shopingmall System: 쇼핑몰 시스템 ----------------------------------------------------------------*/ .info_price .discount_rate {display: inline-block; font-size: 1.25rem; color:var(--red-color); margin-right:.3em;} .info_price .discount_price {font-weight: 600; font-size: 1rem; color: var(--red-color);} .info_price .discount_price strong {font-size: 1.2rem; font-weight: 900;} .info_price .discount_price.vip {color: var(--green-color)} .info_price .discount_price.box {color: var(--red-color)} .info_type .icon_type {display: inline-block; padding: 6px 10px; border-radius: 4px; font-size: 14px; line-height: 100%; font-weight: bold; cursor: pointer; transition: background 0.3s, color 0.3s;} .info_type .icon_type.typeToday { background-color: var(--primary-color); color:var(--text-color) } .info_type .icon_type.typeOrder {background-color: var(--text-color); color:#fff} /* 8.1 상품목록 */ .product_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; padding: 0; margin: 0;list-style: none;} .product_list .item_box { position: relative; background: #fff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; } .product_list .item_box a {text-decoration: none;} .product_list .item_box:hover { transform: translateY(-5px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* 1. 부모 박스 (기존 틀 유지) */ .product_list .item_thumn { position: relative; width: 100%; padding-top: 100%; /* 정사각형 비율 유지 */ overflow: hidden; background: #f8f8f8; border-radius: 8px 8px 0 0; /* 테두리 곡률을 부모에게 주는 것이 깔끔합니다 */ } /* 이미지 기본 정렬 */ .product_list .item_thumn img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; /* 비율 유지하며 꽉 채우기 핵심 */ } /* 가로형: 높이를 꽉 채우고 가로는 잘리더라도 맞춤 */ .product_list .item_thumn img.landscape-fill { height: 100%; width: auto; min-width: 100%; } /* 세로형: 너비를 꽉 채우고 세로는 잘리더라도 맞춤 */ .product_list .item_thumn img.portrait-fill { width: 100%; height: auto; min-height: 100%; } /* [Case 2] 진짜 큰 이미지: 잘림 방지 (Contain 방식) */ .product_list .item_thumn img.keep-all { width: auto; height: auto; max-width: 100%; /* 틀을 벗어나지 않음 */ max-height: 100%; /* 틀을 벗어나지 않음 */ object-fit: contain; } .product_list .item_info {padding: 12px; font-size: 14px; color: #333; } .item_info dt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;} .product_list .item_info .icon_type:not(.typeSale) {position: absolute; top: 10px;left:10px; display: inline-flex; align-items: center; justify-content: center;} .item_info .icon_type.typeSale { position: absolute; top: 0; right:0px; width:5rem; height:5rem; background: transparent no-repeat 0% 50% url(../images/common/tag_sale.svg); padding-top:3rem; text-align: center; color:#fff; font-size: .8em; } .item_info .company {display: block; color:var(--text-gray); font-weight: 700;} .item_info .title {font-size: 1.15rem ; font-weight: 900; word-break: keep-all; white-space: wrap;} .item_info .info_price {margin:10px 0} .item_info .info_price del {display:block; color:var(--text-light); margin-bottom:5px;} .priceItem {line-height:1.625rem;} .priceItem .inlineBlit { height: 1.625rem; width:0; overflow: visible;} .priceItem .inlineBlit:before {top: calc(50% - 15px);} .priceItem .inlineBlit:hover>span { display: block;} .priceItem .inlineBlit>span { display: none; white-space: nowrap; position: absolute; left:0; bottom:100%; padding:5px; line-height:1.2rem; border-radius:5px; background: #000; color:#fff; opacity: .7;} .priceItem .inlineBlit>span::before { content: ""; position: absolute;bottom:-4px; left:7px; display: block; width: 10px; height: 10px; overflow: hidden; background: #000; transform: rotate(45deg) } @media only screen and (max-width: 768px) { .product_list { grid-template-columns: repeat(2, 1fr);} } @media only screen and (max-width: 480px) { .product_list { grid-template-columns: repeat(1, 1fr);} } @media only screen and (min-width: 1024px) { .product_list { grid-template-columns: repeat(4, 1fr);} .info_price .discount_price strong {font-size: 1.4rem; } .item_info .title {font-size: 1.25rem ;} } @media only screen and (min-width: 1600px) { .product_list { grid-template-columns: repeat(5, 1fr);} } /* 빈 검색 결과 스타일 */ .product_list .item_empty { grid-column: 1 / -1; /* 전체 그리드 열 차지 */ width: 100%; padding: 80px 20px; text-align: center; display: flex; justify-content: center; align-items: center; } .empty_state { display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 500px; margin: 0 auto; width: 100%; } .empty_icon { margin-bottom: 40px; } .empty_icon_circle { position: relative; width: 180px; height: 180px; margin: 0 auto; background-color: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .empty_icon_box { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); font-size: 60px; line-height: 1; } .empty_icon_search { position: absolute; top: 20px; right: 20px; font-size: 50px; line-height: 1; transform: rotate(-15deg); } .empty_message { text-align: center; } .empty_text { font-size: 20px; font-weight: 600; color: #333; margin: 0 0 12px 0; line-height: 1.5; } .empty_desc { font-size: 16px; color: #666; margin: 0; line-height: 1.5; } @media (max-width: 768px) { .item_empty { padding: 60px 20px; } .empty_icon_circle { width: 150px; height: 150px; } .empty_icon_box { font-size: 50px; bottom: 25px; } .empty_icon_search { font-size: 40px; top: 15px; right: 15px; } .empty_text { font-size: 18px; } .empty_desc { font-size: 14px; } } /* 8.2 쇼핑몰 시스템 - 상품 상세보기 */ .product_detail { position: relative; margin-top:30px} .product_detail > .info_header, .product_detail > .product-summary, .product_detail > .product-order { margin-left:var(--product-summary-img-zone); width:var(--product-summary-info-zone)} .product_detail > .info_header.fixed { position: fixed; top:0; left:0; width:100vw; height: 76px; margin-left:0; padding:10px 140px 10px calc(3.44rem + 20px); border-bottom: 1px solid var(--text-gray); background-color: #fff; z-index: 999; } .product_detail > .info_header.fixed .subTitle {padding:0 0 0 25px; font-size: 1rem; line-height: 200%;} .product_detail > .info_header.fixed .blockBlit:before { top:0} .product_detail > .info_header.fixed h3{font-size: 1.2rem; margin:0; height:1.44rem; overflow: hidden;} .product_detail > .info_header.fixed h3 > small { display: inline-block; font-size: 1.2rem;} .product_detail > .info_header.fixed .btnSet {top:calc(0.72rem + 2px); right:20px} .product_detail > .info_header.fixed .btnSet .iconBtn {display: none;} .product_detail > .info_header.fixed .btnSet #ToggleBuy_btn {display: block;} .product_detail > .product-images.fixed { position: fixed; top:10px; left:10px; width:54px; height:54px; z-index: 999;} .product_detail > .product-images.fixed figcaption, .product_detail > .product-images.fixed nav {display: none} .product_detail > .product-summary.fixed { position: fixed; top:auto; bottom:100%; left:0; width: 100%; margin: 0; padding:10px 0; background-color: rgba(0,0,0, 0.75); border-bottom:2px solid #000; z-index: 998;} .product_detail > .product-summary.fixed.on { top:76px; bottom:auto} .product_detail > .product-summary.fixed .info_price {display: block} .product_detail > .product-summary.fixed dt, .product_detail > .product-summary.fixed dd:not(.info_option), .product_detail > .product-summary.fixed dd.info_option p { display: none !important;} .product_detail > .product-summary.fixed dd.info_option {padding:0 10px; display: flex; justify-content: space-between; gap: 5px;} .product_detail > .product-summary.fixed dd.info_option .checkBox { display: block; width:calc(50% - 15px) } .product_detail > .product-summary.fixed .checkBox:first-child {margin-top:0;} .product_detail > .product-summary.fixed .product-order { margin:0 10px} .typeSale.sale_detail { background-color: var(--red-color); color:#fff;} @media only screen and (max-width: 768px) { .product_detail > .info_header.fixed .subTitle {display: none;} .product_detail > .info_header.fixed h3 {height:2.88rem; margin-top:calc(28px - 1.44rem)} .product_detail > .product-summary.fixed dd.info_option {display: block;} .product_detail > .product-summary.fixed dd.info_option .checkBox {width: auto;} } @media only screen and (min-width: 1024px) { .product_detail > .product-summary.fixed { padding:10px 0 10px 40%} .product_detail > .product-summary.fixed .info_price{ position:absolute; top:20px; left:10px; width:calc(40% - 20px); max-height: calc(100% - 20px); overflow-y: auto;} .product_detail > .product-summary.fixed dd.info_option {display: block;} .product_detail > .product-summary.fixed dd.info_option .checkBox {width: auto;} } /* 8.2.1 상품 이미지 갤러리 */ .product-images { position:absolute; left:0; top:0; max-width: var(--product-summary-img);} .product-images figure { width: 100%; border: 1px solid #ddd; padding: 8px; margin: 0 0 12px; text-align: center; background-color: #fff; overflow: hidden; max-height: 650px; } .product-images figure img { width: 100%; max-height: 440px !important; object-fit: contain; } .product-images figcaption { margin-top: 6px; font-size: 0.9rem; color: #666; } .thumbnails { display: flex; justify-content: center; gap: 8px; list-style: none; padding: 0; margin: 0; } .thumbnails button {border: 2px solid transparent;padding: 0;background: none;cursor: pointer;border-radius: 4px;transition: border 0.2s ease;} .thumbnails button.active {border-color: #333; } .thumbnails img {width: 60px;height: 60px;object-fit: cover;border-radius: 4px;display: block; } /* 8.2.2 상품 요약정보 - 오른쪽 출력 */ .product-summary { word-break: keep-all;} .product-summary .info_price dt { line-height:2rem; } .product-summary .info_price dt:first-child, .product-summary .info_price dt:first-child + dd{ display: inline-block;} .product-summary .info_price dd { line-height:2rem;} .product-summary .info_price dt.blind+dd { margin-left: 130px;} .product-summary .info_price dd+dd { margin-left: 130px; margin-top:7px} .product-summary dd:not(.info_option) .discount_price {font-size: 1.45rem;} .product-summary dd:not(.info_option) .discount_price strong {font-size: 1.625rem;} .product-summary p { margin-top:5px; font-size: .825rem; line-height: 1.2rem !important;} .product-summary p:last-child { margin-bottom: 20px;} .product-summary .checkBox { display: block; position: relative; margin-bottom:10px; padding: 15px 8rem 15px 35px; } .product-summary .checkBox.selected {padding: 13px 8rem 13px 33px; } .product-summary .checkBox:first-child { margin-top: -5px;} .product-summary .checkBox .price{ position: absolute; right:7px; top:calc(50% - .6rem)} .product-summary .checkBox[data-option="box"] .price { top:calc(50% - 1.2rem)} .product-summary .checkBox .price>del { display: block; text-align: right; padding-right: 1rem;} /* 8.2.3 상품 주문정보 */ .product_detail .product-order { padding: 20px; border: 5px solid #ddd; border-radius: 5px; word-break: keep-all; background-color: #fff;} .product_detail .product-order fieldset { position: relative; padding: 30px 0 10px 0; margin-bottom:10px; border-bottom: 1px solid #aaa;} .product-order fieldset legend { position: absolute; top:7px; left: 0; width:100%; font-weight: 900; } .product-order fieldset .quantity-control { float:left; max-width:200px} .product-order fieldset .price { display: block; text-align: right; line-height: 2.4em; padding-right: 4em;} .product-order fieldset .btn-close { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: absolute; bottom:15px; right:0; width: 2rem; height: 2em; line-height: 2em; background: transparent url(../images/common/icon-line_close.svg) 50% 50% no-repeat; overflow: hidden; opacity: .7; border:0 none; cursor: pointer;} #deliveryScheduleFieldset { margin-top:-15px; background-color: #fff; border: 2px solid var(--text-color); border-radius:5px; padding: 50px 20px 10px} #deliveryScheduleFieldset legend { top:20px; left: 20px;} #deliveryScheduleFieldset div { border-bottom: 1px dashed #ddd; padding:7px 0} #deliveryScheduleFieldset h5 { float: left; width:6em;} #deliveryScheduleFieldset button { appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; border:none; border-radius: 4px; background-color: var(--text-color); padding:5px 20px; margin:10px auto 0; font-weight:700; color:#fff; } /* 상품 상세 구매옵션: 배송 요청일·시간 */ .product-summary dd.info_option .delivery-datetime-block { margin-top: 12px; padding: 12px 0; border-top: 1px dashed #ddd; clear: both; display: flex; flex-direction: column; gap: 10px; } .product-summary dd.info_option .delivery-date-row, .product-summary dd.info_option .delivery-time-row { display: flex; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0; padding: 0; } .product-summary dd.info_option .delivery-date-row h5, .product-summary dd.info_option .delivery-time-row h5 { float: none; margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-color); flex-shrink: 0; min-width: 6em; line-height: 1.4; } .product-summary dd.info_option .delivery-date-row input[type="date"].delivery_input { flex: 0 1 auto; min-width: 140px; max-width: 195px; margin: 0; cursor: pointer; caret-color: transparent; height: 25px; } .product-summary dd.info_option .delivery-time-row input[type="time"].delivery_input, .product-summary dd.info_option .delivery-time-row select.delivery_input { flex: 0 1 auto; min-width: 140px; max-width: 220px; margin: 0; cursor: pointer; background-color: #fff; } @media only screen and (max-width: 480px) { .product-summary dd.info_option .delivery-date-row, .product-summary dd.info_option .delivery-time-row { align-items: flex-start; } } /* 8.2.4 상품 주문 */ .product-order .btnSet { margin:10px auto; display: flex; align-items: center; gap:4px;} .product-order .btnSet button { width: calc(50% - 2px);} #ToggleBuy_btn {display: none; } .mfBtn.typeClose {background-color: var(--red-color); color:#fff;} #ToggleBuy_btn::before { display: inline-block; height:1.4rem; width: 1.4rem; margin-right:.5rem; vertical-align: bottom; background-position: no-repeat; background-position: 50% 50%; background-size: 1.4rem; } #ToggleBuy_btn.typeBuy::before {content: ""; background-image: url(../images/common/icon_shopping_cart.png);} #ToggleBuy_btn.typeBuy:hover::before {background-image: url(../images/common/icon_shopping_cart_white.png);} #ToggleBuy_btn.typeClose::before {content: ""; background-image: url(../images/common/icon_close_white.png);} @media only screen and (max-width: 860px) { .product_detail > .info_header, .product_detail > .product-summary, .product_detail > .product-order { margin-left:0; width:100%} .product-images { position:relative; max-width: 100%;} .product-images figure img { width: 100%; max-height:400px; } } @media only screen and (min-width: 571px) and (max-width: 860px) { .product-summary .info_price {display: flex; flex-wrap: wrap;justify-content:space-between; align-content:center;} .product-summary .info_price dt { flex: 0 0 140px; line-height:2rem; text-align: right;} .product-summary .info_price dt:first-child { float:none;} .product-summary .info_price dd { flex: 0 0 calc(100% - 150px); justify-content: flex-start; } } @media only screen and (min-width: 1024px) { .product-summary .info_price {display: flex; flex-wrap: wrap;justify-content:space-between; align-content:center;} .product-summary .info_price dt { flex: 0 0 140px; line-height:2rem; text-align: right;} .product-summary .info_price dt:first-child { float:none;} .product-summary .info_price dd { flex: 0 0 calc(100% - 150px); justify-content: flex-start; } } /* 8.4 장바구니(체크아웃)*/ /* 8.4.1 체크아웃 레이아웃 */ /* 체크아웃 네비게이션 스탭 */ .checkout-header { margin-top:30px; padding-bottom:20px; border-bottom: 1px solid var(--light-gray); display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 15px; } .checkout-steps { display: flex; justify-content: flex-end; height: 3rem; line-height: 3rem; flex-shrink: 0; } .checkout-steps ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: 0; padding: 0; } .checkout-steps ol>li { list-style: none; position: relative; white-space: nowrap; padding:5px 0; color:var(--text-gray); font-size: 1.125rem; } .checkout-steps ol>li::before { content: ">"; display:inline-block; color:var(--text-gray); padding:0 5px; opacity:.5; } .checkout-steps ol>li:first-child::before { display: none } .checkout-steps ol>li.isActive { font-weight: 900; color:var(--text-color)} .checkout-tabnav { display: flex; align-items: center; height: 3rem; line-height: 3rem; flex-wrap: wrap; gap: 0; flex-shrink: 0; } .checkout-tabnav h3 { font-size:1.8rem; margin: 0; } .checkout-tabnav a { font-size:1.8rem; text-decoration: none; font-weight: 300; color:var(--text-gray); } .checkout-tabnav h3::before, .checkout-tabnav a::before { content: "|"; display: inline-block; width:2rem; text-align: center; color:var(--text-gray); } .checkout-tabnav h3:first-child::before, .checkout-tabnav a:first-child::before { display: none;} /* 콘텐츠 관리 */ .listCtrl {display: flex; justify-content: space-between; padding:20px 0} section.checkout-contents {padding:20px 20px 0; margin-bottom:20px; border:3px solid var(--light-gray)} section.checkout-contents#cartToday { border-color: #000;} section.checkout-contents h4 { float: left; margin-top:-20px; padding:20px 0; border-bottom: 2px solid var(--light-gray) } section.checkout-contents .dueDate { float: right; color:var(--red-color) } section.checkout-contents .checkout_list { clear: both;} /* 주문수량 변경 팝업 */ #orderPopup_changeVaule > div { display: flex; justify-content: space-between; flex-wrap: wrap;} #orderPopup_changeVaule h3, #orderPopup_changeVaule .descText { width: 100%; margin-bottom: 10px;} #orderPopup_changeVaule .orderAmountOption { font-size: 1.25rem;} #orderPopup_changeVaule .order-amount { font-size: 1.5rem;} /* 체크아웃 주문내역 요약 */ .checkout-summary{ position: relative; display: flex; gap:10px; align-items:center; justify-content: end; padding:15px; background-color:#f5f5f5; } /* 장바구니: 바로 구매 전 배송 요청 일시 */ .checkout-summary .checkout-del-req { flex: 1 1 100%; width: 100%; order: -2; margin-bottom: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--light-gray); } .checkout-summary .checkout-del-req-heading { display: block; font-size: 1.0625rem; font-weight: 700; margin-bottom: 10px; color: #000; } .checkout-summary .checkout-del-req-fields { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; } .checkout-summary .checkout-del-req-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .checkout-summary .checkout-del-req-field label { font-size: 0.875rem; color: var(--text-gray); font-weight: 600; } .checkout-summary .checkout-del-req-field input[type="date"], .checkout-summary .checkout-del-req-field select { box-sizing: border-box; min-height: 40px; padding: 8px 10px; border: 1px solid var(--light-gray); border-radius: 6px; background: #fff; font-size: 1rem; color: #000; max-width: 100%; } .checkout-summary .checkout-del-req-field input[type="date"]:focus, .checkout-summary .checkout-del-req-field select:focus { outline: none; border-color: #000; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06); } .checkout-summary .checkout-del-req-field select { min-width: 9.5rem; cursor: pointer; } .checkout-summary .checkout-del-req-note { margin: 10px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--text-gray); } .checkout-summary h4 {font-size: 1.25rem;} .checkout-summary .totalOrder-Amount { font-size: 1.25rem; } .checkout-summary h4 strong, .totalOrder-Amount strong, .itemInfo-ID strong {font-size: larger; font-weight: 900; color:var(--red-color) } .itemInfo-Address .address_tel, .itemInfo-Checkout .checkout_code {color:var(--text-gray)} .calcAmount > span { white-space: nowrap;} .orderAmount strong {font-size: larger; font-weight: 900; } .checkout-summary .price_detail { display: none; position: absolute; bottom:70px; width: 16rem; padding:20px; border-radius: 10px; background-color: #f5f5f5; filter: drop-shadow(0 0 5px rgba(0,0,0,.5)); z-index:10; } .checkout-summary .price_detail.toggleOn { display: block;} .checkout-summary .price_detail::after { content: ""; position: absolute; bottom:-10px; left:50%; display: block; margin-left:-10px; width:20px; height: 20px; background-color: #f5f5f5; transform: rotate(45deg); } .price_detail h5 {font-size: 1.4rem; padding-bottom: 10px;} .price_detail .info_price { padding:10px 0; border-bottom: 1px solid var(--light-gray); border-top: 1px solid var(--light-gray); } .price_detail .info_price::after { content: ""; clear: both; display: block;} .price_detail .info_price dt { float: left; clear:both; width:6rem; line-height:1.2rem; padding:5px 0;} .price_detail .info_price dd { float: right; width:7rem; line-height:1.2rem; text-align: right;} /*main.checkout section.checkout-summary.fixedBottom {position: fixed; bottom:0; left:0; right:0 }*/ /* 구매하기 - 구매정보 */ section.order-contents {margin:40px auto 20px; width:calc(100% - 30rem - 20px); min-width: 665px } /* 구매하기 - 결제정보 */ .accordionFormGroup { border-top:3px solid #000; border-bottom: 1px solid var(--light-gray);} .accordionFormGroup>li { position: relative; list-style: none; line-height: calc(1.2rem + 12px); padding:10px 0; border-top:1px solid var(--light-gray);} .accordionFormGroup>li:first-child { border-top:0 none} .accordionFormGroup>li:last-child { border-bottom:3px solid #000} .accordionFormGroup>li .listItem_title {font-size:1.0625rem;} .accordionFormGroup>dt { position: relative; font-size:1.0625rem; color:#000; line-height: calc(1.2rem + 12px); padding:10px 0; border-top:1px solid var(--light-gray)} .accordionFormGroup>dt>label { display: block;} .accordionFormGroup>dt .sideInfo{ position: absolute; height:1.2rem; line-height: 1.2rem; top:calc(50% - .6rem); right:0} .accordionFormGroup>li .sideInfo{ position: absolute; height:1.2rem; line-height: 1.2rem; top:calc(.6rem + 6px); right:0} .accordionFormGroup>dt .sideInfo label, .accordionFormGroup>li .sideInfo label{ margin-top:calc(.6rem - 13px);} .accordionFormGroup>dt .sideInfo .addBtn {margin-top:calc(.6rem - 15px); line-height: 30px; height:30px; padding-right: 30px; background-size: 24px; font-size: smaller; } .sideInfo strong { font-weight: 900;} .sideInfo.aside { font-size: smaller; color:var(--text-gray)} .accordionFormGroup>dd { display: flex; line-height: calc(1.2rem + 12px); padding:10px;} .accordionFormGroup>dd+dd { padding: 0 0 10px 10px;} .paymentItem { background-color: #fff; border: 2px solid var(--light-gray); border-radius: 12px; box-shadow: 0 2px 4px #0000000d; padding: 15px 15px 17px; } .paymentItem.active { border:2px solid #00cd60; } .paymentItem.account, .paymentItem.card { position: relative; padding-left: 70px; } .paymentItem.block { position: relative; padding-right: 70px; } .paymentItem.block .typeCashReceipt { display: block; font-size: 1.0625rem;} .paymentItem.block .NumCashReceipt { display: block; font-size: smaller; color:var(--text-gray)} .paymentItem.card label { position: static;} .paymentItem.card button { display: block; pointer-events: none; border:0 none; opacity: .3; background-color: transparent; padding-left: 0; padding-right: 20px; background-image: url(../images/common/icon_arrowdown.svg); background-repeat: no-repeat; background-position: 100% 50%;} .paymentItem.card.active button {pointer-events:auto; opacity: 1;} label.paymentItem.esayPay { padding-right: 30px; padding-left: 70px;} .paymentItem.account input, .paymentItem.card input{ position: absolute; right:10px; top:10px} .paymentItem.esayPay input, .paymentItem button.side { position: absolute; right:10px; top:50%; transform: translateY(-50%);} .paymentItem .logoImg { position: absolute; left:10px; top:50%; transform: translateY(-50%); width:50px; height:50px;} .paymentItem.esayPay .logoImg {height:auto;} .paymentItem .paymentItem_title { display: block; line-height: 1.5rem;} .paymentItem .paymentItem_info { display: block; font-size: smaller; color:var(--text-gray); line-height: 1.5rem;} .paymentGroup dt label .logoImg { height:25px; margin-right:5px; vertical-align: middle;} .pointRecharge .paymentItem_title { float: left;} .pointRecharge button.typeSelectBox { margin-left: auto; border: 0 none; background-color: transparent; color:var(--text-light); } .plateSwiper { position: relative; overflow: hidden;} .swiper_wrap { display: flex; transition: transform 0.3s ease; will-change: transform; transform: translateX(40px)} .swiper_wrap .paymentItem { min-width: 220px; margin-right: 12px; flex-shrink: 0; } .swiper_ctrlUI { position: absolute; top: 50%; transform: translateY(-50%); } .swiper_ctrlUI.typeL { left: 0; } .swiper_ctrlUI.typeR { right: 0; } .swiper_ctrlUI button { appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 1px solid; border-color: var(--light-gray); border-radius: 50%; width:30px; height: 30px; background-image: url(../images/common/icon_arrowdown.svg); background-repeat: no-repeat; background-position: 50% 50%; } .swiper_ctrlUI button:hover {filter: invert(); transition: all 0.3 ease} .swiper_ctrlUI.typeL button { transform: rotate(90deg);} .swiper_ctrlUI.typeR button { transform: rotate(270deg);} /* 체크아웃 반응형 디자인 적용 */ @media only screen and (max-width: 780px) { .checkout-header { margin-top: 0; flex-direction: column; align-items: flex-start; gap: 10px; } .checkout-steps { justify-content: flex-start; height: auto; line-height: 2rem; width: 100%; } .checkout-steps ol>li { font-size: 1rem; padding: 3px 0; } .checkout-tabnav { height: auto; line-height: 2rem; width: 100%; } .checkout-tabnav h3, .checkout-tabnav a { font-size: 1.5rem; } section.order-contents {min-width: calc(100% - 60px) } } @media only screen and (max-width: 500px) { .checkout-header { gap: 8px; padding-bottom: 15px; } .checkout-steps { height: auto; line-height: 1.8rem; } .checkout-steps ol>li { font-size: 0.9375rem; padding: 2px 0; } .checkout-tabnav { height: auto; line-height: 1.8rem; flex-wrap: wrap; } .checkout-tabnav h3, .checkout-tabnav a { font-size: 1.25rem; } .checkout-tabnav h3::before, .checkout-tabnav a::before { width: 1.5rem; } .checkout-summary { flex-wrap: wrap;} .checkout-summary .price_detail {bottom:115px; right:-15px} .checkout-summary .price_detail::after { left:calc(100% - 40px)} .checkout-summary .mfBtn.emphas {width:100%;} .checkout-summary .checkout-del-req-fields { flex-direction: column; align-items: stretch; } .checkout-summary .checkout-del-req-field input[type="date"] { width: 100%; } .checkout-summary .checkout-del-req-field select { min-width: 0; width: 100%; } } /* 모바일·태블릿: 배송요청 전체 너비 → (총 N건 주문금액 | 금액) 한 줄 → 바로구매 전체 너비 */ @media only screen and (max-width: 1279px) { main.checkout section.checkout-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 12px; justify-items: stretch; padding: 15px; } .checkout-summary .checkout-del-req { grid-column: 1 / -1; width: 100%; flex: none; order: 0; margin-bottom: 0; } .checkout-summary > h4 { grid-column: 1; justify-self: start; margin: 0; line-height: 1.35; min-width: 0; } .checkout-summary > .totalOrder-Amount { grid-column: 2; justify-self: end; margin: 0; white-space: nowrap; text-align: right; } .checkout-summary > .price_detail { grid-column: 1 / -1; } .checkout-summary > .mfBtn.emphas { grid-column: 1 / -1; width: 100%; margin: 0; box-sizing: border-box; } } @media only screen and (max-width: 480px) { main.checkout section.checkout-summary.fixedBottom {bottom:70px; } .checkout-summary { padding: 15px;} .checkout-summary h4 strong { display: none;} } @media only screen and (min-width: 1280px) { main.checkout { position: relative;} main.checkout form.listCtrl, main.checkout section.checkout-contents{ width:calc(100% - 20rem - 20px) } main.checkout section.checkout-summary { position:absolute; right:0; top:calc(4.6rem + 111px); display: flex; flex-wrap: wrap; width: 20rem; } .checkout-summary .price_detail { display: block; position: static; width:100%; padding:0; border-radius: 10px; filter: none; z-index:10; -ms-flex-order: -1; order: -1; } .checkout-summary .price_detail::after, main.checkout section.checkout-summary button.btn-toggle { display: none;} main.checkout section.checkout-summary > button { width: 100%;} main.checkout section.checkout-summary.fixedSide.fixedBottom {position: absolute; right: 0; top: calc(4.6rem + 111px);left:auto; bottom:auto} main.checkout section.checkout-summary.fixedSide {position: fixed; top:105px; right:var(--container-padding); } } /* 8.4.2 체크아웃 상품목록 */ .checkout_list>li{ position: relative; list-style: none; align-items:center; padding:10px 10rem 10px 30px; border-top:1px solid var(--light-gray); } .checkout_list>li .checkbox { position: absolute; top:10px; left: 0;} .checkout_list a { text-decoration: none; } .checkout_list a img.thumn { float: left; width:95px; height: 95px; margin-right:10px; border-radius:5px; border:1px solid var(--light-gray)} .checkout_list a .title { display: block; font-size: 1.2rem; max-height:2.8rem; overflow-y: hidden } /* .checkout_list a { position: relative; width:calc(100% - 37rem - 60px); padding:10px 10px 10px 105px;text-decoration: none; } .checkout_list a img.thumn { position: absolute; top:10px; left: 0; width:95px; height: 95px; border-radius:5px; border:1px solid var(--light-gray)} .checkout_list a .title { display: block; margin-left:105px; font-size: 1.2rem; max-height:2.8rem; overflow-y: hidden }*/ /* .checkout_list a { position: relative; width:calc(100% - 37rem - 60px); padding:10px; text-decoration: none; } .checkout_list a img.thumn { width:95px; height: 95px; border-radius:5px;} .checkout_list a .title { display: block; font-size: 1.2rem; max-height:4.2rem; overflow-y: hidden }*/ .checkout_list a .inlineBlit { display: inline-block; margin-bottom: 10px; } .checkout_list a small { display: block; margin-top: 5px; margin-left: 105px;} .checkout_list .product-order { min-width:27rem; margin-left: 105px; margin-top:10px;border-top: 1px solid #aaa;} .checkout_list .product-order fieldset:not(.product-memo) { position: relative; padding: 30px 11rem 10px 0; border-bottom: 1px solid #aaa;} .checkout_list .product-order fieldset.cart-order-del-req { padding-top: 28px; } .checkout_list .product-order fieldset.cart-order-del-req .cart-order-del-req-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; } .checkout_list .product-order fieldset.cart-order-del-req .cart-order-del-req-date, .checkout_list .product-order fieldset.cart-order-del-req .cart-order-del-req-ampm { display: flex; flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; } .checkout_list .product-order fieldset.cart-order-del-req .delivery_input { width: auto; flex: 0 0 auto; } .checkout_list .product-order fieldset.cart-order-del-req .cart-order-del-req-dt { max-width: 11rem; } .checkout_list .product-order fieldset.cart-order-del-req .cart-order-del-req-ap { min-width: 5.5rem; max-width: 9rem; padding: 4px 8px; } .checkout_list .product-order fieldset:last-child { border-bottom: none;} .checkout_list .product-order fieldset legend { position: absolute; top:7px; left: 0; width:100%; font-weight: 900; } .checkout_list .product-order .orderPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 15px;} .checkout_list .product-order .orderPrice>*{white-space: nowrap; flex-shrink: 0;} .checkout_list .product-order .orderPrice del { font-size: .8rem; color:var(--light-gray) } .checkout_list .product-order .discount_rate {color:var(--red-color)} .checkout_list .product-order .priceEA strong{ font-size:1.2rem; } .checkout_list .product-order .priceUNIT { font-size: .7rem; color:var(--blue-color);} .checkout_list .quantity-control>strong { white-space: nowrap;} .checkout_list .orderOption { height:2rem; line-height: 2rem; margin-top: 5px;} .checkout_list .orderAmountOption { position: absolute; bottom:10px; right:0; width:7rem; height:2rem; line-height: 2rem; text-align:right; font-size:1.4rem;white-space: nowrap;} .checkout_list .product-order fieldset.product-memo { position: relative; padding: 10px 0;} .checkout_list .product-order fieldset.product-memo label { display: flex; align-items: center; gap:10px;} .checkout_list .product-order fieldset.product-memo label input { flex-grow: 1; border:1px solid var(--light-gray); padding:5px} .checkout_list .product-order fieldset .btn-close { top:10px; width:1.4rem; height:1.4rem;} .tooltip {position: absolute; display: none; top:calc(100% - 8px); z-index:9; border-radius:5px; padding:5px; background-color: #000; color:#fff; opacity:0; font-size: .8rem; transition: opacity 0.3s ; } .tooltip::before { content: ""; position: absolute; top:-5px; left:calc(50% - 7px );display: block; width:10px; height:10px; background-color: #000; transform: rotate(45deg); } .tooltip li { list-style:disc ; margin-left: 1rem; margin-top:5px} .tooltip li:first-child{ margin-top: 0;} *:hover > .tooltip { display: block; opacity:.7; } .checkout_list .orderAmount {position: absolute; top:calc(50% - .6rem); right:0; width:10rem;text-align:right; font-size:1.4rem; color: var(--red-color); white-space: nowrap;} @media only screen and (max-width: 860px) { .checkout_list .product-order { margin-left: 0;} } @media only screen and (max-width: 720px) { .checkout_list>li{ padding:10px 10px 10px 30px; } .checkout_list .orderAmount {position: static;width: auto; margin-top: 10px; text-align: right;} .checkout_list a { display: block; padding-bottom: 10px;} .checkout_list a img.thumn { width: 80px; height: 80px; margin-right: 10px;} .checkout_list a .title { font-size: 1rem; max-height: 2.4rem; line-height: 1.3;} .checkout_list a small { font-size: 0.875rem; margin-left: 90px; margin-top: 5px;} } @media only screen and (max-width: 560px) { section.checkout-contents h4 { float: none;} section.checkout-contents .dueDate { float: none; padding-left: 30px; padding-bottom:10px; margin-top:-15px} .checkout_list .product-order { min-width: auto; margin-left: 0; margin-top: 10px;} .checkout_list .product-order fieldset:not(.product-memo) { padding: 25px 0 10px 0;} .checkout_list .product-order fieldset legend { top: 5px; } .checkout_list .product-order .orderPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; line-height: 1.8; margin-top: 20px; margin-bottom: 5px; } .checkout_list .product-order .orderPrice>*{ white-space: nowrap; display: inline-block; flex-shrink: 0; } .checkout_list .product-order .orderPrice del { font-size: 0.75rem; margin-right: 0; } .checkout_list .product-order .discount_rate { font-size: 0.875rem; margin-right: 0; } .checkout_list .product-order .priceEA { margin-right: 0; } .checkout_list .product-order .priceEA strong { font-size: 1rem;} .checkout_list .orderOption { margin-top: 10px;} } @media only screen and (max-width: 500px) { .checkout_list>li{ padding:10px 10px 10px 30px; } .checkout_list a img.thumn { width: 70px; height: 70px; margin-right: 8px;} .checkout_list a .title { font-size: 0.9375rem; max-height: 2.2rem; line-height: 1.3;} .checkout_list a small { font-size: 0.8125rem; margin-left: 78px;} .checkout_list .product-order fieldset:not(.product-memo) { padding: 20px 0 10px 0;} .checkout_list .product-order fieldset legend { top: 5px; } .checkout_list .product-order .orderPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; line-height: 1.8; margin-top: 18px; margin-bottom: 5px; } .checkout_list .product-order .orderPrice>*{ white-space: nowrap; display: inline-block; flex-shrink: 0; } .checkout_list .product-order .orderPrice del { font-size: 0.7rem; margin-right: 0; } .checkout_list .product-order .discount_rate { font-size: 0.8125rem; margin-right: 0; } .checkout_list .product-order .priceEA { margin-right: 0; } .checkout_list .product-order .priceEA strong { font-size: 0.9375rem;} .checkout_list .orderOption { display: flex; flex-direction: column; gap: 5px; margin-top: 10px;} .checkout_list .orderOption .popupTrigger { font-size: 0.875rem;} .checkout_list .orderAmountOption { position: static; margin-top:10px; width:auto; text-align: right; font-size: 1.2rem;} .checkout_list .orderAmount { font-size: 1.2rem; margin-top: 10px;} } @media only screen and (max-width: 450px) { .checkout_list .product-order fieldset .quantity-control { float:none;} .checkout_list .product-order fieldset:not(.product-memo) { padding: 18px 0 10px 0;} .checkout_list .product-order fieldset legend { top: 5px; } .checkout_list .product-order .orderPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; line-height: 1.8; margin-top: 16px; margin-bottom: 5px; } .checkout_list .product-order .orderPrice>*{ white-space: nowrap; display: inline-block; flex-shrink: 0; margin-right: 0; } .checkout_list .product-order .orderPrice del { font-size: 0.65rem;} .checkout_list .product-order .discount_rate { font-size: 0.75rem;} .checkout_list .product-order .priceEA strong { font-size: 0.875rem;} .checkout_list .orderOption { height: auto; line-height: 1.5;} .checkout_list .orderOption .popupTrigger { display: inline-block; font-size: 0.875rem; padding: 5px 20px 5px 5px; border: 1px solid var(--light-gray); border-radius: 5px; background-position: calc(100% - 8px) 50%;} .checkout_list .orderAmountOption { margin-top:10px; font-size: 1.1rem;} } @media only screen and (max-width: 400px) { .checkout_list>li{ padding:10px 5px 10px 25px; } .checkout_list>li .checkbox { left: 5px;} .checkout_list a img.thumn { width: 60px; height: 60px; margin-right: 5px;} .checkout_list a .title { font-size: 0.875rem; max-height: 2rem;} .checkout_list a small { font-size: 0.75rem; margin-left: 65px;} .checkout_list .product-order { margin-top: 8px;} .checkout_list .product-order fieldset:not(.product-memo) { padding: 15px 0 8px 0;} .checkout_list .product-order fieldset legend { top: 3px; font-size: 0.875rem; } .checkout_list .product-order .orderPrice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; line-height: 1.8; margin-top: 14px; margin-bottom: 5px; } .checkout_list .product-order .orderPrice>*{ white-space: nowrap; display: inline-block; flex-shrink: 0; margin-right: 0; } .checkout_list .product-order .orderPrice del { font-size: 0.65rem;} .checkout_list .product-order .discount_rate { font-size: 0.7rem;} .checkout_list .product-order .priceEA strong { font-size: 0.8125rem;} .checkout_list .orderAmountOption { font-size: 1rem;} .checkout_list .orderAmount { font-size: 1rem;} } @media only screen and (max-width: 320px) { .checkout_list a .inlineBlit { display: block; } .checkout_list a img.thumn { float:none; margin-bottom: 5px;} .checkout_list a small { margin-left: 0;} .checkout_list .product-order { margin-left: 0;} } @media only screen and (min-width: 1024px) { .checkout_list>li {display:flex;} .checkout_list>li .checkbox { top:calc(50% - 8px); } .checkout_list .item_box > a {flex:1; width:calc(100% - 37rem - 60px); padding-right: 15px; } .checkout_list a .title, .checkout_list a small, .checkout_list .product-order { margin-left:0; margin-top:0; border-top:0 none} /*.checkout_list a { padding:10px 10px 10px 105px; } .checkout_list a img.thumn { position: absolute; top:10px; left: 0; } .checkout_list a .title { max-height:2.8rem; }*/ } /* 8.5 주문/배송내역 */ section.search-title { text-align: right;} section.search-title + *{ clear: both;} section.search-title .sect_title{ float: left; line-height: 36px; } .order_listBlock > header { text-align: right;margin: 20px 0; } .order_listBlock .block_title { float: left; line-height: 1.5rem; font-size: 1.25rem; } .order_listBlock .block_title .itemLength { float: right; font-weight: 100;} .order_listBlock .block_title .label { font-size:smaller; color: var(--text-gray); margin-right: 10px;} .order_listBlock .block_button { float: left; vertical-align: middle; margin-left:10px; } .order_listBlock > section { margin:10px 0;} .order_listBlock > header + * { clear: both;} .order_listBlock .moreLoad {appearance: none; -webkit-appearance: none; -moz-appearance: none; display: block; margin: 10px auto 0; padding:2px 5px; line-height: 1.5rem; font-size: 1rem; background-color: transparent; color:var(--text-gray); transition: all .3s; border:0 none; border-radius: 10px; } .order_listBlock .moreLoad:hover { color:#000; background-color: #eee;} .order_listBlock .moreLoad:after { content: ""; display:inline-block; width:1.25rem; height:1.25rem; background-image: url(../images/common/icon_arrowdown.svg); background-repeat: no-repeat; background-position: 50% 50%; vertical-align: middle; opacity:.5; transition: all .3s; } .order_listBlock .moreLoad:hover::after { opacity:1; } .order_list_container { margin: 20px 0; } .order_list_container .order_listBlock { background-color: #fff; padding: 20px; border-radius: 8px; } .order_list { border-bottom:1px solid var(--light-gray);} .order_list>li{ display:flex; justify-content:stretch; align-items:flex-start; gap:10px; list-style: none; align-items:center; padding:10px; border-top:1px solid var(--light-gray);} .order_list a { text-decoration: none;} .order_list img.thumn { width:107px; height: 107px; border-radius:5px; border:1px solid var(--light-gray)} .order_list .orderSummary { flex:1; } .orderSummary .blit_store { display: block; font-size: 1rem; margin-bottom: 10px;} .orderSummary .typeToday { display: inline-block; padding: 2px 5px; margin:0 5px; border-radius: 5px; background-color: var(--primary-color); font-weight: bold;} .orderSummary .title { font-size: 1.25rem;} .orderSummary .orderOption { font-size: 1rem; color:var(--text-gray); margin-top:5px} .orderState { width:120px;} .orderState button { display: block; width:100%; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding: 5px; ; margin-top: 5px; border-radius: 5px; font-size:1.125rem; background-color: #fff; transition: background .3s;} .orderState button:hover { background-color:#eee ;} .orderState button.typeSelectBox, .orderState button.hvMore { background-position: calc(100% - 10px) 50%; padding: 5px 25px 5px 10px; border:1px solid var(--bd-lightgray)} /* 주문 상세 페이지 헤더 */ main > header.orderInfo-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } main > header.orderInfo-header .page-title { margin: 0; } /* 주문 상세 페이지 상단 정보 */ .orderInfo { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--light-gray); margin-bottom: 20px; } .orderInfo .orderInfo-left { flex: 1; } .orderInfo .orderInfo-left p { margin: 5px 0; } .orderInfo .itemInfo-Datetime { font-size: 0.9rem; color: var(--text-gray); } .orderInfo .itemInfo-ID { font-size: 1rem; } .orderInfo .itemInfo-ID strong { color: var(--primary-color); font-weight: bold; } .orderInfo .orderState { display: block; width: 130px; margin-top: 0; } .orderInfo .orderState button { margin-top: 5px; width: 100%; min-width: auto; padding: 8px 15px; } .orderInfo .orderState button:first-child { margin-top: 0; } @media only screen and (max-width: 720px) { section.search-title { text-align: left;} section.search-title .sect_title{ float:none} .inlineFormGroup { white-space: wrap; line-height: 2.75rem;} .order_listBlock > header { position: relative; text-align: left } .order_listBlock .block_title { float: none; margin-bottom: 10px;} .order_listBlock .block_title .itemLength { float: none} .order_listBlock > header .hvMore { position: absolute; top:.75rem; right:0; transform: translateY(-50%);} .order_listBlock .block_button { float: none; margin-left: 0;} .orderSummary .blit_store, .orderSummary .orderOption, .orderSummary .typeToday {font-size: .9375rem;} .orderSummary .title { font-size: 1.125rem;} .order_list>li { display: block; text-align: justify;} .order_list>li>.linkPtoduct { display: inline-block; vertical-align: top; margin-right: 5px;} .order_list .orderSummary { display: inline-block; width:calc(100% - 120px ); text-align: left; } .orderState { display: flex; gap:10px; width:100%; margin-top: 5px;} .orderState button { font-size: 1rem;} /* orderInfo 반응형 */ .orderInfo { flex-direction: column; align-items: flex-start; } .orderInfo .orderState { display: flex; width: 100%; margin-top: 10px; } .orderInfo .orderState button { width: 100%; } } @media only screen and (max-width: 500px) { .orderSummary .blit_store, .orderSummary .orderOption, .orderSummary .typeToday {font-size: .875rem;} .orderSummary .title { font-size: 1rem;} .orderState button { font-size: .9375rem;} } @media only screen and (max-width: 420px) { .order_list img.thumn { width:90px; height: 90px; } .orderSummary .orderOption {font-size: .75rem;} .orderSummary .title { font-size: .9375rem;;} .orderState button { font-size: .875rem;} } /* 8.6 쿠폰 등 특수 리스트 */ .ListItem_info .itemType {display: block;} /* 쿠폰 리스트 */ .couponList { display:flex; gap:10px; flex-wrap: wrap; justify-content: stretch; margin-top:30px; margin-bottom: 20px;} .couponList .couponItem { flex:1; width: calc(33% - 5px); max-width:calc(50% -5px); min-width: 300px;} .couponItem {display: flex; gap:0} .couponItem>* { padding: 15px; border-radius: 10px; background-color: #fff; border-top:1px solid var(--bd-lightgray); border-bottom:1px solid var(--bd-lightgray)} .couponItem>*:first-child {border-left:1px solid var(--bd-lightgray)} .couponItem>*:last-child {border-right:1px solid var(--bd-lightgray)} .couponItem>.listItem_info { flex:1; } .couponItem>.listItem_publisher { display: flex; flex-direction:column; justify-content: center; align-items: center; gap:5px; width:100px; border-left:1px dashed var(--bd-lightgray); } .listItem_info .itemType { display:block; ; font-size: .925rem; margin-bottom:5px; } .listItem_info .itemTitle { color:var(--primary-dark-color); font-size: 1.25rem; font-weight: bold;} .listItem_info .descText { list-style: none; padding-left: 0;} .listItem_info .itemDate {color:var(--blue-color); font-weight: bold;} .listItem_info .hvMore { display: inline-block; float: right; font-size: .825rem;} .listItem_publisher > * { max-width: 100%; font-size: .925rem; color:var(--text-gray); font-weight: bold;} /* 주소 리스트: */ .addressList {} li.addressItem { list-style: none; background-color: #fff;} .addressItem { position: relative; padding:20px; margin:10px auto; border:1px solid var(--light-gray); border-radius: 10px;} .addressItem.solo { padding:10px 0 0; border:0px none; border-top:1px solid var(--light-gray); border-radius:0;} .addressItem_title { line-height: 1.5rem; padding: .25rem 0; font-size: 1.25rem;} .addressItem .isBasic { float: right; display: inline-block; padding:5px; } .addressItem dl { margin-bottom: 10px;} .addressItem dd { line-height: 1.25rem; padding: .375rem 0; list-style: none;} .addressItem .phoneNum{ font-size:1.125rem; font-weight: bold; color:var(--text-gray); margin-right: 10px;} label {position: relative; display: inline-block;} label .tooltip { white-space: nowrap; top:1.25rem} .addressItem > button[data-popupid="paymentPopup_ChangeDelivery"] { position: absolute; right:20px; top:20px} .addressItem > button[data-popupid="paymentPopup_DeliveryNote"] { width:100%; margin-bottom:10px; font-size: 1rem; border:1px solid var(--light-gray); background-position: calc(100% - 10px) 50%; height:40px; line-height: 40px;border-radius: 5px; text-align: left; color:var(--text-gray)} .addressItem textarea[name="DeliveryNote"] { background-color: #fff; display: block; pointer-events: none; visibility: hidden; height:0; padding:0 } .addressItem textarea.active[name="DeliveryNote"] { background-color: #fff; display: block; pointer-events: auto; visibility: visible; padding:10px; height:2.4rem; line-height: 1.2rem; margin-bottom:10px; margin-top:-5px} /*-------------------------------------------------------------- 9.0 Member System: 회원 시스템 ----------------------------------------------------------------*/ /* 9.1 회원가입 & 로그인*/ .formSect { width:680px; margin: 40px auto 50px;} .loginSect { width: 300px; margin: 40px auto 50px;} .loginSect .formGroup { padding: 10px 0; line-height: calc(1.6rem + 22px);} .loginSect input[type=text], .loginSect input[type=password] { width: calc(100% - 12px) !important;} .loginSect .btn_more { width: 100% !important;} .loginSect input + .btn_more { margin-top: 10px;} @media only screen and (max-width: 768px) { .formSect {width: auto; margin: 40px 0 50px;} } /* 9.2 마이페이지 레이아웃 */ .page .mypage { background-color:var(--bg-lightgray); padding:35px calc(50% - var(--container-width)/2)} .mypage>.leftNavi, .mypage>main>header, .mypage>main>article, .mypage>main>section {margin-top: 10px; border-radius: 10px; background-color: #fff; border:1px solid var(--bd-lightgray)} .mypage>main>header,.mypage>main>article, .mypage>main>section {padding:20px; } .leftNavi_title { padding: 20px 15px; border-top-right-radius: 10px; border-top-left-radius: 10px; font-size: 1.625rem; font-weight: 900;} .leftNavi_title a { text-decoration: none; color:var(--primary-dark-color)} .leftNavi_summary { display: flex; gap: 0; flex-wrap: wrap; background-color:var(--bg-darkgray); } .blind + .leftNavi_summary { border-top-right-radius: 10px; border-top-left-radius: 10px; padding-top:10px; } .leftNavi_summary > li {list-style: none; padding:15px; text-align: right; color:var(--bd-lightgray); font-size:1rem;} .leftNavi_summary > li:first-child { width:100%; font-size: 1.125rem; text-align: left ; } .leftNavi_summary > li:nth-child(n+2) { min-width: 50%; flex:1; border-top:1px solid var(--bd-darkgray); } .leftNavi_summary > li:nth-child(n+3) { border-left:1px solid var(--bd-darkgray); } .leftNavi_summary > li .inlineBlit:first-child { float: left; margin-right: 10px; text-align: left; opacity:.65;} .leftNavi_summary > li .membership { display: inline-block; vertical-align: middle; color:var(--primary-color); font-weight: 900; font-size: larger;} .leftNavi_summary > li:nth-child(n+2) > * { display: inline-block; margin: 5px 0;} .leftNavi_summary a{ color:var(--bd-lightgray); text-decoration: none; transition: color .3s; white-space: nowrap;} .leftNavi_summary a:hover{ text-decoration: underline ;} .leftNavi_menu { display: flex; flex-wrap: wrap; justify-content: center; padding: 10px;} .leftNavi_menu > li { text-align: center; list-style: none; padding:0; white-space: nowrap; } .leftNavi_menu a { display: block; padding:10px; text-decoration: none; color:var(--text-gray); font-size: .925rem; } .leftNavi_menu a:hover { color:#000; background-color: var(--bg-lightgray); } .leftNavi_menu a.active {color:var(--red-color); background-color: var(--bg-lightgray);} .mypage>main>section { position: relative;} .mypage>main>section>header { text-align: right; line-height: 36px;} .mypage>main>section>header.sect_header { text-align: left; } .mypage>main>section>header + * { clear: both;} .mypage>main>section>header .sect_title { float: left; } .mypage>main>section>header .sect_title, .mypage>main>section>header .descText { display: inline-block;} .mypage>main>section>header .sect_title .inlineBlit { padding-left: 30px; color:var(--red-color)} .mypage>main>section>header .sect_title .inlineBlit::before { width: 30px; height: 30px; background-size: 30px; transform: translateY(-5px);} ol.statusByStep {display: flex; gap:50px; justify-content: space-between; padding: 10px; background-color: var(--bg-lightgray);} ol.statusByStep>li { position: relative; flex: 1; list-style: none; text-align: center;} ol.statusByStep>li a { display: flex; flex-direction: column; gap:5px; height: 100%; text-decoration: none; font-size: 1.75rem; font-weight: 900;} ol.statusByStep>li a>.label { flex: 1; display: block; font-size: 1rem; color:var(--text-color); opacity: .7; font-weight: 300;} ol.statusByStep>li:nth-child(n+2):before {content: ">"; position: absolute;top:50%; right:calc(100% + 20px); width:10px; height: 20px; transform: translateY(-50%); } ol.statusByStep>li a.on { color: var(--point-color, #e51d22); } ol.statusByStep>li a.on .label { opacity: 1; font-weight: 500; } .mypage > main > section > footer .btnSet { position: absolute; top: 20px; right: 20px; width: auto; display: flex; gap: 10px;} @media only screen and (max-width: 860px) { } @media only screen and (max-width: 720px) { ol.statusByStep {gap:20px;} ol.statusByStep>li:nth-child(n+2):before {right:calc(100% + 5px);} } @media only screen and (max-width: 560px) { ol.statusByStep>li a>.label { min-height: 36px;} .mypage > main > section > footer .btnSet { position: static; justify-content: center; margin:10px 0 } } @media only screen and (max-width: 500px) { } @media only screen and (max-width: 450px) { } @media only screen and (max-width: 320px) { } @media only screen and (min-width: 1024px) { .page .mypage { display: flex; gap:20px; justify-content: space-between; } .mypage>.leftNavi { width: 245px; padding-bottom: 10px; } .mypage>main { width:calc(100% - 265px);} .leftNavi_summary { display: block;} .leftNavi_summary > li:first-child { border-bottom:0 none} .leftNavi_summary > li:nth-child(n+2) { width: 100%; border-top:1px solid var(--bd-darkgray); } .leftNavi_summary > li:nth-child(n+3) { border-left:0 none; } .leftNavi_summary > li:first-child > .label {display: block; background-color: transparent; padding:0; margin-bottom: 6px;} .leftNavi_menu { display: block; padding: 0; } .leftNavi_menu > li { border-left:0 none; width: 100%; text-align: left; padding: 10px; border-top:1px solid var(--bd-lightgray);} .leftNavi_menu a { font-size: 1.125rem; font-weight: bold; padding: 10px 5px; } } /*-------------------------------------------------------------- 9.0 페이지 별 상세 맞춤 ----------------------------------------------------------------*/ /* 상품상세보기 ProductView.html */ #item_inquiry > header > p {margin-right: 120px;} /* 결제수단관리 PaymentMethod.html */ /* 결제수단관리 페이지 스타일 */ .payment-method-page { padding: 40px; max-width: 1200px; } .payment-method-page h2 { font-size: 28px; font-weight: bold; margin-bottom: 20px; color: #333; } /* 안내 박스 */ .payment-info-box { background-color: #f5f5f5; padding: 24px 30px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; } .payment-info-box p { margin: 0; font-size: 16px; color: #333; } .btn-add-payment { background-color: #5b9aff; color: white; border: none; padding: 12px 40px; border-radius: 6px; font-size: 16px; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } .btn-add-payment:hover { background-color: #4a89ee; } /* 결제수단 섹션 */ .payment-section { margin-bottom: 50px; } .payment-section h3 { font-size: 20px; font-weight: bold; margin-bottom: 20px; color: #333; } /* 카드/계좌 리스트 컨테이너 */ .payment-list-container { position: relative; } .payment-list { display: flex; gap: 20px; overflow-x: auto; scroll-behavior: smooth; padding: 10px 0; -ms-overflow-style: none; scrollbar-width: none; } .payment-list::-webkit-scrollbar { display: none; } /* 좌우 네비게이션 버튼 */ .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background-color: white; border: 1px solid #ddd; border-radius: 50%; width: 40px; height: 40px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: all 0.2s; } .nav-btn:hover { background-color: #f5f5f5; box-shadow: 0 4px 12px rgba(0,0,0,0.15); } .nav-btn.prev { left: -20px; } .nav-btn.next { right: -20px; } .nav-btn::before { content: ''; width: 8px; height: 8px; border-top: 2px solid #666; border-right: 2px solid #666; } .nav-btn.prev::before { transform: rotate(-135deg); margin-left: 4px; } .nav-btn.next::before { transform: rotate(45deg); margin-right: 4px; } /* 카드/계좌 아이템 */ .payment-item { min-width: 280px; height: 160px; background: linear-gradient(135deg, #ffd700 0%, #ffb700 100%); border-radius: 12px; padding: 20px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,0.1); display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.2s, box-shadow 0.2s; background-size: contain; background-position: center; background-repeat: no-repeat; } .payment-item:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } /* 카드 이미지가 있는 경우 */ .payment-item.with-image { background-size: cover; background-position: center; color: white; } .payment-item.with-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); border-radius: 12px; } .payment-item.with-image > * { position: relative; z-index: 1; } /* 삭제 버튼 */ .btn-delete { position: absolute; top: 15px; right: 15px; background-color: transparent; border: none; color: white; font-size: 20px; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } .btn-delete:hover { transform: scale(1.2); } /* 카드/계좌 레이블 */ .payment-label { font-size: 14px; font-weight: 500; margin-bottom: 8px; opacity: 0.9; width: 80%; } .payment-item.with-image .payment-label { color: white; } /* 카드사/은행 이름 */ .payment-name { font-size: 18px; font-weight: bold; margin-bottom: 8px; } .payment-item.with-image .payment-name { color: white; } /* 카드/계좌 번호 */ .payment-number { font-size: 16px; font-weight: 600; letter-spacing: 1px; } .payment-item.with-image .payment-number { color: white; } /* 로고 영역 */ .payment-logo { position: absolute; bottom: 15px; right: 15px; max-width: 80px; opacity: 0.8; } /*반응형*/ @media only screen and (max-width: 768px) { .payment-method-page { padding: 20px; } .payment-info-box { flex-direction: column; gap: 15px; text-align: center; } .btn-add-payment { width: 100%; } .payment-item { min-width: 240px; } .nav-btn { display: none; } } /* 8.7 결제 취소 팝업 */ .popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999; display: flex; align-items: center; justify-content: center; } .popup_container { position: relative; width: 90%; max-width: 500px; max-height: 90vh; background-color: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.15); } .popup_header { position: relative; padding: 20px; border-bottom: 1px solid var(--bd-lightgray); background-color: #fff; } .popup_header h3 { margin: 0; font-size: 1.25rem; font-weight: 600; text-align: center; } .popup_close { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 30px; height: 30px; background: url('../images/common/icon_close.png') no-repeat center; background-size: 20px; border: none; cursor: pointer; } .popup_content { padding: 20px; max-height: calc(90vh - 140px); overflow-y: auto; } /* 예약 정보 섹션 */ .cancel_info_section { margin-bottom: 20px; padding: 15px; background-color: var(--bg-lightgray); border-radius: 8px; } .cancel_section_title { margin: 0 0 15px 0; font-size: 1.125rem; font-weight: 600; } .cancel_info_grid dl { display: flex; justify-content: space-between; margin: 8px 0; font-size: 0.9375rem; } .cancel_info_grid dt { color: var(--text-gray); } .cancel_info_grid dd { font-weight: 500; color: var(--text-color); } /* 전체 취소된 주문 블록 스타일 (del 태그처럼) */ .order_listBlock.cancelled { opacity: 0.7; color: #999; } .order_listBlock.cancelled header, .order_listBlock.cancelled .block_title, .order_listBlock.cancelled .itemLength, .order_listBlock.cancelled .hvMore, .order_listBlock.cancelled .orderSummary, .order_listBlock.cancelled .title, .order_listBlock.cancelled .orderOption, .order_listBlock.cancelled .orderValue, .order_listBlock.cancelled .orderPrice, .order_listBlock.cancelled .moreLoad { text-decoration: line-through; color: #999; } .order_listBlock.cancelled .orderState button { text-decoration: line-through; color: #999; } /* 취소 금액 섹션 */ .cancel_amount_section { margin-top: 20px; } .cancel_amount_row { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--bd-lightgray); } .cancel_amount_row dt { font-size: 1rem; color: var(--text-color); } .cancel_amount_row dd { text-align: right; font-size: 1rem; font-weight: 500; } .cancel_amount_row.highlight dt { font-weight: 600; } .cancel_amount_row.highlight dd strong { color: var(--red-color); font-size: 1.125rem; } .cancel_detail { margin: 5px 0 0 0; font-size: 0.875rem; color: var(--text-gray); } .cancel_amount_row.total { border-top: 2px solid var(--text-color); border-bottom: none; padding-top: 15px; margin-top: 10px; } .cancel_amount_row.total dt { font-size: 1.125rem; font-weight: 600; } .cancel_amount_row.total dd { font-size: 1.25rem; font-weight: 700; color: var(--blue-color); } /* 취소 수량 입력 섹션 */ .cancel_input_section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bd-lightgray); } .cancel_input_row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .cancel_input_row label { min-width: 60px; font-size: 1rem; font-weight: 500; color: var(--text-color); } .cancel_input { flex: 1; padding: 10px 15px; border: 1px solid var(--bd-lightgray); border-radius: 8px; font-size: 1rem; text-align: center; } .cancel_input:focus { outline: none; border-color: var(--blue-color); } .input_unit { min-width: 40px; font-size: 0.9375rem; color: var(--text-gray); } .cancel_total_amount { margin-top: 20px; padding: 15px; background-color: #f0f7ff; border-radius: 8px; text-align: center; font-size: 1rem; } .cancel_total_amount strong { font-size: 1.25rem; color: var(--blue-color); font-weight: 700; margin-left: 10px; } /* 취소 사유 섹션 */ .cancel_reason_section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bd-lightgray); } .cancel_reason_title { margin: 0 0 15px 0; font-size: 1rem; font-weight: 600; color: var(--text-color); } .cancel_reason_buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .reason_btn { padding: 12px 15px; border: 1px solid var(--bd-lightgray); border-radius: 8px; background-color: #fff; color: var(--text-color); font-size: 0.9375rem; cursor: pointer; transition: all 0.3s; text-align: center; } .reason_btn:hover { border-color: var(--blue-color); background-color: #f0f7ff; } .reason_btn.active { border-color: var(--blue-color); background-color: var(--blue-color); color: #fff; font-weight: 600; } .cancel_reason_textarea { margin-top: 8px; padding: 8px; border: 1px solid var(--bd-lightgray); border-radius: 8px; font-size: 0.875rem; min-height: 40px; max-height: 60px; resize: vertical; line-height: 1.4; } .cancel_reason_textarea:focus { outline: none; border-color: var(--blue-color); } /* 팝업 푸터 */ .popup_footer { padding: 15px 20px; border-top: 1px solid var(--bd-lightgray); background-color: #fff; } .btn_cancel_order { width: 100%; padding: 15px; background-color: var(--blue-color); color: #fff; border: none; border-radius: 8px; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } .btn_cancel_order:hover { background-color: #2558a0; } /* 영수증 팝업 */ .receipt_container { max-width: 800px; } .receipt_content { background-color: #fff; } .receipt_header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 2px solid #333; } .receipt_title { font-size: 1.75rem; font-weight: 700; margin: 0 0 10px 0; color: var(--text-color); } .receipt_date { font-size: 0.9375rem; color: var(--text-gray); margin: 0; } .receipt_section { margin: 25px 0; padding: 20px 0; border-bottom: 1px solid var(--bd-lightgray); } .receipt_section:last-child { border-bottom: none; } .receipt_section_title { font-size: 1.125rem; font-weight: 600; margin: 0 0 15px 0; color: var(--text-color); padding-bottom: 8px; border-bottom: 2px solid var(--bd-lightgray); } .receipt_info_row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f5f5f5; } .receipt_info_row dt { font-weight: 500; color: var(--text-gray); font-size: 0.9375rem; } .receipt_info_row dd { font-weight: 600; color: var(--text-color); margin: 0; font-size: 1rem; text-align: right; } .receipt_amount_row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f5f5f5; } .receipt_amount_row dt { font-weight: 500; color: var(--text-gray); font-size: 1rem; } .receipt_amount_row dd { font-weight: 600; color: var(--text-color); margin: 0; font-size: 1rem; } .receipt_amount_row.total { border-top: 2px solid #333; border-bottom: 2px solid #333; margin-top: 10px; padding: 15px 0; } .receipt_amount_row.total dt { font-size: 1.25rem; font-weight: 700; color: var(--text-color); } .receipt_amount_row.total dd { font-size: 1.5rem; font-weight: 700; color: var(--blue-color); } .receipt_table { width: 100%; border-collapse: collapse; margin: 10px 0; } .receipt_table th { background-color: var(--bg-lightgray); padding: 12px 10px; border: 1px solid var(--bd-lightgray); font-weight: 600; text-align: center; font-size: 0.9375rem; color: var(--text-color); } .receipt_table td { padding: 12px 10px; border: 1px solid var(--bd-lightgray); text-align: center; font-size: 0.9375rem; } .receipt_table td.text-left { text-align: left; } .btn_print { width: 100%; padding: 15px; background-color: var(--blue-color); color: #fff; border: none; border-radius: 8px; font-size: 1.125rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } .btn_print:hover { background-color: #2558a0; } /* 배송지 관리 팝업 */ .delivery_input_section { display: flex; flex-direction: column; gap: 20px; } .delivery_input_row { display: flex; flex-direction: column; gap: 8px; } .delivery_input_row.receive_chk_row { display: block; } .delivery_input_row label { font-weight: 600; font-size: 0.9375rem; color: var(--text-color); } .delivery_input { width: 100%; padding: 8px 12px; border: 1px solid var(--bd-lightgray); border-radius: 8px; font-size: 0.9375rem; transition: border-color 0.3s; height: 40px; } .delivery_input:focus { outline: none; border-color: var(--blue-color); } .delivery_textarea { width: 100%; padding: 8px 12px; border: 1px solid var(--bd-lightgray); border-radius: 8px; font-size: 0.9375rem; resize: vertical; min-height: 80px; transition: border-color 0.3s; } .delivery_textarea:focus { outline: none; border-color: var(--blue-color); } #deliveryPopup .delivery_input_row .mfBtn { padding: 8px 16px; font-size: 0.9375rem; line-height: 1.5; } .popup_body { max-height: calc(90vh - 180px); overflow-y: auto; } .popup_footer { display: flex; gap: 10px; justify-content: flex-end; } .popup_footer button { min-width: 100px; padding: 12px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } /* 팝업 반응형 */ @media only screen and (max-width: 500px) { .popup_container { width: 95%; } .popup_header { padding: 15px; } .popup_content { padding: 15px; } .cancel_section_title { font-size: 1rem; } .cancel_amount_row dt, .cancel_amount_row dd { font-size: 0.9375rem; } .cancel_input_row { flex-direction: column; align-items: stretch; gap: 5px; } .cancel_input_row label { min-width: auto; text-align: left; } .input_unit { text-align: right; } .cancel_reason_buttons { grid-template-columns: 1fr; gap: 8px; } .reason_btn { padding: 10px 12px; font-size: 0.875rem; } /* 영수증 반응형 */ .receipt_container { max-width: 100%; } .receipt_title { font-size: 1.375rem; } .receipt_section_title { font-size: 1rem; } .receipt_table th, .receipt_table td { padding: 8px 5px; font-size: 0.875rem; } /* 배송지 팝업 반응형 */ .popup_body { padding: 20px; } .delivery_input_section { gap: 15px; } } /* 페이징 스타일 */ .pagination { margin: 30px 0; text-align: center; } /* bbuJs Alert & Confirm 팝업 스타일 */ #bbuAlertBox, #bbuConfirmBox { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10000; display: flex; align-items: center; justify-content: center; } .bbu-modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 1; } .bbu-modal-container { position: relative; width: 90%; max-width: 400px; background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); z-index: 2; overflow: hidden; } .bbu-modal-header { position: relative; padding: 20px 50px 15px 20px; border-bottom: 1px solid #e0e0e0; } .bbu-modal-header h3.titAlert { margin: 0; font-size: 1.25rem; font-weight: 700; color: #333; text-align: center; } .bbu-modal-close { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); width: 30px; height: 30px; background: url('../images/common/icon-line_close.svg') no-repeat center; background-size: 20px; border: none; cursor: pointer; opacity: 0.7; transition: opacity 0.3s; padding: 0; } .bbu-modal-close:hover { opacity: 1; } .bbu-modal-body { padding: 25px 20px; text-align: center; min-height: 60px; display: flex; align-items: center; justify-content: center; } .bbu-modal-body p.txtAlert { margin: 0; font-size: 1rem; line-height: 1.6; color: #666; white-space: pre-line; } .bbu-modal-footer { padding: 15px 20px 20px; display: flex; gap: 10px; border-top: 1px solid #f0f0f0; } .bbu-btn { flex: 1; padding: 12px 20px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s; text-align: center; } .bbu-btn.btnCancel { background-color: #fff9e6; color: #d4a017; border: 1px solid #ffeb99; } .bbu-btn.btnCancel:hover { background-color: #fff4cc; border-color: #ffd700; } .bbu-btn.btnConfirm, .bbu-btn.btnDefault { background-color: var(--primary-color); color: #333; font-weight: 700; } .bbu-btn.btnConfirm:hover, .bbu-btn.btnDefault:hover { background-color: #d4a017; color: #fff; } .bbu-btn.btnMultiLine { white-space: normal; line-height: 1.4; padding: 10px 15px; } /* 모바일 반응형 */ @media only screen and (max-width: 500px) { .bbu-modal-container { width: 95%; max-width: 350px; } .bbu-modal-header { padding: 18px 45px 12px 18px; } .bbu-modal-header h3.titAlert { font-size: 1.125rem; } .bbu-modal-body { padding: 20px 15px; } .bbu-modal-body p.txtAlert { font-size: 0.9375rem; } .bbu-modal-footer { padding: 12px 15px 18px; flex-direction: column; } .bbu-btn { width: 100%; padding: 14px 20px; } } .pagination_list { display: inline-flex; align-items: center; justify-content: center; gap: 5px; list-style: none; padding: 0; margin: 0; } .pagination_list li { display: inline-block; margin: 0; } .pagination_list li a, .pagination_list li strong { display: inline-block; min-width: 36px; height: 36px; line-height: 36px; padding: 0 12px; text-align: center; text-decoration: none; color: var(--text-color); border: 1px solid var(--bd-lightgray); border-radius: 4px; transition: all 0.3s ease; font-size: 0.9375rem; } .pagination_list li a:hover { background-color: var(--bg-lightgray); border-color: var(--blue-color); color: var(--blue-color); } .pagination_list li.active strong { background-color: var(--blue-color); border-color: var(--blue-color); color: #fff; font-weight: 600; } .pagination_list li:first-child a, .pagination_list li:last-child a { font-weight: 600; } /* 반응형 */ @media only screen and (max-width: 600px) { .pagination_list { gap: 3px; } .pagination_list li a, .pagination_list li strong { min-width: 32px; height: 32px; line-height: 32px; padding: 0 8px; font-size: 0.875rem; } } /* 로딩 오버레이 */ .loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 99999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; } .loading-overlay.active { opacity: 1; visibility: visible; } /* 로딩 스피너 */ .loading-spinner { width: 60px; height: 60px; position: relative; } .loading-spinner::before, .loading-spinner::after { content: ''; position: absolute; border: 4px solid transparent; border-top-color: #0068b7; border-radius: 50%; animation: spin 1s linear infinite; } .loading-spinner::before { width: 60px; height: 60px; top: 0; left: 0; } .loading-spinner::after { width: 40px; height: 40px; top: 10px; left: 10px; border-top-color: #e74683; animation-duration: 0.8s; animation-direction: reverse; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 주문 펼쳐보기 클릭 */ .moreLoad.isOpen::after { /* 위쪽 화살표 스타일 */ transform: rotate(180deg); } /* 로딩 텍스트 */ .loading-text { margin-top: 20px; color: #fff; font-size: 1rem; font-weight: 500; text-align: center; } /* 로딩 컨테이너 */ .loading-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } /* 간단한 로딩 스피너 (대안) */ .loading-spinner-simple { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top-color: #0068b7; border-radius: 50%; animation: spin 0.8s linear infinite; } /* 점 애니메이션 로딩 */ .loading-dots { display: flex; gap: 8px; align-items: center; justify-content: center; } .loading-dots span { width: 12px; height: 12px; background-color: #0068b7; border-radius: 50%; animation: bounce 1.4s ease-in-out infinite; } .loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.5; } 40% { transform: scale(1.2); opacity: 1; } } /* 페이지 로딩 오버레이 */ /* 로딩 오버레이 */ .page-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); display: flex; justify-content: center; align-items: center; z-index: 99999; /* 팝업(z-index: 9999)보다 위에 표시 */ opacity: 1; visibility: visible; /* 기본적으로는 보이는 상태 */ transition: opacity 0.3s ease-out, visibility 0.3s ease-out; } .page-loader.hidden { opacity: 0; visibility: hidden; } /* 로고 애니메이션 컨테이너 */ .loader-logo { width: 120px; height: 120px; background-image: url('../images/common/header-logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; animation: logoSpin 1.5s ease-in-out infinite; } /* 회전 애니메이션 */ @keyframes logoSpin { 0% { transform: rotate(0deg) scale(1); opacity: 1; } 50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; } 100% { transform: rotate(360deg) scale(1); opacity: 1; } } /* 펄스 효과 (선택사항) */ @keyframes logoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* 회전 + 펄스 조합 (더 부드러운 효과) */ .loader-logo { animation: logoSpin 2s linear infinite, logoPulse 1.5s ease-in-out infinite; } /* 멤버십 소개 페이지 */ .membership_intro { max-width: 1200px; margin: 0 auto; padding: 20px; } .pageTitle { font-size: 2rem; font-weight: bold; text-align: center; margin: 30px 0; color: #333; } .sectionTitle { font-size: 1.5rem; font-weight: bold; margin: 40px 0 20px 0; padding-bottom: 10px; border-bottom: 2px solid #e0e0e0; color: #333; } .intro_section { margin-bottom: 50px; } .intro_section .descText { font-size: 1.1rem; line-height: 1.8; color: #666; text-align: center; } .grade_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 30px 0; } .grade_item { background: #fff; border: 2px solid #e0e0e0; border-radius: 12px; padding: 30px; text-align: center; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .grade_item:hover { transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); border-color: #4CAF50; } .grade_icon { margin-bottom: 20px; text-align: center; display: flex; justify-content: center; align-items: center; height: 80px; } .grade_icon .inlineBlit { width: 80px !important; height: 80px !important; display: inline-block; padding-left: 0 !important; margin: 0; position: relative; } .grade_icon .inlineBlit::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px !important; height: 80px !important; background-size: contain !important; background-repeat: no-repeat; background-position: center; } .grade_info { text-align: center; } .grade_name { font-size: 1.5rem; font-weight: bold; margin: 10px 0; color: #333; } .grade_desc { font-size: 0.9rem; color: #999; margin-bottom: 15px; } .grade_benefit { margin-top: 15px; } .grade_benefit dt { font-size: 0.9rem; color: #666; margin-bottom: 5px; } .grade_benefit dd { font-size: 1.3rem; font-weight: bold; color: #4CAF50; margin: 0; } .benefit_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 30px 0; } .benefit_item { background: #f9f9f9; border-radius: 8px; padding: 25px; border-left: 4px solid #4CAF50; } .benefit_title { font-size: 1.2rem; font-weight: bold; margin-bottom: 10px; color: #333; } .benefit_desc { font-size: 0.95rem; line-height: 1.6; color: #666; margin: 0; } .notice_section { margin-top: 50px; padding: 30px; background: #fff9e6; border-radius: 8px; border: 1px solid #ffd700; } .notice_list { list-style: none; padding: 0; margin: 0; } .notice_list li { padding-left: 25px; position: relative; font-size: 0.95rem; line-height: 1.6; color: #666; } .notice_list li:before { content: "•"; position: absolute; left: 0; color: #ff9800; font-weight: bold; font-size: 1.2rem; } .membership_signup_section { margin-top: 60px; margin-bottom: 40px; text-align: center; padding: 40px 20px; } .signup_button_wrapper { display: inline-block; } .membership_signup_btn { min-width: 250px; padding: 18px 40px; font-size: 1.2rem; font-weight: bold; text-decoration: none; display: inline-block; transition: all 0.3s ease; } .membership_signup_btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); } @media (max-width: 768px) { .grade_list, .benefit_list { grid-template-columns: 1fr; } .pageTitle { font-size: 1.5rem; } .sectionTitle { font-size: 1.2rem; } .membership_signup_btn { min-width: 200px; padding: 15px 30px; font-size: 1rem; } } /* 이용약관 */ .terms_container { max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .terms_title { font-size: 2rem; font-weight: 700; text-align: center; margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid var(--primary-dark-color); } .terms_section { margin-bottom: 50px; } .terms_section_title { font-size: 1.5rem; font-weight: 700; margin-bottom: 30px; padding-bottom: 10px; border-bottom: 1px solid #e8e8e8; } .terms_article { margin-bottom: 30px; } .terms_article_title { font-size: 1.2rem; font-weight: 600; margin-bottom: 15px; color: var(--primary-dark-color); } .terms_content { line-height: 1.8; color: #333; margin-bottom: 15px; } .terms_content ol, .terms_content ul { margin-left: 20px; margin-bottom: 15px; } .terms_content li { margin-bottom: 10px; padding-left: 5px; } .terms_content strong { font-weight: 600; } .terms_content .terms_table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 0.95rem; } .terms_content .terms_table th, .terms_content .terms_table td { border: 1px solid #ddd; padding: 10px 12px; text-align: left; vertical-align: top; } .terms_content .terms_table th { background-color: #f5f5f5; font-weight: 600; color: #333; } .terms_content .terms_table tbody tr:nth-child(even) { background-color: #fafafa; } .terms_date { text-align: right; margin-top: 50px; padding-top: 20px; border-top: 1px solid #e8e8e8; color: #666; font-size: 0.9rem; } .terms_version_selector { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; padding: 20px; background-color: #f8f8f8; border-radius: 8px; } .terms_version_select { flex: 1; padding: 10px 15px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; color: #333; background-color: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 9L1 4h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; padding-right: 40px; cursor: pointer; } .terms_version_select:focus { outline: none; border-color: var(--primary-color); } .terms_apply_btn { padding: 10px 30px; background-color: var(--primary-color); color: #fff; border: none; border-radius: 6px; font-size: 1rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s; } .terms_apply_btn:hover { background-color: var(--primary-dark-color); } .terms_apply_btn:active { transform: scale(0.98); } /* 취소된 품목 스타일 */ .cancelled-item { opacity: 0.6; position: relative; } .cancelled-item .orderSummary, .cancelled-item .orderSummary * { text-decoration: line-through; color: #999 !important; } .cancelled-item a { pointer-events: none; cursor: default !important; text-decoration: line-through; } .cancelled-item button { pointer-events: none; cursor: default !important; opacity: 0.6; } .cancelled-item img { opacity: 0.4; filter: grayscale(100%); } .cancelled-item .orderState button { text-decoration: none; } /* 1. 표의 전체적인 구조를 잡습니다 */ .ck-table-resized { width: 100% !important; border-collapse: collapse; /* 선이 겹치는 부분을 하나로 합쳐줍니다 */ margin: 20px 0; } /* 2. 각 셀(td)에 테두리와 여백을 줍니다 */ .ck-table-resized td { border: 1px solid #d1d1d1; /* 테두리 색상 */ padding: 10px 15px; /* 안쪽 여백 */ text-align: left; font-size: 14px; background-color: #fff; } /* 3. (선택사항) 첫 번째 열에 배경색을 넣어 강조하고 싶을 때 */ .ck-table-resized tr td:nth-child(odd) { background-color: #f8f9fa; font-weight: bold; } /* 모바일: tbody에 table-caption을 주면 표 그리드가 깨져 4열로 보이거나 레이아웃이 망가짐 — 제거함. 2열 전환은 productDetail.js normalizeExContentsTableForMobile */ /* 찜 목록 */ .wish_container { padding: 20px; max-width: 1200px; margin: 0 auto; } .wish_header { margin-bottom: 30px; } .wish_header h2 { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .wish_count { font-size: 14px; color: #666; } .wish_controls { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px; } .select_all_area { display: flex; align-items: center; gap: 10px; } .select_all_area input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; } .btn_delete_selected { padding: 8px 20px; background-color: #fff; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; } .btn_delete_selected:hover { background-color: #f44336; color: white; border-color: #f44336; } .wish_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; } .wish_item { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; transition: box-shadow 0.3s; position: relative; } .wish_item:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .wish_item_checkbox { position: absolute; top: 10px; left: 10px; z-index: 2; width: 20px; height: 20px; cursor: pointer; } .wish_item_link { display: block; text-decoration: none; color: inherit; } .wish_item_image { position: relative; padding-top: 100%; background-color: #f5f5f5; overflow: hidden; } .wish_item_image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: contain; } .wish_item_image .item_cart { display: none; position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; border: none; cursor: pointer; opacity: 0.4; transition: opacity 0.3s, background-color 0.3s; border-radius: 50%; background-color: #000; background-image: url(../images/common/icon_shopping_cart_white.png); background-position: 49% 52%; background-size: 30px 30px; background-repeat: no-repeat; z-index: 3; } .wish_item_link:hover .wish_item_image .item_cart { display: block; } .wish_item_image .item_cart:hover { opacity: 0.8; } .wish_item_info { padding: 15px; } .wish_item_type { display: flex; gap: 5px; margin-bottom: 8px; } .wish_item_type > .icon_type { display: inline-block; padding: 3px 8px; font-size: 11px; border-radius: 3px; font-weight: bold; } .wish_item_type > .typeToday { background-color: #ff5722; color: white; } .wish_item_type > .typeOrder { background-color: #2196F3; color: white; } .wish_item_type > .typeSale { background-color: #f44336; color: white; } .wish_item_company { font-size: 12px; color: #666; margin-bottom: 5px; } .wish_item_name { font-size: 14px; font-weight: 500; margin-bottom: 10px; line-height: 1.4; height: 40px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wish_item_price { display: flex; flex-direction: column; gap: 5px; } .price_original { font-size: 13px; color: #999; text-decoration: line-through; } .price_final { font-size: 18px; font-weight: bold; color: #f44336; } .price_final span { font-size: 14px; font-weight: normal; } .wish_empty { text-align: center; padding: 80px 20px; } .wish_empty_icon { font-size: 60px; color: #ddd; margin-bottom: 20px; } .wish_empty_text { font-size: 16px; color: #666; margin-bottom: 30px; } .btn_go_shopping { display: inline-block; padding: 12px 30px; background-color: #ff5722; color: white; text-decoration: none; border-radius: 4px; font-size: 16px; } .btn_go_shopping:hover { background-color: #f4511e; } @media (max-width: 768px) { .wish_list { grid-template-columns: repeat(2, 1fr); gap: 15px; } .wish_item_name { font-size: 13px; } .price_final { font-size: 16px; } } /* intro.html */ .intro_container { max-width: 1200px; margin: 0 auto; padding: 40px 20px 60px; } .intro_hero { text-align: center; padding: 50px 20px 60px; margin-bottom: 50px; background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%); border-radius: 12px; } .intro_hero_title { font-size: 2.25rem; font-weight: 800; color: var(--primary-dark-color, #1a1a1a); margin-bottom: 16px; letter-spacing: -0.02em; } .intro_hero_sub { font-size: 1.25rem; color: #555; line-height: 1.6; max-width: 560px; margin: 0 auto; } .intro_section { margin-bottom: 50px; } .intro_section_title { font-size: 1.5rem; font-weight: 700; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--primary-dark-color, #1a1a1a); color: var(--primary-dark-color, #1a1a1a); } .intro_section_content { line-height: 1.8; color: #333; margin-bottom: 20px; } .intro_section_content p { margin-bottom: 14px; } .intro_feature_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 30px; } .intro_feature_item { padding: 28px 24px; background: #fff; border: 1px solid #eee; border-radius: 10px; text-align: center; transition: box-shadow 0.2s, border-color 0.2s; } .intro_feature_item:hover { border-color: var(--primary-color, #333); box-shadow: 0 4px 16px rgba(0,0,0,0.06); } .intro_feature_icon { font-size: 2rem; margin-bottom: 12px; line-height: 1; } .intro_feature_title { font-size: 1.1rem; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; } .intro_feature_desc { font-size: 0.95rem; color: #555; line-height: 1.5; } .intro_cta { text-align: center; margin-top: 56px; padding: 48px 20px; background: #f8f8f8; border-radius: 12px; } .intro_cta_title { font-size: 1.35rem; font-weight: 700; margin-bottom: 24px; color: #1a1a1a; } .intro_cta .blitBtn { padding: 14px 40px; font-size: 1.1rem; text-decoration: none; display: inline-block; } @media (max-width: 768px) { .intro_hero_title { font-size: 1.75rem; } .intro_hero_sub { font-size: 1.05rem; } .intro_feature_list { grid-template-columns: 1fr; } } /* 고객센터 레이아웃 - bb-bbu 노랑 계열 */ .notice-page .content { display: flex; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 30px 20px; } .notice-page .cs-sidebar { flex: 0 0 220px; } .notice-page .cs-sidebar h2 { font-size: 1.5rem; font-weight: bold; margin-bottom: 24px; color: var(--primary-dark-color, #333); border-left: 4px solid var(--primary-color); padding-left: 12px; } .notice-page .cs-sidebar ul { list-style: none; padding: 0; margin: 0; } .notice-page .cs-sidebar li { margin-bottom: 4px; } .notice-page .cs-sidebar a { display: block; padding: 12px 16px; text-decoration: none; color: #555; border-radius: 4px; } .notice-page .cs-sidebar a:hover { background: #fffbf0; color: var(--primary-dark-color); } .notice-page .cs-sidebar a.on { background: linear-gradient(90deg, rgba(234, 201, 45, 0.2) 0%, rgba(245, 176, 23, 0.15) 100%); color: var(--primary-dark-color); font-weight: 600; border-left: 3px solid var(--primary-color); padding-left: 13px; } .notice-page .cs-main { flex: 1; min-width: 0; } .notice-page .cs-section { margin-bottom: 40px; } .notice-page .cs-section h3 { font-size: 1.25rem; font-weight: bold; margin-bottom: 16px; color: var(--primary-dark-color, #333); padding-bottom: 8px; border-bottom: 2px solid var(--primary-color); } .notice-page .faq-search-wrap { position: relative; margin-bottom: 16px; } .notice-page .faq-search-wrap input { width: 100%; padding: 14px 48px 14px 16px; border: 1px solid #e8e0c8; border-radius: 6px; font-size: 1rem; } .notice-page .faq-search-wrap input:focus { border-color: var(--primary-color); outline: none; } .notice-page .faq-search-wrap input::placeholder { color: #999; } .notice-page .faq-filter { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; color: #666; } .notice-page .faq-filter a { color: #666; text-decoration: none; } .notice-page .faq-filter a:hover { color: var(--primary-dark-color); } .notice-page .faq-filter span { color: #ddd; } .notice-page .notice-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; } .notice-page .notice-head h3 { margin: 0; } .notice-page .notice-head .total { font-size: 0.95rem; color: #666; } .notice-page .notice-toolbar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; } .notice-page .notice-toolbar select { padding: 8px 12px; border: 1px solid #e8e0c8; border-radius: 4px; } .notice-page .notice-toolbar input[type="text"] { padding: 8px 12px; border: 1px solid #e8e0c8; border-radius: 4px; flex: 1; min-width: 120px; } .notice-page .notice-toolbar .btn-search { padding: 8px 20px; background: var(--primary-dark-color); color: #333; border: none; border-radius: 4px; cursor: pointer; font-size: 0.95rem; font-weight: 600; } .notice-page .notice-toolbar .btn-search:hover { background: var(--primary-color); color: #000; } .notice-page .notice-table { width: 100%; border-collapse: collapse; border-top: 3px solid var(--primary-dark-color); } .notice-page .notice-table th { padding: 12px 10px; text-align: left; font-weight: 600; color: #333; border-bottom: 1px solid #e8e0c8; background: #fffbf0; } .notice-page .notice-table td { padding: 14px 10px; border-bottom: 1px solid #f0ebe0; } .notice-page .notice-table tbody tr:hover { background: #fffdf5; } .notice-page .notice-table .col-no { width: 60px; text-align: center; } .notice-page .notice-table .col-type { width: 100px; } .notice-page .notice-table .col-date { width: 110px; color: #666; font-size: 0.9rem; } .notice-page .notice-table a { color: #333; text-decoration: none; } .notice-page .notice-table a:hover { text-decoration: underline; color: var(--primary-dark-color); } .notice-page .notice-table .col-empty { text-align: center; padding: 40px 20px; color: #666; } .notice-page .notice-table tbody tr.notice-empty:hover { background: transparent; } .notice-page .notice-pagination { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 24px; flex-wrap: wrap; } .notice-page .notice-pagination .btn-page { padding: 8px 16px; border: 1px solid #e8e0c8; background: #fff; border-radius: 4px; cursor: pointer; } .notice-page .notice-pagination .btn-page:hover:not(:disabled) { background: #fffbf0; border-color: var(--primary-color); color: var(--primary-dark-color); } .notice-page .notice-pagination .btn-page:disabled { opacity: 0.5; cursor: not-allowed; } .notice-page .notice-pagination .btn-num { min-width: 36px; padding: 8px; border: 1px solid #e8e0c8; background: #fff; border-radius: 4px; cursor: pointer; } .notice-page .notice-pagination .btn-num:hover { background: #fffbf0; border-color: var(--primary-color); color: var(--primary-dark-color); } .notice-page .notice-pagination .btn-num.on { background: var(--primary-color); color: #333; border-color: var(--primary-dark-color); font-weight: 600; } .notice-page .tag-notice { display: inline-block; padding: 2px 8px; font-size: 0.8rem; border-radius: 4px; background: rgba(234, 201, 45, 0.25); color: var(--primary-dark-color); border: 1px solid var(--primary-color); } @media (max-width: 768px) { .notice-page .content { flex-direction: column; } .notice-page .cs-sidebar { flex: none; } } /* 고객센터 - 공지사항 상세 */ .notice-detail .detail-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 2px solid var(--primary-color, #e0e0e0); } .notice-detail .detail-title { font-size: 1.35rem; font-weight: bold; color: #333; flex: 1; min-width: 0; } .notice-detail .detail-title .tag-new { display: inline-block; margin-left: 8px; padding: 2px 8px; font-size: 0.75rem; font-weight: 600; color: #c62828; border: 1px solid #c62828; border-radius: 4px; vertical-align: middle; } .notice-detail .detail-date { font-size: 0.95rem; color: #666; white-space: nowrap; } .notice-detail .detail-body { min-height: 200px; line-height: 1.7; color: #333; } .notice-detail .detail-body p { margin-bottom: 12px; } .notice-detail .detail-body h4, .notice-detail .detail-body strong { color: var(--primary-dark-color, #333); } .notice-detail .detail-body a { color: var(--primary-dark-color); text-decoration: underline; } .notice-detail .btn-list-wrap { text-align: center; margin-top: 32px; } .notice-detail .btn-list { display: inline-block; padding: 12px 32px; background: var(--primary-dark-color); color: #333; font-weight: 600; border: none; border-radius: 6px; text-decoration: none; cursor: pointer; } .notice-detail .btn-list:hover { background: var(--primary-color); color: #000; } .notice-detail .detail-nav { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 20px; border-top: 1px solid #eee; font-size: 0.95rem; } .notice-detail .detail-nav a { color: #555; text-decoration: none; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notice-detail .detail-nav a:hover { color: var(--primary-dark-color); } .notice-detail .detail-nav .prev::before { content: '이전글 '; color: #999; } .notice-detail .detail-nav .next::before { content: '다음글 '; color: #999; } .notice-detail .detail-empty { text-align: center; padding: 60px 20px; color: #666; } /* 고객센터 - 1:1 문의 */ .inquiry-page .cs-section h3 { margin-bottom: 8px; } .inquiry-page .inquiry-desc { font-size: 0.95rem; color: #666; margin-bottom: 24px; } .inquiry-page .inquiry-desc a { color: var(--primary-dark-color); text-decoration: underline; } .inquiry-page .inquiry-form .form-row { display: flex; align-items: flex-start; margin-bottom: 20px; gap: 16px; } .inquiry-page .inquiry-form .form-row label { flex: 0 0 120px; padding-top: 10px; font-weight: 500; color: #333; } .inquiry-page .inquiry-form .form-row .form-controls { flex: 1; min-width: 0; } .inquiry-page .inquiry-form input[type="text"], .inquiry-page .inquiry-form input[type="email"], .inquiry-page .inquiry-form select { width: 100%; max-width: 400px; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 4px; } .inquiry-page .inquiry-form textarea { width: 100%; min-height: 180px; padding: 12px; border: 1px solid #e0e0e0; border-radius: 4px; resize: vertical; } .inquiry-page .inquiry-form .hint { font-size: 0.85rem; color: #999; margin-top: 6px; } .inquiry-page .inquiry-form .btn-group { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inquiry-page .inquiry-form .btn-group .mfBtn { padding: 8px 16px; } .inquiry-page .inquiry-form .order-input-wrap { display: flex; gap: 8px; align-items: center; max-width: 400px; } .inquiry-page .inquiry-form .order-input-wrap input { flex: 1; min-width: 0; } .inquiry-page .inquiry-form .phone-wrap { display: flex; gap: 8px; align-items: center; max-width: 400px; } .inquiry-page .inquiry-form .phone-wrap select { max-width: 100px; } .inquiry-page .inquiry-form .phone-wrap input { flex: 1; min-width: 0; } .inquiry-page .inquiry-form .inline-check { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; } .inquiry-page .inquiry-form .inline-check input[type="checkbox"] { width: auto; } .inquiry-page .inquiry-form .file-wrap { display: flex; gap: 8px; flex-wrap: wrap; } .inquiry-page .inquiry-form .file-wrap input[type="file"] { padding: 8px 0; } .inquiry-page .inquiry-form .submit-wrap { margin-top: 32px; padding-top: 24px; border-top: 1px solid #eee; } .inquiry-page .inquiry-form .submit-wrap .mfBtn.dark { padding: 12px 32px; } @media (max-width: 768px) { .inquiry-page .inquiry-form .form-row { flex-direction: column; align-items: stretch; } .inquiry-page .inquiry-form .form-row label { flex: none; } } /* 고객센터 - 1:1 문의 상세 */ /* 마이페이지 - 1:1 문의 상세 (캡처 화면: 라벨 왼쪽 / 값 오른쪽 폼형 레이아웃) */ .mypage main.inquiry-detail-main { max-width: 100%; } .inquiry-detail-main__inner { max-width: 900px; margin-left: auto; margin-right: auto; } .inquiry-detail-body { padding: 24px 20px; } .inquiry-detail-form { border-top: 1px solid var(--bd-lightgray, #eee); } .inquiry-detail-row { display: flex; align-items: flex-start; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--bd-lightgray, #f0f0f0); } .inquiry-detail-row:first-child { padding-top: 20px; } .inquiry-detail-label { flex: 0 0 120px; font-size: 1rem; font-weight: 600; color: var(--text-color, #333); padding-top: 2px; line-height: 1.5; } .inquiry-detail-value { flex: 1; min-width: 0; font-size: 1rem; line-height: 1.6; color: var(--text-color, #333); padding: 10px 12px; background: #fff; border-radius: 4px; } .inquiry-detail-value:empty::before { content: '-'; color: var(--text-gray, #999); } .inquiry-detail-row-contents .inquiry-detail-value { min-height: 160px; white-space: pre-wrap; word-break: break-word; } .inquiry-detail-contents { white-space: pre-wrap; word-break: break-word; } .inquiry-detail-row-contents .inquiry-detail-value { padding: 14px 12px; } .inquiry-detail-files { display: flex; flex-wrap: wrap; gap: 12px; } .inquiry-detail-files .file-item { border: 1px solid var(--bd-lightgray, #e0e0e0); border-radius: 6px; overflow: hidden; } .inquiry-detail-files .file-item img { display: block; max-width: 260px; max-height: 260px; object-fit: contain; } .inquiry-detail-files .file-item a.download-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--bg-lightgray, #f8f8f8); text-decoration: none; color: inherit; font-size: 0.9375rem; border-radius: 4px; } .inquiry-detail-files .file-item a.download-link:hover { background: #eee; color: var(--primary-color); } .inquiry-detail-reply-row .inquiry-detail-value { background: var(--bg-lightgray, #f8f9fa); border-color: #e8e8e8; } .inquiry-detail-reply-wrap { display: block; } .inquiry-detail-reply-body { white-space: pre-wrap; word-break: break-word; margin-bottom: 8px; } .inquiry-detail-reply-dt { font-size: 0.875rem; color: var(--text-gray, #666); } .inquiry-detail-actions { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--bd-lightgray, #eee); } .inquiry-detail-actions .mfBtn.dark { padding: 10px 28px; font-size: 1rem; } @media (max-width: 640px) { .inquiry-detail-row { flex-direction: column; gap: 8px; padding: 14px 0; } .inquiry-detail-label { flex: none; padding-top: 0; } } /* sign.html */ .signupIntro { display: flex; align-items: center; justify-content: center; padding: 60px 20px 80px; } .signupHero { text-align: center; max-width: 460px; margin: 0 auto; } .signupTitle { font-size: 1.75rem; line-height: 1.4; font-weight: 700; margin-bottom: 32px; letter-spacing: -0.02em; } .signupMainBtn { display: inline-block; width: 100%; max-width: 420px; padding: 16px 0; font-size: 1.1rem; border-radius: 999px; } .signupDivider { position: relative; margin: 36px 0 28px; font-size: 0.875rem; color: #999; } .signupDivider::before, .signupDivider::after { content: ""; position: absolute; top: 50%; width: 32%; height: 1px; background-color: #eee; } .signupDivider::before { left: 0; } .signupDivider::after { right: 0; } .signupDivider > span { display: inline-block; padding: 0 12px; background-color: #fff; } .snsSignupBtns { display: flex; justify-content: center; gap: 24px; } .snsBtn { width: 52px; height: 52px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background-color: #f5f5f5; } .snsBtn img { width: 28px; height: 28px; display: block; } .snsBtnNaver { background-color: #03C75A; } .snsBtnKakao { background-color: #FEE500; } .snsBtnNaver img { width: 24px; height: 24px; } .snsBtnKakao img { width: 26px; height: 26px; } @media (max-width: 480px) { .signupIntro { padding-top: 40px; } .signupTitle { font-size: 1.5rem; } } /* 기본은 숨김 */ #splash-screen { display: none; } /* TWA 모드일 때만 보이게 설정 (!important로 우선순위 확보) */ html.is-twa #splash-screen { display: flex !important; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #ffffff; z-index: 99999; justify-content: center; align-items: center; } #splash-screen img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* 구매내역 목록 반응형: PC는 테이블형, 모바일은 카드형 */ #purchaseListSection .purchaseList_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } #purchaseListSection ul.bbsList.tyBasic { min-width: 640px; border-top: 1px solid var(--text-light, #ddd); } #purchaseListSection .bbsList_header, #purchaseListSection .bbsList_item.simple { display: flex; align-items: center; flex-wrap: nowrap; border-bottom: 1px solid var(--text-light, #eee); } #purchaseListSection .bbsList_header { padding: 12px 8px; font-weight: 700; font-size: 0.9rem; background: #f8f8f8; } #purchaseListSection .bbsList_item.simple { padding: 12px 8px; font-size: 0.85rem; } #purchaseListSection .bbsList_header > span, #purchaseListSection .bbsList_item.simple > span, #purchaseListSection .bbsList_item.simple > a { flex-shrink: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; } #purchaseListSection .forDate { min-width: 7rem; text-align: center; } #purchaseListSection .forType { min-width: 5rem; text-align: center; } #purchaseListSection .forValue { min-width: 5.5rem; text-align: center; } #purchaseListSection .forMethod { min-width: 6rem; text-align: center; } #purchaseListSection .forMemo { flex: 1; min-width: 4rem; text-align: center; } #purchaseListSection .bbsList_item.simple .forMemo { text-align: center; } @media (max-width: 768px) { #purchaseListSection .purchaseList_wrap { overflow-x: visible; } #purchaseListSection ul.bbsList.tyBasic { min-width: 0; } #purchaseListSection .bbsList_header { display: none; } #purchaseListSection .bbsList_item.simple { display: block; padding: 14px 12px; border-bottom: 1px solid var(--text-light, #eee); } /* 라벨·값 한 줄: 라벨 고정 폭, 값 영역만 늘어나서 정렬 맞춤 */ #purchaseListSection .bbsList_item.simple > span, #purchaseListSection .bbsList_item.simple > a { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border: none; min-width: 0; text-decoration: none; color: inherit; } #purchaseListSection .bbsList_item.simple > span::before, #purchaseListSection .bbsList_item.simple > a.forMemo::before { flex-shrink: 0; width: 5em; /* 5em에서 4.5em 정도로 살짝 줄임 */ font-weight: 600; color: #555; text-align: left; } #purchaseListSection .bbsList_item.simple .forDate::before { content: "날짜 "; } #purchaseListSection .bbsList_item.simple .forType::before { content: "상태 "; } #purchaseListSection .bbsList_item.simple span.forValue:nth-of-type(3)::before { content: "주문금액 "; } #purchaseListSection .bbsList_item.simple span.forValue:nth-of-type(4)::before { content: "환불금액 "; } #purchaseListSection .bbsList_item.simple .forMethod::before { content: "결제방법 "; } #purchaseListSection .bbsList_item.simple .forMemo::before { content: "비고 "; } /* 값 영역: 한 줄로만 표시, 길면 ... 말줄임, 라벨 오른쪽 정렬 유지 */ #purchaseListSection .bbsList_item.simple .forDate .purchase_val, #purchaseListSection .bbsList_item.simple .forType .purchase_val, #purchaseListSection .bbsList_item.simple .forValue .purchase_val, #purchaseListSection .bbsList_item.simple .forMethod .purchase_val { min-width: fit-content; /* 내용물만큼 너비를 확보 */ overflow: visible; /* 넘쳐도 보여줌 */ white-space: nowrap; /* 줄바꿈은 여전히 안 함 */ } #purchaseListSection .bbsList_item.simple .forMemo .purchase_val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* 포인트 사용내역 반응형: PC는 테이블형, 모바일은 카드형 (구매내역과 동일) */ #dataSection .pointList_wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } #dataSection ul.bbsList.tyBasic { min-width: 560px; border-top: 1px solid var(--text-light, #ddd); } #dataSection .bbsList_header, #dataSection .bbsList_item.simple { display: flex; align-items: center; flex-wrap: nowrap; border-bottom: 1px solid var(--text-light, #eee); } #dataSection .bbsList_header { padding: 12px 8px; font-weight: 700; font-size: 0.9rem; background: #f8f8f8; } #dataSection .bbsList_item.simple { padding: 12px 8px; font-size: 0.85rem; } #dataSection .bbsList_header > span, #dataSection .bbsList_item.simple > span, #dataSection .bbsList_item.simple > h5 { flex-shrink: 0; padding: 0 6px; overflow: hidden; text-overflow: ellipsis; } #dataSection .forDate { min-width: 7rem; text-align: center; } #dataSection .forTitle { flex: 1; min-width: 4rem; text-align: left; } #dataSection .forType { min-width: 4rem; text-align: center; } #dataSection .forValue { min-width: 5rem; text-align: right; } @media (max-width: 768px) { #dataSection .pointList_wrap { overflow-x: visible; } #dataSection ul.bbsList.tyBasic { min-width: 0; } #dataSection .bbsList_header { display: none; } #dataSection .bbsList_item.simple { display: block; padding: 14px 12px; border-bottom: 1px solid var(--text-light, #eee); } #dataSection .bbsList_item.simple > span, #dataSection .bbsList_item.simple > h5 { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; border: none; min-width: 0; margin: 0; font-size: inherit; font-weight: inherit; } #dataSection .bbsList_item.simple > span::before, #dataSection .bbsList_item.simple > h5.forTitle::before { flex-shrink: 0; font-weight: 600; color: #555; text-align: left; } #dataSection .bbsList_item.simple .forDate::before { content: "날짜 "; } #dataSection .bbsList_item.simple .forTitle::before { content: "내용 "; } #dataSection .bbsList_item.simple .forType::before { content: "상태 "; } #dataSection .bbsList_item.simple .forValue::before { content: "금액 "; } #dataSection .bbsList_item.simple .purchase_val { min-width: 0; } #dataSection .bbsList_item.simple .forDate .purchase_val, #dataSection .bbsList_item.simple .forTitle .purchase_val, #dataSection .bbsList_item.simple .forType .purchase_val, #dataSection .bbsList_item.simple .forValue .purchase_val { overflow: visible; white-space: normal; word-break: keep-all; } #dataSection .bbsList_item.simple .forTitle .purchase_val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #dataSection .bbsList .forTitle { width: 100%; } } /*상품상세페이지 탭 콘텐츠 공통: 상품설명·구매정보·배송정보 - 사이트 디자인 통일 */ #item_detail [exContents], #item_info [purContents], #item_delivery [delContents] { font-size: 1rem; line-height: 1.6; color: #333; } #item_detail [exContents] table, #item_info [purContents] table, #item_delivery [delContents] table { width: 100%; max-width: 100%; border-collapse: collapse; margin: 1rem 0; background: #fff; border: 1px solid var(--light-gray, #e0e0e0); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.04); } #item_detail [exContents] table th, #item_detail [exContents] table td, #item_info [purContents] table th, #item_info [purContents] table td, #item_delivery [delContents] table th, #item_delivery [delContents] table td { padding: 12px 16px; border: 1px solid var(--light-gray, #e8e8e8); text-align: left; vertical-align: middle; } #item_detail [exContents] table th, #item_info [purContents] table th, #item_delivery [delContents] table th { background: #f8f8f8; font-weight: 600; color: #333; width: 38%; } #item_detail [exContents] table td, #item_info [purContents] table td, #item_delivery [delContents] table td { background: #fff; color: #555; } #item_detail [exContents] table caption, #item_detail [exContents] strong:first-child, #item_info [purContents] table caption, #item_info [purContents] strong:first-child, #item_delivery [delContents] table caption, #item_delivery [delContents] strong:first-child { display: block; font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; color: #000; } #item_detail [exContents] ul, #item_detail [exContents] ol, #item_info [purContents] ul, #item_info [purContents] ol, #item_delivery [delContents] ul, #item_delivery [delContents] ol { margin: 0.75rem 0; padding-left: 1.25rem; } #item_detail [exContents] li, #item_info [purContents] li, #item_delivery [delContents] li { margin: 0.35rem 0; line-height: 1.5; } #item_detail [exContents] li p, #item_info [purContents] li p, #item_delivery [delContents] li p { display: inline; margin: 0; } /* 안내 리스트 박스 스타일 (상품설명·배송정보 공통) */ #item_detail [exContents] ul.exContents-notice, #item_delivery [delContents] ul.tab-notice { margin: 1rem 0; padding: 1rem 1.25rem; padding-left: 1.5rem; background: #f8f9fa; border: 1px solid var(--light-gray, #e8e8e8); border-radius: 4px; list-style: disc; } #item_detail [exContents] ul.exContents-notice li, #item_delivery [delContents] ul.tab-notice li { margin: 0.5rem 0; line-height: 1.55; } #item_detail [exContents] .exContents-highlight, #item_delivery [delContents] .tab-highlight { color: #c62828; font-weight: 600; display: inline; } #item_detail [exContents] ul.exContents-notice li.exContents-alert, #item_delivery [delContents] ul.tab-notice li.tab-alert { color: #c62828; } /* 상품설명 전용: 더보기 오버레이·버튼 */ #item_detail [exContents] .exContents-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1)); pointer-events: none; } #item_detail .exContents-toggle-btn { display: block; margin: 15px auto 0; padding: 10px 30px; background-color: #333; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.3s, color 0.3s; } #item_detail .exContents-toggle-btn:hover { background-color: #000; } /* 비밀번호 찾기 */ .pw-subtitle{ text-align: center; margin: 1.25rem 0 1.5rem; font-size: 1rem; font-weight: 500; color: #111; } .pw-input-wrap{ max-width: 560px; margin: 0 auto; } .pw-input-row{ display: flex; align-items: center; gap: 1.25rem; padding: 0.65rem 0; } .pw-label{ width: 160px; text-align: left; font-size: 0.95rem; color: #222; font-weight: 600; } .pw-input{ flex: 1; height: 44px; border: 1px solid #E5E7EB; border-radius: 0; padding: 0 1rem; font-size: 1rem; outline: none; } .pw-input:focus{ border-color: #0B5D3D; } .pw-cert-wrap{ margin: 2.2rem 0 1rem; background: #F6F7F9; padding: 2rem 0; } .pw-cert-box{ background: #fff; border: 1px solid #E5E7EB; width: 520px; max-width: calc(100% - 2rem); margin: 0 auto; padding: 1.25rem 0; text-align: center; } .certifyBox_btn{ align-items: center; justify-content: center; min-width: 180px; text-decoration: none; color: var(--primary-dark-color); font-weight: 700; } .pw-phone-icon{ margin-right: 0.6rem; display: inline-flex; align-items: center; justify-content: center; color: var(--primary-dark-color); } .pw-guide{ text-align: center; color: #111; font-size: 0.95rem; line-height: 1.6; margin-top: 0.5rem; font-weight: 500; } .pw-footer-links{ display: flex; justify-content: center; align-items: center; gap: 0.8rem; padding: 1.2rem 0 0; font-size: 0.95rem; color: #111; } .pw-footer-links a{ color: var(--primary-dark-color); text-decoration: none; font-weight: 600; } .pw-footer-links a:hover{ text-decoration: underline; } .pw-footer-links .divider{ color: #D1D5DB; } @media (max-width: 768px) { .slider-container { min-height: 200px; /* 모바일 기준 */ } }