/*--- RESET/NORMALIZE ---*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* 인터넷익스플로러 */ user-select: none; margin: 0;padding: 0;border: 0;font-size: 100%;vertical-align: baseline;} /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ol, ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} table {border-collapse: collapse;border-spacing: 0;} body, h1, h2, h3, h4, h5, h6, figure, pre, dl, dd, blockquote, input[type="radio"], input[type="checkbox"] {margin:0} legend {padding:0} fieldset, ul, ol {padding:0;margin:0} ul, ol {list-style:none} body {line-height:1} main, figure, figcaption {display:block} /*---
for IE 11 ---*/ img {max-width:100%;height:auto; display: inline-block;} a {text-decoration:none} a:visited { color: #000; } fieldset {border:0} input, textarea, select, button { max-width:100%;font-family:inherit;font-size:inherit;color:inherit} label {display:table} input { -webkit-appearance: none; } /* select { -webkit-appearance: none; } */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], {-webkit-appearance:none;outline: 0;} /*--- for Safari (add/remove types as needed) ---*/ button {line-height:inherit; outline: 0; border:0; padding: 0; background: none;} button:focus { outline: 0; border:0; padding: 0; } /* select { outline: 0; border:0; } */ button::-moz-focus-inner {border:0; } /*--- for Firefox ---*/ html {-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-size:1.25em; } /*--- optional base font size ---*/ * { box-sizing: border-box; vertical-align: top; } html, body { min-height: 100%; height: 100%; font-family: 'Pretendard', sans-serif; background-color: #fff; } /* clears the ‘X’ from Internet Explorer */ input[type=search]::-ms-clear { display: none; width : 0; height: 0; } input[type=search]::-ms-reveal { display: none; width : 0; height: 0; } /* clears the ‘X’ from Chrome */ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { display: none; } input[type="date"]::-webkit-datetime-edit { } input[type="date"]::-webkit-datetime-edit-fields-wrapper { } input[type="date"]::-webkit-datetime-edit-text { } input[type="date"]::-webkit-datetime-edit-month-field { } input[type="date"]::-webkit-datetime-edit-day-field { } input[type="date"]::-webkit-datetime-edit-year-field { } input[type="date"]::-webkit-inner-spin-button { display: none; } input[type="date"]::-webkit-calendar-picker-indicator { padding: 0; } *, *::before, *::after { font-smoothing: antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fixed {position: fixed; overflow: hidden; width: 100%; } .app { overflow-y: scroll; -webkit-overflow-scrolling: touch; } .font_noto {font-family: 'Pretendard', sans-serif;} .font_ne {font-family: 'Pretendard', sans-serif;} button.underline { padding: 0; border: 0; background: unset; border-bottom: 1px solid #333; font-family: 'Pretendard'; font-size: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: -0.5px;text-align: left;color: #333333; } span.icon { display: inline-block; width: 18px; height: 18px; overflow: hidden; } span.icon img { vertical-align: top; width: 100%; height: auto; } /* reset// */ .wd50 { width: 50%; } button:disabled { opacity: .4; } /* 공통사용 부분 // */ :root { --main-color-green: #4fc7fe; --main-color-white: #fff; --main-color-black: #000; } textarea:focus { outline: none; border: 1px solid #4fc7fe; } textarea { caret-color: #ff5039; } body.black { background-color: #000; } .grdient_m_back { background-color: var(--main-color-green); color: #fff; } .grdient_g_back { background-image: linear-gradient(101deg, #29b0ff 0%, #42ffb0 100%); color: #fff; } .grdient_r_back { background-color: #4fc7fe; color: #fff; } .solid_w_back { background-color: #fff !important; color: #d900fd; } .solid_b_back { background-color: #000; color: #fff; } input:-internal-autofill-selected { background-color: #fff; } .back_white { background-color: hwb(0 100% 0%) !important; } .display { display: block !important; } .display_none { display: none !important; } .block { display: block; } .flex { display: flex; } .inlineblock { display: inline-block; } .fixed { position: fixed; z-index: 1000; } .red { color: #ff4444 !important; } .left { text-align: left !important; } .right { text-align: right !important; } .mt0 { margin-top: 0 !important; } .mt10 { margin-top: 10px !important;; } .mt20 { margin-top: 20px !important;; } .mt30 { margin-top: 30px !important;; } .mt40 { margin-top: 40px !important;; } .mt50 { margin-top: 50px !important;; } .mt60 { margin-top: 60px !important;; } .mt70 { margin-top: 70px !important;; } .mt80 { margin-top: 80px !important;; } .mt90 { margin-top: 90px !important;; } .mt100 { margin-top: 100px !important;; } .mb10 { margin-bottom: 10px !important;; } .mb20 { margin-bottom: 20px !important;; } .mb30 { margin-bottom: 30px !important;; } .mb40 { margin-bottom: 40px !important;; } .mb50 { margin-bottom: 50px !important;; } .mb60 { margin-bottom: 60px !important;; } .mb70 { margin-bottom: 70px !important;; } .mb80 { margin-bottom: 80px !important;; } .mb90 { margin-bottom: 90px !important;; } .mb100 { margin-bottom: 100px !important;; } .ml10 { margin-left: 10px !important;; } .ml20 { margin-left: 20px !important;; } .ml30 { margin-left: 30px !important;; } .ml40 { margin-left: 40px !important;; } .ml50 { margin-left: 50px !important;; } .mr10 { margin-right: 10px !important;; } .mr20 { margin-right: 20px !important;; } .mr30 { margin-right: 30px !important;; } .mr40 { margin-right: 40px !important;; } .mr50 { margin-right: 50px !important;; } .pt10 { padding-top: 10px !important;; } .pt20 { padding-top: 20px !important;; } .pt30 { padding-top: 30px !important;; } .pt40 { padding-top: 40px !important;; } .pt50 { padding-top: 50px !important;; } .pb0 { padding-bottom: 0px !important; } .pb10 { padding-bottom: 10px !important;; } .pb20 { padding-bottom: 20px !important;; } .pb30 { padding-bottom: 30px !important;; } .pb40 { padding-bottom: 40px !important;; } .pb50 { padding-bottom: 50px !important;; } .pl10 { padding-left: 10px !important;; } .pl20 { padding-left: 20px !important;; } .pl30 { padding-left: 30px !important;; } .pl40 { padding-left: 40px !important;; } .pl50 { padding-left: 50px !important;; } .pr10 { padding-right: 10px !important;; } .pr20 { padding-right: 20px !important;; } .pr30 { padding-right: 30px !important;; } .pr40 { padding-right: 40px !important;; } .pr50 { padding-right: 50px !important;; } .pd10 { padding: 10px !important;; } .pd20 { padding: 20px !important;; } .pd30 { padding: 30px !important;; } .pd40 { padding: 40px !important;; } .pd50 { padding: 50px !important;; } .pd60 { padding: 60px !important;; } .pd70 { padding: 70px !important;; } .pd80 { padding: 80px !important;; } .pd90 { padding: 90px !important;; } .pd100 { padding: 100px !important; } input { outline: none; width: 100%; border: 0; caret-color: #ff4c1d; } select { outline: none; width: 100%; border: 0; caret-color: #ff4c1d; } input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, input[type=tel]:focus, select:focus { border: solid 1px #4fc7fe; } input[type=text] { width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } input[type=password] { width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } input[type=email] { width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } input[type=date] { width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } input[type=tel] { width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } input::placeholder { font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; } input[type='date']::before { content: attr(data-placeholder); width: 100%; } input[type='date']:focus::before, input[type='date']:valid::before { display: none; } .required { color: #ff4c1d; } .app { transition: .3s transform; transform: scale(1, 1); height: 100%; } /* button 정의 */ button.solid_c_back { background-color: #4fc7fe; } @keyframes splash_logo { 0% { transform: translateY(-100%); } 50% { transform: translateY(-100%); } 100% { transform: translateY(-250%); } } @keyframes splash_btn { 0% {opacity: 0;} 50% { opacity: 0; } 100% {opacity: 1;} } .main.app .scroll_case { z-index: 2; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .main.app .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .main.app .scroll_case .main_scroll { pointer-events: auto; position: absolute; top: 81vw; height: 100%; width: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; } .main.app .scroll_case .main_scroll .main_bar { border-top-left-radius: 30px; border-top-right-radius: 30px; height: auto; width: 100%; background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); padding-bottom: 100px; } /* // 공통사용 부분 */ /* 스플래쉬 화면 001_splash.html,002_sign_in_01.html// */ .splash { width: 100%; height: 100%; } .splash .case { width: 100%; height: 100%; background-image: url(/resources/img/bg-splash-01@3x.png); background-size: cover; background-position: center center; background-repeat: no-repeat; } .splash .case .inner { width: 100%; height: 100%; position: relative; } .splash .case .inner .splash_logo { animation-name: splash_logo; animation-duration: 2s; padding: 0 30px; width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-250%); } .splash .case .inner .splash_logo img { } .splash .case .inner .splash_logo .ment { font-size: 24px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .splash .case .inner .splash_btn { opacity: 1; animation-name: splash_btn; animation-duration: 2s; padding: 0 30px; position: absolute; bottom: 134px; width: 100%; } .splash .case .inner .splash_btn button { width: 100%; height: 60px; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;} .splash .case .inner .splash_btn button~button { margin-top: 20px; } .splash .case .inner .splash_btn .signup_btn { color: #00afff;; background-color: var(--main-color-white); } .splash .case .inner .splash_btn .login_btn { background-color: transparent; color: var(--main-color-white); border: 2px solid var(--main-color-white); } /* 움직이는 글자 시작 */ .splash .moving_word { width: calc(100% - 43px); overflow: hidden; position: absolute; } .splash .moving_word.top { top: 10px; left: 13px; } .splash .moving_word.lt { top: 30px; left: 10px; transform: rotate(180deg); transform-origin: center; writing-mode: vertical-rl; width: auto; height: calc(100% - 43px); } .splash .moving_word.rt { top: 13px; right: 10px; writing-mode: vertical-rl; width: auto; height: calc(100% - 43px); } .splash .moving_word.bot { bottom: 10px; right: 13px; transform: rotate(180deg) } .splash .moving_word .moving { white-space: nowrap; font-size: 24px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .splash .moving_word.top .moving { animation: marquee 3.5s linear infinite; } .splash .moving_word.lt .moving { animation: marquee2 7s linear infinite; } .splash .moving_word.rt .moving { animation: marquee3 7s linear infinite; } .splash .moving_word.bot .moving { animation: marquee4 3.5s linear infinite; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes marquee2 { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes marquee3 { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes marquee4 { from { transform: translateX(0); } to { transform: translateX(-100%); } } .splash .center_word { width: calc(100% - 100px); position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); } .splash .center_word .appear { font-size: 9vw; white-space: nowrap; font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff;} .splash .center_word .appear.step_01 { font-weight: 100; animation: appear01 5s linear infinite; } .splash .center_word .appear.step_02 { font-weight: 200; animation: appear02 5s linear infinite; } .splash .center_word .appear.step_03 { font-weight: 300; animation: appear03 5s linear infinite; } .splash .center_word .appear.step_04 { font-weight: 400; animation: appear04 5s linear infinite; } .splash .center_word .appear.step_05 { font-weight: 500; animation: appear05 5s linear infinite; } .splash .center_word .appear.step_06 { font-weight: 600; animation: appear06 5s linear infinite; } .splash .center_word .appear.step_07 { font-weight: 700; animation: appear07 5s linear infinite; } .splash .center_word .appear.step_08 { font-weight: 800; animation: appear08 5s linear infinite; } .splash .center_word .appear.step_09 { font-weight: 900; animation: appear09 5s linear infinite; } @keyframes appear01 { 0% { opacity: 0; } 5% { opacity: 0; } 10% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear02 { 0% { opacity: 0; } 7.5% { opacity: 0; } 10% { opacity: 0; } 15% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear03 { 0% { opacity: 0; } 10% { opacity: 0; } 15% { opacity: 0; } 20% { opacity: 1; } 30% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear04 { 0% { opacity: 0; } 20% { opacity: 0; } 25% { opacity: 1; } 30% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear05 { 0% { opacity: 0; } 25% { opacity: 0; } 30% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear06 { 0% { opacity: 0; } 30% { opacity: 0; } 35% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear07 { 0% { opacity: 0; } 35% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear08 { 0% { opacity: 0; } 40% { opacity: 0; } 45% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } @keyframes appear09 { 0% { opacity: 0; } 45% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 1; } 60% { opacity: 0; } 65% { opacity: 1; } 70% { opacity: 0; } 75% { opacity: 1; } 80% { opacity: 0; } 85% { opacity: 1; } 90% { opacity: 0; } 95% { opacity: 1; } 100% { opacity: 0; } } /* 움직이는 글자 끝 */ /* // 스플래쉬 화면 001_splash.html,002_sign_in_01.html */ input.warning { border-color: #ff4c1d !important; } input.success { border-color: #1a9cff !important; } /* 타이틀 중앙 헤더 */ .header_center { width: 100%; display: flex; justify-content: center; align-items: center; height: 60px; padding: 10px 12px; background-color: transparent; } .header_center .title { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;text-align: center;color: #000; } /* 뒤로가기 있는 헤더 // */ .header_back { top: 0; z-index: 1000; transition: .5s all; position: relative; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 10px 12px; background-color: transparent; } .header_back .back_btn { padding: 0; width: 40px; height: 40px; overflow: hidden; } .header_back .back_btn img { } .header_back.fixed { position: fixed; } .header_back .title.text_bl {color: #000;} .header_back .title { word-break: keep-all; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: center;color: #fff; } .header_back.bk .title { color: #000; display: flex; justify-content: center; align-items: center; column-gap: 2px; } .header_back .title .thin { font-weight: 300; vertical-align: middle; } .header_back .title .nor { display: inline-block; } .header_back .title .sel { display: none; } .header_back .title img { vertical-align: middle; } .header_back .option { column-gap: 6px; padding: 0; min-width: 40px; height: 40px; display: flex; justify-content: end; align-items: center; } .header_back .option > button { padding: 0; width: 40px; height: 40px; overflow: hidden; position: relative; } header .option > button { padding: 0; width: 40px; height: 40px; overflow: hidden; position: relative; } .cart_count { border-radius: 50%; position: absolute; top:0; right: 0; width: 20px; height: 20px; opacity: 0.96; background-color: #ff5e33; display: flex; justify-content: center; align-items: center; font-size: 10px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #fff;} .header_back .option .option_btn { background-image: url(/resources/img/btn-appbar-option-2-bk-1-nor@3x.png); background-repeat: no-repeat; background-size: 40px 40px; background-position: center center; } .header_back .option .option_btn:focus { background-image: url(/resources/img/btn-appbar-option-2-bk-2-sel.png); } .header_back.active { background-color: #fff; transition: .3s all; } .header_back.active .title .nor { display: none;} .header_back.active .title .sel { display: inline-block; } .header_back .dim { display: none; position: fixed; top:60px; left: 0; right: 0; bottom: 0; opacity: 0.4; background-color: #000; z-index: -1; } .header_back .fold_menu { word-break: keep-all; overflow-y: scroll; max-height: 60vh; display: none; position: absolute; top: 60px; left: 0; width: 100%; border-bottom-left-radius: 30px; border-bottom-right-radius: 30px; background-color: #fff; }.header_back .fold_menu .sec { padding: 24px 30px 30px; } .header_back .fold_menu .sec:last-child { padding-bottom: 60px; } .header_back .fold_menu .sec .cate_01 { margin-bottom: 14px; font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #abb4c4; } .header_back .fold_menu .sec .cate_02 { text-align: center; } .header_back .fold_menu .sec .cate_02 > a { display: inline-block; padding: 6px 0 4px; border-bottom: 2px solid #fff; font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .header_back .fold_menu .sec .cate_02~.cate_02 { margin-top: 16px; } .header_back .fold_menu .sec .cate_02.active > a { border-bottom: 2px solid #f44; color: #f44;} .header_back .fold_menu .sec .cate_03 { font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .header_back .fold_menu .sec .cate_03 a { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .header_back .fold_menu .sec .cate_03~.cate_03 { margin-top: 22px; } .header_back .fold_menu .sec .inner_cate { display: none; padding: 30px 0 10px; } /* // 뒤로가기 있는 헤더 */ .header_opt { top: 0; transition: .5s all; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 10px 12px; background-color: #fff; } /* 메인 헤더 시작 2022.11.09 */ .header_main { top: 0; transition: .5s all; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 10px 12px; background-color: transparent; } .header_main button { padding: 0; width: 40px; height: 40px; overflow: hidden; position: relative; } .header_main .title { position: absolute; left: 50%; top:50%; transform: translate( -50%, -50%); } /* 메인 헤더 끝 2022.11.09 */ /* 클로즈버튼이 있는 헤더 시작 */ .header_close { top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 10px 12px; background-color: transparent; } .header_close .title { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;text-align: center;color: #000; } .header_close .close button { padding: 0; width: 40px; height: 40px; overflow: hidden; position: relative; } .header_close button { width: 40px; height: 40px; } /* 클로즈버튼이 있는 헤더 끝 */ /* 푸터 20221118 et03 시작*/ footer.footer { padding-bottom: 120px; background-color: #f4f7fd; } footer.footer .button { padding: 30px 30px 50px; position: relative; } footer.footer .button:after { position: absolute; content: ''; width: calc(100% - 40px); bottom: 0px; height: 1px; left: 20px; background-color: #e1e5ed; } footer.footer .button button { width: 100%; font-size: 16px;padding: 22px 30px;border-radius: 30px;background-color: #4fc7fe;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } footer.footer .company_info { } footer.footer .company_info .fold_button { width: 100%;padding: 16px 0 10px; display: flex; justify-content: center; } footer.footer .company_info .fold_button button { background-image: url(/resources/img/btn-select-03-open-1-nor@3x.png); height: 26px; display: flex; justify-content: center; align-items: center; font-family: Pretendard;font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #abb4c4;background-repeat: no-repeat;background-size: 26px 26px;background-position: right center;padding-right: 26px; } footer.footer .company_info .fold_button button.active { background-image: url(/resources/img/btn-select-03-close-1-nor@3x.png); } footer.footer .company_info .info { display: none; padding: 20px 30px; background-color: #e7ebf4; } footer.footer .company_info .info .line { width: 100%; display: flex; justify-content: space-between; align-items: start; } footer.footer .company_info .info .line~.line { margin-top: 6px; } footer.footer .company_info .info .line .item { width: 100px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; } footer.footer .company_info .info .line .value { width: calc(100% - 110px); font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; } footer.footer .copyright { margin-top: 10px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #abb4c4; } /* 푸터 20221118 et03 끝*/ .input { position: relative; } .login { width: 100%; height: 100%; position: relative; } .login .body { } .login .body .top {padding :22px 0 18px; text-align: center; font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .login .body .top span {font-size: 18px; line-height: 20px;font-weight: bold;} .login .body .login_set { margin-top: 98px; } .login .body .login_set .input_group { padding: 0 30px; } .login .body .login_set .input_group .line { position: relative; } .login .body .login_set .input_group input { outline: none; width: 100%; border: 0; caret-color: #ff4c1d; } .login .body .login_set .input_group input::placeholder { font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; } .login .body .login_set .input_group input[type=text]:focus, .login .body .login_set .input_group input[type=password]:focus { border: solid 1px #4fc7fe; } .login .body .login_set .input_group input[type=text] { padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } .login .body .login_set .input_group input[type=password] { padding: 18px 24px 19px; height: 60px; border-radius: 30px; border: solid 1px #e1e5ed; font-size: 16px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; font-family: 'Pretendard', sans-serif; } .login .body .login_set .input_group input[type=submit] { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;padding: 22px 30px; border-radius: 30px; } .login .body .login_set .input_group .login_btn2{width: 100%; font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;padding: 22px 30px; border-radius: 30px; } .login .body .login_set .input_group .line .input_del { display: none; position: absolute; right: 16px; top: 14px; z-index:2; width:32px; height:32px; background-image: url(/resources/img/btn-input-del-nor@3x.png); background-repeat: no-repeat; background-position: center center; background-size: cover;} .login .body .login_set .flex_2{ height: 16px; padding: 0 30px; margin-top: 30px; justify-content: center; align-items: center; position: relative; } .login .body .login_set .flex_2 > * {position: absolute;} .login .body .login_set .flex_2 button { padding: 0; border: 0; padding-bottom: 4px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; color: #2d2d2d;} .id_pw_wrap {right: 30px;} .login .body .login_set .flex_2 button::after{content: ""; margin-top: 3px; display: block; border-bottom: 1px solid #000;} /* .login .body .login_set .flex .sign_up::after, .login .body .login_set .flex .find_info::after{ position:absolute; top:2px; width: 1px; height: 10px; background-color: #ccc; border-bottom: none; margin-left: 20px; content: '';} */ .id_pw_wrap span{ font-size: 12px; vertical-align:top;} .login .body .login_noti { z-index: 0; position: absolute; bottom: 0px; width: 100%; height: 56px; display: flex; justify-content: center; align-items: center; } .login .body .login_noti .ment { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #b9c1d2; } .login .body .login_noti .oneonone { position: absolute; right: 32px; top: 20px; border: 0; color: #b9c1d2; border-bottom: 1px solid #b9c1d2; padding: 0; padding-bottom: 4px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; } /* 회원가입 // */ .join { background-color: #fff; overflow: hidden; height: auto; min-height: 100%; } .join .body { padding: 0 30px 120px; height: 100%; min-height: 100%; } .join .body .user_join_tab { margin-top: 10px; } .join .body .user_join_tab ul { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; border-radius: 33px; background-color: #f3f5fa; } .join .body .user_join_tab ul .wht_back { transition: .2s all; left: 10px; z-index: 0; position: absolute; width: calc(50% - 10px); height: 50px; border-radius: 30px; box-shadow: 0 2px 4px 0 rgba(58, 65, 79, 0.1);background-color: #fff; } .join .body .user_join_tab ul .wht_back.right { transition: .2s all; left: 50%; } .join .body .user_join_tab ul li { z-index: 2; width: 50%; padding: 18px 20px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .join .body .user_join_tab ul li.active { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .join .body .user_join_contents { } .join .body .user_join_contents .desc { margin-top: 50px; padding-bottom: 50px; border-bottom: 1px solid #e1e5ed; } /* 브랜드 회원가입 부분 노티 부분 수정 시작 */ .join .body .user_join_contents .desc ul { padding: 24px; border-radius: 20px;background-color: #f8fafc; } .join .body .user_join_contents .desc ul li { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3; } .join .body .user_join_contents .desc ul li~li { margin-top: 10px; } /* 브랜드 회원가입 부분 노티 부분 수정 끝 */ .join .body .user_join_contents .desc .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .join .body .user_join_contents .desc .button { margin-top: 30px; } .join .body .user_join_contents .desc .button .before_cert button { width: 100%; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .join .body .user_join_contents .desc .button .after_cert button { column-gap: 6px; height: 60px; display: flex; align-items: center; justify-content: center; width: 100%; padding: 0; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .join .body .user_join_contents .desc .button .after_cert { display: none; } .join .body .user_join_contents .info { margin-top: 60px; } .join .body .user_join_contents .info .line { } .join .body .user_join_contents .info .line~.line { margin-top: 60px; } .join .body .user_join_contents .info .line label {margin-bottom: 20px; font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .join .body .user_join_contents .info .line label .required { color: #ff4c1d; } .join .body .user_join_contents .info .line .input { position: relative; } .join .body .user_join_contents .info .line .input a { position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .join .body .user_join_contents .info .line .input input[type=button] { width: auto; position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } /* 개인회원 본인 인증 페이지 시작 */ .join .body .user_join_contents .individual_contents .desc { } .join .body .user_join_contents .individual_contents .desc .ment { } .join .body .user_join_contents .individual_contents .desc .button { } /* 개인회원 본인 인증 페이지 끝 */ /* 프로필 이미지 등록 부분 시작 */ .join .body .user_join_contents .info .line .profile_case { position: relative; width: 100%; padding: 18px 24px 19px;height: 60px;border-radius: 30px;border: solid 1px #e1e5ed;font-size: 16px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;font-family: 'Pretendard', sans-serif; } .join .body .user_join_contents .info .line .profile_case .image_preview { display: none; overflow: hidden; position: absolute; top: 7px; left: 10px;; width: 44px; height: 44px; border-radius: 30px; border: solid 1px #18ef7a; } .join .body .user_join_contents .info .line .profile_case .ment { font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal; letter-spacing: normal;color: #cad4e1; } .join .body .user_join_contents .info .line .profile_case .file { } .join .body .user_join_contents .info .line .profile_case .file input[type="file"] { display: none; position: absolute; width:0; height: 0; top:0; left: 0;; } .join .body .user_join_contents .info .line .profile_case .file label { position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } /* 프로필 이미지 등록 부분 끝 */ .join .body .user_join_contents .info .line .input a.check_btn_before { position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #A9A9A9; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .join .body .user_join_contents .info .line .input a.check_btn { position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .join .body .user_join_contents .info .line .input a.done_check { display: none; position: absolute; right: 10px; top: 8px; width: 44px; height: 44px;padding: 8px;border-radius: 30px;background-color: #18ef7a; } /* 셀렉트 형식으로 변경 2022.10.20 et03 시작 */ .join .body .user_join_contents .info .line .input .birth_btn { font-size: 0; pointer-events: none; position: absolute; right: 10px; top: 8px; width: 44px; height: 44px; background-image: url(/resources/img/btn-input-select-01-nor@3x.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } .join .body .user_join_contents .info .line .select { } .join .body .user_join_contents .info .line .select select { background-color: #fff; appearance:none; width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px;border: solid 1px #e1e5ed; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; background-image: url(/resources/img/btn-input-select-01-nor@3x.png); background-size: 44px 44px; background-repeat: no-repeat; background-position: right 10px center; } .join .body .user_join_contents .info .line .select select option[value=""][disabled] { display: none; } .join .body .user_join_contents .info .line .select select optgroup { color: #000} .join .body .user_join_contents .info .line .select select option { color: #000} .join .body .user_join_contents .info .line .select select select:invalid {color: #000;} /* 셀렉트 형식으로 변경 2022.10.20 et03 끝 */ /* 하단 회원가입 버튼 수정 2022.10.27 시작 */ .join .body .user_join_contents .bottom_btn { width: 100%; margin-top: 60px; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } /* 하단 회원가입 버튼 수정 2022.10.27 끝 */ .join .body .user_join_contents .info .line .noti { margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3; } .join .body .user_join_contents .info .line .warning_noti { margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff4c1d; } .join .body .user_join_contents .info .line .success_noti { margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #10C292; } .join .body .user_join_contents .agreement { margin-top: 60px; } .join .body .user_join_contents .agreement .title { font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .join .body .user_join_contents .agreement .checkbox_all { margin-top: 30px; padding-bottom: 22px; border-bottom: 1px solid #e1e5ed; } .join .body .user_join_contents .agreement .checkbox_all label { } .join .body .user_join_contents .agreement .checkbox_all input[type=checkbox] { } .join .body .user_join_contents .agreement .warning_noti { margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff4c1d; } .warning_noti { margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff4c1d; } .join .body .user_join_contents .agreement .checkbox_all .agree_desc { margin-top: 12px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #2d2d2d; } .join .body .user_join_contents .agreement .checkbox { margin-top: 33px; } .join .body .user_join_contents .agreement .checkbox label { } .join .body .user_join_contents .agreement .checkbox input[type=checkbox] { } .join .body .user_join_contents .agreement .checkbox .agree_content { height: 130px; overflow: hidden; overflow-y: scroll; margin: 13px 0 0;padding: 24px 24px 0;border-radius: 20px;background-color: #f8fafc;} .join .body .user_join_contents .agreement .checkbox .agree_content .inner { padding-bottom: 24px; font-size: 10px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.55;letter-spacing: normal;color: #8992a3; } .join .body .user_join_contents .agreement .checkbox .agree_content .inner table { } .join .body .user_join_contents .agreement .checkbox .agree_content .inner table th { border-right: 1px solid #e1e5ed; vertical-align: middle; padding: 5px; text-align: center; border-top: 1px solid #e1e5ed; border-bottom: 1px solid #e1e5ed; } .join .body .user_join_contents .agreement .checkbox .agree_content .inner table td { border-right: 1px solid #e1e5ed; vertical-align: middle; padding: 5px; text-align: center; border-bottom: 1px solid #e1e5ed; } .join .body .user_join_contents .agreement .checkbox .agree_content .inner table td:last-child, .join .body .user_join_contents .agreement .checkbox .agree_content .inner table th:last-child { border-right: 0; } .join .body .user_join_contents .agreement label { background-image: url(/resources/img/btn-checkbox-nor@3x.png); background-size: 28px 28px; background-repeat: no-repeat; background-position: 2px center; padding-left: 38px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 28px;letter-spacing: normal;color: #2d2d2d; } .join .body .user_join_contents .agreement input[type=checkbox] { display: none; position: absolute; width: 0; height: 0;border: 0; background: none; } .join .body .user_join_contents .agreement input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-sel@3x.png); } .join .body .user_join_contents .agreement .checkbox .agree_content .inner .title { font-size: 12px; margin-bottom: 12px; color: #8992a3; } .join .body .user_join_contents .agreement .checkbox .agree_content .item~.item { margin-top: 20px; } .join .body .user_join_contents .agreement .checkbox .agree_content .item b { display: block; margin-bottom: 10px; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal; } .join .body .user_join_contents .agreement .checkbox .agree_content .item ol { list-style: auto; list-style-type: decimal; } .join .body .user_join_contents .agreement .checkbox .agree_content .item ol li { margin-left: 16px; padding-left: 4px; list-style: auto; } .join .body .user_join_contents .agreement .checkbox .agree_content .item ol li a { color: #333; } .join .body .user_join_contents .agreement .checkbox .agree_content .item ol li ol { margin-top: 10px; } .join .body .user_join_contents .agreement .checkbox .agree_content .item ol li~li { margin-top: 10px; } .app .fixed_center { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .app .fixed_center .inner { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .app .fixed_center .inner .ment { position: absolute; width: calc(100% - 60px); top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .app .fixed_center .inner .ment .tit { font-size: 16px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: center;color: #000; } .app .fixed_center .inner .ment .icon { margin-bottom: 16px; } .app .fixed_center .inner .ment .desc { margin-top: 6px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .app .fixed_center .inner .button { position: fixed; bottom: 30px; width: calc(100% - 60px); left: 50%; transform: translateX(-50%); } .app .fixed_center .inner .button button { width: 100%; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } /* 하단 버튼 레이아웃 시작 2022.10.28 */ .fixed_center .inner .button.row_case button ~ button { margin-top: 20px; } /* 하단 버튼 레이아웃 끝 2022.10.28 */ .button.row_case button ~ button { margin-top: 20px; } .button.row_case { position: fixed; bottom: 30px; width: calc(100% - 60px); left: 50%; transform: translateX(-50%); } .button.row_case button { width: 100%; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .bottom_fixed_box { pointer-events: none; position: fixed; z-index: 3; top: 0; left: 0; right: 0; bottom: -2px; } .bottom_fixed_box .bottom_btn { pointer-events: auto; transition: .3s all; position: absolute; bottom: -90px; height: 90px; overflow: hidden; padding: 20px 30px 52px; width: 100%; font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .bottom_fixed_box .bottom_btn.up { transition: .3s all; bottom: -2px; } .brand_contents { display: none; } /* // 회원가입 */ /* 아이디 찾기 시작 2022.10.28 */ .find_id { } .find_id .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .find_id .group { display: flex; justify-content: space-between; align-items: center; } .find_id .group .radio { width: 50%; text-align: left; position: relative; } .find_id .group .radio input[type=radio] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .find_id .group .radio label { height: 28px; padding-left: 40px; font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;color: #2d2d2d;background-image: url(/resources/img/btn-radio-nor@3x.png);background-size: 28px 28px;background-repeat: no-repeat;background-position: 3px center; } .find_id .group .radio input[type=radio]:checked + label { background-image: url(/resources/img/btn-radio-sel@3x.png); } .find_id .content { } .find_id .content .email_cert { } .find_id .content .phone_cert { display: none; } .find_id .content .cert_ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.56;letter-spacing: normal;text-align: center;color: #000;} .find_id .content input[type=submit] { padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .find_id .content input[type=submit]:disabled { opacity: .4; } .find_id .content .cert_noti { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #2d2d2d; } .found_id { font-size: 26px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; color: #ff5039;} /* 아이디 찾기 끝 2022.10.28 */ /* 비밀번호 찾기 시작 2022.10.28 */ .find_pw { } .find_pw .step_02 { display: none;} .find_pw .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .find_pw .group { display: flex; justify-content: space-between; align-items: center; } .find_pw .group .radio { width: 50%; text-align: left; position: relative; } .find_pw .group .radio input[type=radio] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .find_pw .group .radio label { height: 28px; padding-left: 40px; font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;color: #2d2d2d;background-image: url(/resources/img/btn-radio-nor@3x.png);background-size: 28px 28px;background-repeat: no-repeat;background-position: 3px center; } .find_pw .group .radio input[type=radio]:checked + label { background-image: url(/resources/img/btn-radio-sel@3x.png); } .find_pw .content { } .find_pw .content .cert_ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.56;letter-spacing: normal;text-align: center;color: #000;} .find_pw .content input[type=submit] { padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .find_pw .content .cert_noti { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #2d2d2d; } /* 비밀번호 찾기 끝 2022.10.28 */ /* 비밀번호 재설정 시작 2022.10.28 */ .reset_pw { } .reset_pw .title { } .reset_pw .title .tit { font-size: 30px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .reset_pw .title .sub { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .reset_pw input[type=submit] { padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .reset_pw input[type=submit]:disabled { opacity: .4; } /* 비밀번호 재설정 끝 2022.10.28 */ /* 카테고리 시작 2022.10.30 et03 */ .category.app { height: 100%; overflow: hidden; background-image:url(/resources/img/brand_test.jpg); background-size: cover; background-position: top; } .category.app .header_back { position: fixed; top:0; width: 100%; } .category.app .body:after { content: ''; position:absolute; z-index: -2; width: 100%; height: 100%; background-image: url(/resources/img/dim-brandpage-top@3x.png); background-size: contain; top: 0; background-position: top center; } .category.app .body { position: fixed; top:0; z-index: -1; width: 100%; height: 100%; } .category.app .body .top { padding: 0 30px; } .category.app .body .top .header { display: flex; width: 100%; justify-content: space-between; align-items: top; } .category.app .body .top .header .title { } .category.app .body .top .header .title .brand_eng { font-family: 'Pretendard', sans-serif; margin-bottom: 6px; font-size: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: 2px;color: #fff; } .category.app .body .top .header .title .brand_kor { font-size: 30px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .category.app .body .top .header .fav { } .category.app .body .top .header .fav input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .category.app .body .top .header .fav label { min-width: 34px; font-family: 'Pretendard', sans-serif; background-image: url(/resources/img/btn-favorite-02-brandpage-1-nor@3x.png); background-repeat: no-repeat; background-size: 34px 34px; background-position: center top; height: 48px; padding-top: 34px; font-size: 14px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .category.app .body .top .header .fav input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-02-brandpage-2-sel@3x.png); color: #f44; } .category.app .body .top .brand_desc { transition: .3s all; white-space: pre-line; max-height: 40px; overflow: hidden; margin-top: 14px; font-size: 12px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1.67;letter-spacing: normal;color: #fff; } .category.app .body .top .brand_desc.fold { transition: .3s all; max-height: none; } .category.app .body .top .more_btn { margin-top: 14px; } .category.app .body .top .more_btn button { padding-bottom: 3px; border-bottom: 1px solid #fff; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .category.app .body .top .more_btn button.fold_off { display: none; } .category.app .slide_banner { margin-top: 36px; height: 172px; } .category.app .slide_banner .swiper-slide img { display: block;width: 100%;height: 100%;object-fit: cover;} .category.app .slide_banner .swiper-slide {overflow: hidden; text-align: center;font-size: 18px;background: #fff;height: 130px;width: 310px;border-radius: 20px;display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;} .category.app .slide_banner .swiper { width: 100%;height: 100%;} .category.app .slide_banner .swiper-horizontal>.swiper-pagination-bullets, .category.app .slide_banner .swiper-pagination-bullets.swiper-pagination-horizontal, .category.app .slide_banner .swiper-pagination-custom, .category.app .slide_banner .swiper-pagination-fraction { bottom: 0px; left: 0; } .category.app .slide_banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .category.app .slide_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px;} .category.app .slide_banner .swiper-pagination-bullet { width: 6px; height: 6px; opacity: .6; background: #fff; } .category.app .slide_banner .swiper-pagination-bullet-active { opacity: 1; background: #fff; } .category.app .scroll_case { z-index: 2; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .category.app .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .category.app .main_scroll { pointer-events: auto; position: absolute; /*top: 0;*/ height: 100%; width: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); } .category.app .main_scroll .main_bar { min-height: 100%; height: auto; width: 100%; } .category.app .main_scroll .main_bar .header { display: flex; justify-content: space-between; align-items: center; padding: 34px 14px 16px 20px; } .category.app .main_scroll .main_bar .header .front { } .category.app .main_scroll .main_bar .header .front .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .category.app .main_scroll .main_bar .header .front .tit font { } .category.app .main_scroll .main_bar .header .back { display: flex; justify-content: end; align-items: center; } .category.app .main_scroll .main_bar .header .back .checkbox { position: relative; } .category.app .main_scroll .main_bar .header .back .checkbox input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .category.app .main_scroll .main_bar .header .back .checkbox label { height: 26px; background-image: url(/resources/img/btn-checkbox-02-small-1-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: left center; padding-left: 30px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .category.app .main_scroll .main_bar .header .back .checkbox input[type=checkbox]:checked + label {background-image: url(/resources/img/btn-checkbox-02-small-2-sel@3x.png);} .category.app .main_scroll .main_bar .header .back .checkbox +.button { margin-left: 10px; padding-left: 10px; } .category.app .main_scroll .main_bar .header .back .checkbox +.button::before { position: absolute; top:6px; left: 0; content: ''; width: 1px; height: 14px; background-color: #d4d8df; } .category.app .main_scroll .main_bar .header .back .button { position: relative; } .category.app .main_scroll .main_bar .header .back .button .sort_btn { background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .category.app .main_scroll .main_bar .header .back .button .sort_btn:hover { color: #f44; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .category.app .main_scroll .main_bar .list { padding: 20px 20px 60px; } .category.app .main_scroll .main_bar .list ul { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .category.app .main_scroll .main_bar .list ul li { width: calc(50% - 7px); padding: 10px 14px 14px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .category.app .main_scroll .main_bar .list ul li a { display: block; } .category.app .main_scroll .main_bar .list ul li a .thumb { position: relative; display: flex; justify-content: center; align-items: center; height: 30vw; width: 30vw; overflow: hidden; margin: 0 auto; } .category.app .main_scroll .main_bar .list ul li a .thumb .mark { text-transform: uppercase; white-space: nowrap;padding: 5px 10px; border-radius: 10px; display: inline-block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .category.app .main_scroll .main_bar .list ul li a .thumb .soldout { font-family: 'Pretendard', sans-serif; content: 'Sold Out'; background-color: rgb(255 80 57 / 90%); } .category.app .main_scroll .main_bar .list ul li a .thumb .commingsoon { font-family: 'Pretendard', sans-serif; content: 'Coming Soon'; border-radius: 10px; background-color: rgba( 0, 0,0, .8); } .category.app .main_scroll .main_bar .list ul li a .thumb img { } .category.app .main_scroll .main_bar .list ul li a .prd_info { margin-top: 6px; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head { width: 100%; display: flex; justify-content: space-between; align-items: center; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head .brand_nm { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head .favorite { } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head .favorite input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head .favorite label { font-family: 'Pretendard', sans-serif; background-image: url(/resources/img/btn-favorite-02-list-1-nor@3x.png); background-repeat: no-repeat; background-size: 24px 24px; background-position: left center; height: 24px; padding-left: 24px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 24px;letter-spacing: normal;text-align: right;color: #cad4e1; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_head .favorite input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-02-list-2-sel@3x.png); color: #f44; } .category.app .main_scroll .main_bar .list ul li a .prd_info .prd_tit { margin-top: 2px; height: 32px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_foot { margin-top: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_foot .price { display: flex; justify-content: start; align-items: center; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_foot .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .category.app .main_scroll .main_bar .list ul li a .prd_info .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } .top_btn { display: none; position: fixed; z-index: 1001; right: 0; bottom: 60px; } .category.app.sub { height: calc(100% - 60px); position: absolute; top: 60px; width: 100%; overflow-y: scroll; } .backcolor_01 { background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5) !important; } .backcolor_02 { background-image: linear-gradient(166deg, #fff 3%, #dcf2ea 88%, #e5c4ff 109%) !important; } .backcolor_03 { background-image: linear-gradient(166deg, #fff 3%, #fbe7ff 88%, #c4edff 109%) !important; } .category.app.sub .header_back { z-index: 1001;} .category.app.sub .header_back .title { display: flex; justify-content: center; align-items: center; vertical-align: middle; font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000;} .category.app.sub .header_back .title img { margin-left: 2px; } .category.app.sub .main_scroll { overflow-y: scroll; top: 60px;} .category.app.sub .main_scroll .main_bar { border-radius: 0; background: transparent; padding-bottom: 60px; } .category.app.sub .main_scroll .main_bar .list { padding: 20px 20px 120px; } .category.app .list ul { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .category.app .list ul li { width: calc(50% - 7px); padding: 10px 14px 14px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .category.app .list ul li a { display: block; } .category.app .list ul li a .thumb { position: relative; display: flex; justify-content: center; align-items: center; height: 30vw; overflow: hidden; margin: 0 auto; } .category.app .list ul li a .thumb .mark { text-transform: uppercase; white-space: nowrap; padding: 5px 10px; border-radius: 10px; display: inline-block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .category.app .list ul li a .thumb .soldout { font-family: 'Pretendard', sans-serif; content: 'Sold Out'; background-color: rgb(255 80 57 / 90%); } .category.app .list ul li a .thumb .commingsoon { font-family: 'Pretendard', sans-serif; content: 'Coming Soon'; border-radius: 10px; background-color: rgba( 0, 0,0, .8); } .category.app .list ul li a .thumb img { } .category.app .list ul li a .prd_info { margin-top: 6px; } .category.app .list ul li a .prd_info .info_head { width: 100%; display: flex; justify-content: space-between; align-items: center; } .category.app .list ul li a .prd_info .info_head .brand_nm { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .category.app .list ul li a .prd_info .info_head .favorite { } .category.app .list ul li a .prd_info .info_head .favorite input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .category.app .list ul li a .prd_info .info_head .favorite label { font-family: 'Pretendard', sans-serif; background-image: url(/resources/img/btn-favorite-02-list-1-nor@3x.png); background-repeat: no-repeat; background-size: 24px 24px; background-position: left center; height: 24px; padding-left: 24px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 24px;letter-spacing: normal;text-align: right;color: #cad4e1; } .category.app .list ul li a .prd_info .info_head .favorite input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-02-list-2-sel@3x.png); color: #f44; } .category.app .list ul li a .prd_info .prd_tit { margin-top: 2px; height: 32px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .category.app .list ul li a .prd_info .info_foot { margin-top: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .category.app .list ul li a .prd_info .info_foot .price { display: flex; justify-content: start; align-items: center; } .category.app .list ul li a .prd_info .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .category.app .list ul li a .prd_info .info_foot .price .ori_pri {margin-left: 2px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .category.app .list ul li a .prd_info .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } /* 카테고리 끝 2022.10.30 et03 */ /* 메인 카테고리 시작 2022.11.13 ET03*/ .main_category.app { font-family: 'Pretendard'; padding-bottom: 120px; height: auto; } .main_category.app .body { } .main_category.app .main_cate { position: relative; padding-top: 60px; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .main_category.app .main_cate::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .main_category.app .main_cate:after { position: absolute; content: ''; width: calc(100% - 60px); bottom: 0px; height: 1px; left: 30px; background-color: #e1e5ed; } .main_category.app .main_cate ul { white-space: nowrap; padding: 10px 30px 25px; width: fit-content; display: flex; justify-content: start; align-items: center; column-gap: 16px; } .main_category.app .main_cate ul li { width: 66px; } .main_category.app .main_cate ul li .icon { height: 66px; width: 100%; } .main_category.app .main_cate ul li .icon img { object-fit: contain; } .main_category.app .main_cate ul li .tit { margin-top: 10px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .main_category.app .cate_tab { padding: 30px; position: -webkit-sticky; /* 사파리 브라우저 지원 */ position: sticky; top: 40px; background-color: #fff; z-index: 2; } .main_category.app .cate_tab > ul { display: flex; justify-content: start; align-items: center; width: 100%; column-gap: 10px; } .main_category.app .cate_tab > ul > li { padding: 16px 20px 14px; border-radius: 30px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main_category.app .cate_tab > ul > li.active { background-color: #000;color: #fff;} .main_category.app .cate_tab .brand_tab { display: none;} .main_category.app .cate_tab .brand_tab:after { position: absolute; content: ''; width: calc(100% - 60px); bottom: 0px; height: 1px; left: 30px; background-color: #e1e5ed; } .main_category.app .cate_tab .brand_tab .sort_btn { position: absolute; top: 40px; right: 30px; padding-left: 26px; background-image: url(/resources/img/ic-menu-sorting@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: left center; height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #7f8a9e; } .main_category.app .cate_tab .brand_tab .eng { display: none;} .main_category.app .cate_tab .brand_tab .module { margin-top: 30px; } .main_category.app .cate_tab .brand_tab .module ul { display: flex; flex-wrap: wrap; justify-content: start; align-items: start; gap: 10px; } .main_category.app .cate_tab .brand_tab .module ul li { font-size: 16px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3;padding: 11px 14px 9px;border-radius: 21px;border: solid 1px #e1e5ed; } .main_category.app .cate_tab .brand_tab .module ul li.active, .main_category.app .cate_tab .brand_tab .module ul li:hover { border: solid 1px #4fc7fe; font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #4fc7fe; } .main_category.app .cate_list { padding-bottom: 10px; } .main_category.app .cate_list > ul { } .main_category.app .cate_list > ul > li { } .main_category.app .cate_list > ul > li .tit_bar { font-size: 24px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.08;letter-spacing: normal;color: #000;padding: 12px 30px; background-image: url(/resources/img/btn-select-04-open-1-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: right 30px center; } .main_category.app .cate_list > ul > li.active .tit_bar { background-image: url(/resources/img/btn-select-04-open-2-sel@3x.png); } .main_category.app .cate_list > ul > li .fold_cate { display: none; } .main_category.app .cate_list > ul > li .fold_cate .horizon_list { position: relative; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .main_category.app .cate_list > ul > li .fold_cate .horizon_list::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .main_category.app .cate_list > ul > li .fold_cate .horizon_list ul { white-space: nowrap; padding: 16px 30px ; width: fit-content; display: flex; justify-content: start; align-items: center; column-gap: 20px; } .main_category.app .cate_list > ul > li .fold_cate .horizon_list ul li { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #b9c1d2; } .main_category.app .cate_list > ul > li .fold_cate .horizon_list ul li.active { color: #000; } .main_category.app .cate_list > ul > li .fold_cate .vertical_list { position: relative; } .main_category.app .cate_list > ul > li .fold_cate .vertical_list:before { position: absolute; content: ''; width: calc(100% - 60px); top: 0px; height: 1px; left: 30px; background-color: #e1e5ed; } .main_category.app .cate_list > ul > li .fold_cate .vertical_list ul { padding-top: 10px; margin-bottom: 30px; } .main_category.app .cate_list > ul > li .fold_cate .vertical_list ul li { padding: 12px 30px; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main_category.app .cate_list > ul > li .fold_cate .vertical_list ul li:hover, .main_category.app .cate_list > ul > li .fold_cate .vertical_list ul li:focus { background-color: #f8fafc; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .main_category.app .brand_list { display: none; position: relative; } .main_category.app .brand_list > ul { padding-top: 10px; } .main_category.app .brand_list > ul > li { } .main_category.app .brand_list > ul > li .tit_bar { font-size: 24px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.08;letter-spacing: normal;color: #000;padding: 12px 30px; background-image: url(/resources/img/btn-select-04-open-1-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: right 30px center; } .main_category.app .brand_list > ul > li.active .tit_bar { background-image: url(/resources/img/btn-select-04-open-2-sel@3x.png); } .main_category.app .brand_list > ul > li .tit_bar .sub { margin-left: 10px; font-size: 16px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .main_category.app .brand_list > ul > li .fold_cate { display: none; } .main_category.app .brand_list > ul > li .fold_cate { position: relative; padding: 10px 30px; } .main_category.app .brand_list > ul > li .fold_cate ul { padding: 12px 20px; margin-bottom: 30px; border-radius: 20px; background-color: #f3f5fa; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .main_category.app .brand_list > ul > li .fold_cate ul li { width: 50%; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 2.14;letter-spacing: normal;color: #8992a3; } .main_category.app .link_sec { padding: 10px 0 0; position: relative; } .main_category.app .link_sec::before { content: ''; position: absolute; top: 0; left: 30px; width: calc(100% - 60px); height: 1px; background-color: #e1e5ed; } .main_category.app .link_sec ul { } .main_category.app .link_sec ul li { } .main_category.app .link_sec ul li a { display: block;padding: 12px 30px; font-size: 24px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.08;letter-spacing: normal;color: #000; } .cate_sub_list .header { display: flex; justify-content: space-between; align-items: center; padding: 40px 14px 18px 20px; } .cate_sub_list .header .front { } .cate_sub_list .header .front .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .cate_sub_list .header .front .tit font { } .cate_sub_list .header .back { display: flex; justify-content: end; align-items: center; } .cate_sub_list .header .back .checkbox { position: relative; } .cate_sub_list .header .back .checkbox input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .cate_sub_list .header .back .checkbox label { height: 26px; background-image: url(/resources/img/btn-checkbox-02-listoption-1-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: left center; padding-left: 30px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .cate_sub_list .header .back .checkbox input[type=checkbox]:checked + label {background-image: url(/resources/img/btn-checkbox-02-listoption-2-sel@3x.png);} .cate_sub_list .header .back .checkbox +.button { margin-left: 10px; padding-left: 10px; } .cate_sub_list .header .back .checkbox +.button::before { position: absolute; top:6px; left: 0; content: ''; width: 1px; height: 14px; background-color: #d4d8df; } .cate_sub_list .header .back .button { position: relative; } .cate_sub_list .header .back .button .sort_btn { background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .cate_sub_list .header .back .button .sort_btn:hover { color: #f44; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .cate_sub_list .list { padding: 20px 20px 60px; } .cate_sub_list .list ul { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .cate_sub_list .list ul li { width: calc(50% - 7px); padding: 10px 14px 14px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .cate_sub_list .list ul li a { display: block; } .cate_sub_list .list ul li a .thumb { position: relative; display: flex; justify-content: center; align-items: center; width: 30vw; height: 30vw; overflow: hidden; margin: 0 auto; } .cate_sub_list .list ul li a .thumb .mark { text-transform: uppercase; white-space: nowrap;padding: 5px 10px; border-radius: 10px; display: inline-block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .cate_sub_list .list ul li a .thumb .soldout { font-family: 'Pretendard', sans-serif; content: 'Sold Out'; background-color: rgb(255 80 57 / 90%); } .cate_sub_list .list ul li a .thumb .commingsoon { font-family: 'Pretendard', sans-serif; content: 'Coming Soon'; border-radius: 10px; background-color: rgba( 0, 0,0, .8); } .cate_sub_list .list ul li a .thumb img { } .cate_sub_list .list ul li a .prd_info { margin-top: 6px; } .cate_sub_list .list ul li a .prd_info .info_head { width: 100%; display: flex; justify-content: space-between; align-items: center; } .cate_sub_list .list ul li a .prd_info .info_head .brand_nm { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .cate_sub_list .list ul li a .prd_info .info_head .favorite { } .cate_sub_list .list ul li a .prd_info .info_head .favorite input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .cate_sub_list .list ul li a .prd_info .info_head .favorite label { font-family: 'Pretendard', sans-serif; background-image: url(/resources/img/btn-favorite-02-list-1-nor@3x.png); background-repeat: no-repeat; background-size: 24px 24px; background-position: left center; height: 24px; padding-left: 26px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 24px;letter-spacing: normal;text-align: right;color: #cad4e1; } .cate_sub_list .list ul li a .prd_info .info_head .favorite input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-02-list-2-sel@3x.png); color: #f44; } .cate_sub_list .list ul li a .prd_info .prd_tit { margin-top: 2px; height: 32px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .cate_sub_list .list ul li a .prd_info .info_foot { margin-top: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .cate_sub_list .list ul li a .prd_info .info_foot .price { display: flex; justify-content: start; align-items: center; } .cate_sub_list .list ul li a .prd_info .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .cate_sub_list .list ul li a .prd_info .info_foot .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .cate_sub_list .list ul li a .prd_info .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } /* 메인 카테고리 끝 2022.11.13 ET03*/ /* 메인화면 시작 20221109 et03 */ .main.app { height: 100%; overflow: hidden; font-family: 'Pretendard';} .main.app .detailBanner .swiper-slide { width: 75%; }.main.app .body { position: fixed;top: 0;z-index: 1;width: 100%; height: 100%; } .main.app .body .slide_banner { height: calc(73vw + 90px); } .main.app .body .slide_banner .swiper { height: 100%; } .main.app .body .slide_banner .swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .main.app .body .slide_banner .swiper .swiper-slide .ment { position: absolute; left: 20px; bottom: 80px; } .main.app .body .slide_banner .swiper .swiper-slide .ment .eng_word { display: inline; padding: 4px 12px; border-radius: 4px; border: 0.5px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(20px); color: var(--Grayscale-White, #FFF); font-size: 12px; font-weight: 500; line-height: 130%; /* 15.6px */ } .main.app .body .slide_banner .swiper .swiper-slide .dim_bg{width: 100%; height: 100%; position: absolute; background: linear-gradient(0deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%);} .main.app .body .slide_banner .swiper .swiper-slide .ment .tit { margin-top: 12px; font-size: 25px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 130%;letter-spacing: normal;color: #fff; } .main.app .body .slide_banner .swiper .swiper-slide .ment .sub { margin-top: 8px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 130%;letter-spacing: normal;color: #fff; } .main.app .body .slide_banner .swiper .swiper-slide img { width: 100%;} .main.app .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets, .main.app .body .slide_banner .swiper-pagination-bullets.swiper-pagination-horizontal { text-align: center; bottom: 50px; } .main.app .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .main.app .body .slide_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 6px; height: 6px; transition: .3s; opacity: 0.6; background-color: #fff; } .main.app .body .slide_banner .swiper-pagination-bullet-active { width: 6px; border-radius: 3px; background: #fff; opacity: 1 !important; } .main.app .scroll_case { z-index: 2; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .main.app .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .main.app .scroll_case .main_scroll { pointer-events: auto; position: absolute; top: 73vw; height: 100%; width: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); } .main.app .scroll_case .main_scroll .main_bar { min-height: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; height: auto; width: 100%; padding-bottom: 100px; } .main.app .scroll_case .main_scroll .main_bar .header { padding: 30px 30px 4px; font-size: 20px; position: relative; } .main.app .scroll_case .main_scroll .main_bar .header .tit { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 700; font-stretch: normal;font-style: normal;line-height: 130%;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .header .tit .kor { font-family: 'Pretendard'; font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .header .sub_tit { margin-top: 4px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 150%;letter-spacing: normal;color: #abb4c4; } .main.app .scroll_case .main_scroll .main_bar .header .more_btn { position: absolute; top: 30px;right: 30px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 150%;letter-spacing: normal;text-align: right;color: #b9c1d2; } .main.app .scroll_case .main_scroll .main_bar .header .button { position: absolute; top:36px; right: 14px; } .main.app .scroll_case .main_scroll .main_bar .header .button .sort_btn { background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .main.app .scroll_case .main_scroll .main_bar .header.recom { padding: 30px 30px 0px; } .main.app .scroll_case .main_scroll .main_bar .menu { } .main.app .scroll_case .main_scroll .main_bar .menu .main_menu { padding: 10px 30px; } .main.app .scroll_case .main_scroll .main_bar .menu .main_menu ul { display: flex; width: 100%; justify-content: space-between; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .menu .main_menu ul li { max-width: 54px;} .main.app .scroll_case .main_scroll .main_bar .menu .main_menu ul li a { display: block; } .main.app .scroll_case .main_scroll .main_bar .menu .logo_menu { margin-top: 20px; padding: 0 30px; margin-bottom: 30px; } .main.app .scroll_case .main_scroll .main_bar .menu .logo_menu ul { display: flex; width: 100%; justify-content: space-between; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .menu .logo_menu ul li { max-width: 54px;} .main.app .scroll_case .main_scroll .main_bar .menu .logo_menu ul li a { display: block; } /* .main.app .scroll_case .main_scroll .main_bar .menu .main_menu ul li a .icon { width: 54px; } */ .main.app .scroll_case .main_scroll .main_bar .menu .main_menu ul li a .menu_name { padding-top: 10px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu { margin-top: 26px; margin-bottom: 30px; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu::-webkit-scrollbar {display: none;} .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul { padding: 0 30px; column-gap: 16px; width: fit-content; white-space: nowrap; display: flex; justify-content: start; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul li { padding: 10px 15px 10px 10px; border-radius: 30px; background-color: #f3f5fa; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul li a { display: flex; justify-content: space-between; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul li a .icon { border-radius: 10px; width: 24px; height: 24px; overflow: hidden; padding: 1px; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul li a .icon img { object-fit: contain; } .main.app .scroll_case .main_scroll .main_bar .menu .scroll_menu ul li a .menu_name { margin-left: 10px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #112235; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend { height: 420px; padding-top: 20px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide { width: 300px; height: 378px;overflow: hidden; border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide > a { width: 100%; height: 100%; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .logo_head { display: flex; width: 100%; padding: 10px 16px; justify-content: start; align-items: center; gap: 14px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .logo_head .icon { width: 38px; height: 38px; display: flex; border-radius: 20px; overflow: hidden; filter: drop-shadow( 0px 0px 3px #DEDEDE); } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .logo_head img { object-fit: contain; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .logo_head .brand_name { font-size: 14px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .thumb { background-color: #EBEBEB; display: flex; justify-content: center; align-items: center; width: 100%; height: 180px; position: relative; background-color: #f0f4fa; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .thumb img { object-fit: contain; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .thumb .fav { position: absolute; right: 14px; top: 14px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .thumb .fav .fav_btn { width: 28px; height: 28px; background-image: url(/resources/img/btn-favorite-nor@3x.png); background-repeat: no-repeat; background-repeat: no-repeat; background-size: cover; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .thumb .fav .fav_btn.active { background-image: url(/resources/img/btn-favorite-sel@3x.png); } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content { padding: 16px; position: relative; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .tit { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .desc { word-wrap: break-word; word-break: keep-all; white-space: nowrap; overflow: hidden; width: 100%; height: 16px; text-overflow: ellipsis; margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .price { margin-top: 10px; font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info { margin-top: 17px; border-top: 1px solid #e1e5ed; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit { display: flex; justify-content: start; align-items: center; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit img { } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit .tooltip_icon { margin-left: 4px; position: relative; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit .tooltip_icon img { } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit .tooltip_icon img:hover + .tooltip { display: block; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit .tooltip_icon .tooltip { display: none; bottom: 34px; left: -94px; border-radius: 30px; position: absolute; white-space: pre; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1.33; letter-spacing: normal; text-align: center; color: #fff; background-color: #ff5111; padding: 10px 20px 9px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .tit .tooltip_icon .tooltip::after { bottom: -10px; left: 102px;content: '';position: absolute;display: inline-block;border: 10px solid transparent;border-left-color: #ff5111; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .cate_rank { } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .cate_rank .cate_name { font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: right;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .rank_info .cate_rank .cate_name .rank { font-weight: 800; color: #4fc7fe; } /* 2023.02.06 레코픽 카드 레인지 부분 삭제 .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .range {position: relative; margin-top: 28px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .range input[type=range] {-webkit-appearance: none;width: 100%;height: 6px;border-radius: 3px;} .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .range input[type=range]::-ms-fill-upper { background-image: linear-gradient(92deg, #4fc7fe 0%, #09fa99 96%); } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .range input[type=range]::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: url(/resources/img/guage-knob@3x.png) no-repeat center center; background-size: cover; cursor: pointer; border-radius: 15px; box-shadow: 0 2px 4px 0 rgba(67, 86, 103, 0.4); border: 0; background-color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .range input[type=range]::-moz-range-thumb {-webkit-appearance: none; appearance: none; width: 30px; height: 30px; background: url(/resources/img/guage-knob@3x.png) no-repeat center center; background-size: cover; cursor: pointer; border-radius: 15px; box-shadow: 0 2px 4px 0 rgba(67, 86, 103, 0.4); border: 0; background-color: #fff;} */ .gauge { border-radius: 3px; background-color: #f3f5fa; height: 6px; width: 100%; position: relative; } .gauge .fill { position: relative; width: 100px; height: 6px; border-radius: 3px; background-image: linear-gradient(92deg, #4fc7fe 0%, #09fa99 96%); } .gauge .fill .knob_set { top: -13px; position: absolute; right: 0; display: flex; justify-content: end; flex-wrap: wrap; width: 66px; text-align: center; } .gauge .fill .knob_set .knob { width: 30px; height: 30px; background: url(/resources/img/guage-knob@3x.png) no-repeat center center; background-size: cover; cursor: pointer; border-radius: 15px; box-shadow: 0 2px 4px 0 rgba(67, 86, 103, 0.4); border: 0; background-color: #fff; } .gauge .fill .knob_set .consumer_like { margin-top: 6px; } .gauge .fill .knob_set .consumer_like .word { font-size: 12px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: right; color: #000;} .gauge .fill .knob_set .consumer_like .pt { font-size: 12px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: right;color: #4fc7fe; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .profile { position: absolute; right: 10px; top: -32px; width: 64px; height: 78px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .profile .img { border-radius: 50%; overflow: hidden; width: 64px; height: 64px; border-radius: 32px; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .profile .img img { object-fit: contain; } .main.app .scroll_case .main_scroll .main_bar .slide_recommend .swiper-slide .content .profile .name { width: 100%; font-size: 10px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;text-align: center;color: #fff;position: absolute; bottom: 0; width: 100%; padding: 4px 0; opacity: 0.9; border-radius: 10px; background-color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter { height: 168px; } .main.app .scroll_case .main_scroll .main_bar .earlyadopter_section .slide_earlyadopter{padding: 16px 0;} .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide { height: 136px; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; width: 300px; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide > a { justify-content: space-between; align-items: center; display: flex; width: 100%; height: 100%; padding: 6px 6px 0; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .thumb { width: 106px; height: 106px; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .thumb img { } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content { padding: 16px; position: relative; width: calc(100% - 106px); } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .fav { position: absolute; right: 14px; top: 14px; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .fav .fav_btn { width: 28px; height: 28px; background-image: url(/resources/img/btn-favorite-nor@3x.png); background-repeat: no-repeat; background-repeat: no-repeat; background-size: cover; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .fav .fav_btn.active { background-image: url(/resources/img/btn-favorite-sel@3x.png); } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .tit { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .desc { margin-top: 4px; min-height: 32px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .price { margin-top: 8px; margin-bottom: 20px; font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .range { border-radius: 3px; background-color: #f3f5fa; height: 6px; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .range .filled { width: 30%; height: 6px; border-radius: 3px; background-image: linear-gradient(104deg, #4fc7fe 0%, #09fa99 96%); } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .stock { /*margin-top: 6px;*/ font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_earlyadopter .swiper-slide .content .stock span {font-family: 'Pretendard', sans-serif; font-weight: 800; color: #4fc7fe; } .main.app .scroll_case .main_scroll .main_bar .slide_leco { height: 214px; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide { width: 160px; background-color: transparent; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .img { overflow: hidden; position: relative; width: 160px; height: 160px; border-radius: 80px; border: solid 4px #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .img img { width: 100%; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .img:after { content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; width: 100%; height: 100%; background-color: rgba( 0, 0,0, .6); } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide.swiper-slide-next .img:after, .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide.swiper-slide-prev .img:after { content: ''; top: 50%; left: 50%; transform: translate(-50%,-50%); position: absolute; width: 100%; height: 100%; background-color: rgba( 0, 0,0, .4); } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .img .king { display: none; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; position: absolute; font-size: 26px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.15;letter-spacing: normal;text-align: center;color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel { opacity: 0; top: 140px; position: absolute; width: 100%; display: flex; width: 100%; justify-content: flex-start; align-items: center; padding: 6px; border-radius: 27px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .level { text-transform: uppercase; display: flex; justify-content: center; align-items: center; width: 42px; border-radius: 21px; height: 42px; font-size: 12px; font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .level_icon { width: 42px; border-radius: 22px; height: 42px; background-position: center center; background-repeat: no-repeat; background-size: cover; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .level_icon.one { background-image: url(/resources/img/BADGE_MONTHLYCREATOR_01_1ST_1_MAIN_@3x.png); } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .level_icon.two { background-image: url(/resources/img/BADGE_MONTHLYCREATOR_02_2ND_1_MAIN_@3x.png); } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .level_icon.three { background-image: url(/resources/img/BADGE_MONTHLYCREATOR_03_3RD_1_MAIN_@3x.png); } /* .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .level.lv_red { background-image: linear-gradient(158deg, #ff7e57 7%, #f60b4c 112%); } */ .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .info { margin-left: 8px; width: calc(100% - 50px); } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .info .nick { text-overflow: ellipsis; width: 100%; overflow: hidden; white-space: nowrap;font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .info .review { margin-top: 6px; font-size: 10px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide .pannel .info .review span { font-family: 'Pretendard', sans-serif; font-size: 11px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.09;letter-spacing: normal;color: #f44; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide.swiper-slide-active .pannel { opacity: 1;} .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide.swiper-slide-active .img .king { display: block; } .main.app .scroll_case .main_scroll .main_bar .slide_leco .swiper-slide.swiper-slide-active .img:after { display: none; } .main.app .scroll_case .main_scroll .main_bar .slide_brand { height: 450px; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide { width: 300px; height: 424px; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide:active {box-shadow: none; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide .thumb { text-align: center; display: flex; justify-content: center; align-items: center;border-radius: 20px; width: 100%; height: 424px; position: relative; overflow: hidden; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide:active .thumb img { opacity: 0.9; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide .thumb .prd_status { text-transform: uppercase; position: absolute; top: 16px; left: 16px; padding: 4px 9px 4px 10px; border-radius: 10px;background-color: rgba(0, 0, 0, 0.7); font-size: 12px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide .pannel { padding: 16px; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide .pannel .tit { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .scroll_case .main_scroll .main_bar .slide_brand .swiper-slide .pannel .sub_tit { margin-top: 8px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; white-space: nowrap; height: 16px; text-overflow: ellipsis; overflow: hidden; } .magazine li { height: 100%; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #000;} .magazine li .thumb { border-radius: 20px; width: 100%; height: 100%; position: relative; overflow: hidden; } .magazine li .thumb img { width: 100%; display: block;} .magazine li:active .thumb img { opacity: 0.9; } .magazine li:active {box-shadow: none; } .main.app .pick_rec .list_box .list ul.magazine li~li { margin-top: 40px; } /* 메인 개편 */ .main.app .scroll_case .main_scroll .main_bar .category_section:first-child .header { margin-top: 12px;} .main.app .scroll_case .main_scroll .main_bar .private_section .header {} .main.app .scroll_case .main_scroll .main_bar .commentary_section .header {margin-bottom: 16px;} .main.app .scroll_case .main_scroll .main_bar .commentary_section .swiper {height: 400px;} .main.app .scroll_case .main_scroll .main_bar .leco_section .header {margin-bottom: 16px;} .main.app .scroll_case .main_scroll .main_bar .brand_section .header {margin-bottom: 16px;} .main.app .scroll_case .main_scroll .main_bar .earlyadopter_section .header .sub_tit{margin-bottom: 0;} .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-wrapper { } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide{ width: 300px; height: 384px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); border-radius: 20px; overflow: hidden; } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide > a {position: relative; width: 100%; display: block;} .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide > a > div {position: absolute; } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .thumb { } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .thumb img{ height: 384px; } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .gradient{ width: 100%; height: 384px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.30) 0%, rgba(0, 0, 0, 0.00) 46.7%); } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .pannel{padding: 16px 20px;} .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .pannel div{ font-weight: 700; line-height: 130%; font-style: normal; } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .pannel .sub_tit{ height: 72px; word-wrap:break-word; overflow: hidden; text-overflow: ellipsis; color: var(--grayscale-white, #FFF); display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; font-size: 24px; line-height: 150%; } .main.app .scroll_case .main_scroll .main_bar .slide_comment .swiper-slide .pannel .tit{ display: inline-block; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(2px); margin-bottom: 8px; color: #FFF; font-feature-settings: 'clig' off, 'liga' off; font-size: 12px; } .main.app .pick_rec .list_box .list ul li .renew_card{ border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .main.app .pick_rec .list_box .list ul li .renew_card .concept_img { height: 429ㅔ; overflow: hidden; border-radius: 20px 20px 0px 0px;} .main.app .pick_rec .list_box .list ul li .renew_card .content {padding: 20px 16px;} .main.app .pick_rec .list_box .list ul li .renew_card .content .brand{border-radius: 4px; display: inline;padding: 4px 8px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(2px); color: #FFF; font-size: 12px; font-style: normal; font-weight: 700; line-height: 130%; /* 15.6px */} .main.app .pick_rec .list_box .list ul li .renew_card .content .title {padding: 0; font-family: Pretendard; margin: 8px 0; color: var(--grayscale-black, #000); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 라인수 */ -webkit-box-orient: vertical; font-size: 24px;font-weight: 700; line-height: 150%; /* 36px */} .main.app .pick_rec .list_box .list ul li .renew_card .content .desc{ word-wrap: break-word; color: var(--grayscale-black, #000); font-family: Pretendard; font-size: 14px; font-style: normal; font-weight: 400; line-height: 150%; /* 21px */ } .main.app .pick_rec .list_box .list ul li .renew_card .link{ padding: 34px 16px 20px; } .main.app .pick_rec .list_box .list ul li .renew_card .link a{ padding: 20px 0; line-height: 20px; text-align: center; display: block; border-radius: 30px; background: var(--le-commend-blue, #4FC7FE); color: var(--grayscale-white, #FFF); font-family: Pretendard; font-size: 16px; font-style: normal; font-weight: 700; width: 100%; } .lv_red { background-color: #ff3c3c; color: #fff;} .lv_pink { background-color: #ff6d92; color: #fff; } .lv_orange { background-color: #ff6833; color: #fff; } .lv_purple { background-color: #8900fd; color: #fff; } .lv_blue { background-color: #1a9cff; color: #fff; } .lv_green { background-color: #16d91b; color: #fff; } .lv_yellow { background-color: #fdc000; color: #fff; } .lv_white { background-color: #fff; color: #abb4c4; } .main.app .title { padding: 20px 20px 30px; } .main.app .title .tit { font-size: 30px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #000; } .main.app .title .sub { margin-top: 10px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.38;letter-spacing: normal;color: #abb4c4; } .main.app .pick_rec { overflow: scroll; height: calc(100% - 60px); margin-top: 60px; padding-bottom: 80px; background-image: linear-gradient(to bottom, #fff 33%, #f7f5f5); } .main.app .pick_rec .list_box { margin-top: 30px; } .main.app .pick_rec .list_box .head { padding: 0 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .main.app .pick_rec .list_box .head .tit { font-size: 20px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box .list { margin-top: 20px; padding: 0 20px; } .main.app .pick_rec .list_box .list ul { } .main.app .pick_rec .list_box .list ul li { } .main.app .pick_rec .list_box .list ul li~li { margin-top: 24px; } .main.app .pick_rec .list_box .list ul li .card { border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .pick_rec .list_box .list ul li .card .head { width: 100%; padding: 10px 16px; display: flex; justify-content: start; align-items: center; } .main.app .pick_rec .list_box .list ul li .card .head .thumb { filter: drop-shadow( 0px 0px 3px #DEDEDE); width: 38px; height: 38px; display: flex; border-radius: 19px; overflow: hidden; } .main.app .pick_rec .list_box .list ul li .card .head .thumb img { object-fit: contain; } .main.app .pick_rec .list_box .list ul li .card .head .user { margin-left: 10px; font-size: 14px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box .list ul li .card .head .info { margin-left: 4px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .main.app .pick_rec .list_box .list ul li .card .slide { height: 300px; position: relative; } .main.app .pick_rec .list_box .list ul li .card .slide .swiper { height: 300px; } .main.app .pick_rec .list_box .list ul li .card .slide .swiper-slide { height: 300px; display: flex; background-color: #f0f4fa; } .main.app .pick_rec .list_box .list ul li .card .slide .swiper-slide img { object-fit: cover; width: 100%; height: auto; } .main.app .pick_rec .list_box .list ul li .card .slide .consumer_score { z-index: 1; position: absolute; top: 20px; right: 12px; } .main.app .pick_rec .list_box .list ul li .card .slide .consumer_score .top { position: relative; padding-left: 4px; padding-bottom: 8px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: 4px;text-align: center;color: #000; } .main.app .pick_rec .list_box .list ul li .card .slide .consumer_score .top:after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: calc(100% - 8px); height: 2px; background-color: rgba( 0, 0,0, .7); } .main.app .pick_rec .list_box .list ul li .card .slide .consumer_score .score { margin-top: 8px; font-size: 12px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: -0.5px;text-align: center;color: #000; } .main.app .pick_rec .list_box .list ul li .card .slide .swiper .swiper-pagination-bullet { margin:0 3px; width: 6px; height: 6px; border-radius: 3px; } .main.app .pick_rec .list_box .list ul li .card .slide .swiper .swiper-pagination-bullet-active { background-color: #000;} .main.app .pick_rec .list_box .list ul li .card .link { } .main.app .pick_rec .list_box .list ul li .card .link a { background-image: url(/resources/img/btn-forward-03-mid-wht-1-nor@3x.png); background-size: 14px 14px; background-repeat: no-repeat; background-position: right 14px center; font-size: 14px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff;display: block; padding: 13px 14px 13px 16px; background-color: #4fc7fe; } .main.app .pick_rec .list_box .list ul li .card .content { padding: 20px 16px 24px; } .main.app .pick_rec .list_box .list ul li .card .content .tit { font-size: 20px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box .list ul li .card .content .desc { margin-top: 10px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #abb4c4; } .main.app .pick_rec .list_box .list ul li .card .content .tag { margin-top: 20px; font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.43; letter-spacing: normal; color: #abb4c4; } .main.app .pick_rec .list_box~.list_box { margin-top: 80px; } .main.app .pick_rec .list_box.past { } .main.app .pick_rec .list_box.past .head { } .main.app .pick_rec .list_box.past .head .tit { } .main.app .pick_rec .list_box.past .head a { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.25;letter-spacing: normal;text-align: right;color: #b9c1d2; } .main.app .pick_rec .list_box.past .list { margin-top: 30px; position: relative; height: 314px; } .main.app .pick_rec .list_box.past .list .card { z-index: 3; position: absolute; top:50%; left: 20px; transform: translateY( -50%); width: 286px; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .pick_rec .list_box.past .list .card .head { padding: 10px 16px; justify-content: start; gap: 12px; } .main.app .pick_rec .list_box.past .list .card .head .thumb { filter: drop-shadow( 0px 0px 3px #DEDEDE); width: 38px; border-radius: 19px; overflow: hidden; height: 38px; } .main.app .pick_rec .list_box.past .list .card .head .thumb img { } .main.app .pick_rec .list_box.past .list .card .head .brand_name { font-size: 14px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box.past .list .card .head .user_info { margin-left: 10px; } .main.app .pick_rec .list_box.past .list .card .head .user_info .user { font-size: 14px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box.past .list .card .head .user_info .date { margin-top: 4px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .main.app .pick_rec .list_box.past .list .card .img { } .main.app .pick_rec .list_box.past .list .card .img img { } .main.app .pick_rec .list_box.past .list .card .desc { padding: 16px 16px 24px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .pick_rec .list_box.past .list .card_2step { z-index: 2; position: absolute; top:50%; right: 12vw; transform: translateY( -50%); width: 276px;height: 254px;opacity: 0.6;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .pick_rec .list_box.past .list .card_3step { z-index: 1; position: absolute; top:50%; right: 6vw; transform: translateY( -50%); width: 276px; height: 194px; opacity: 0.4; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .main.app .leco_life { overflow: scroll; height: calc(100% - 60px); margin-top: 60px; padding-bottom: 80px; background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5); } .main.app .leco_life .list_box { margin-top: 30px; } .main.app .leco_life .list_box .list { padding: 0 20px; } .main.app .leco_life .list_box .list .columns { column-width: auto; column-gap: 15px; /*column-count: 2;*/ display: flex; flex-wrap: wrap; } .main.app .leco_life .list_box .list .columns figure { width: calc(50% - 7.5px); display: inline-block; margin-bottom: 50px; } .main.app .leco_life .list_box .list .columns figure .thumb {box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; display: flex; } .main.app .leco_life .list_box .list .columns figure .thumb img { object-fit: contain; width: 100%; height: auto; } .main.app .leco_life .list_box .list .columns figure .info { margin-top: 20px; text-align: center; } .main.app .leco_life .list_box .list .columns figure .info .cate { font-size: 16px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #4fc7fe; } .main.app .leco_life .list_box .list .columns figure .info .desc { margin-top: 10px; font-size: 18px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.22;letter-spacing: normal;text-align: center;color: #000; } .main.app .leco_life .list_box .list .columns figure .info .mark { display: inline-block; font-size: 10px; font-weight: 900;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;text-align: center;color: #fff;margin-top: 10px; padding: 4px 10px 6px;border-radius: 15px;box-shadow: -2px -4px 10px 0 #fff; } .main.app .leco_life .list_box .list .columns figure .info .mark.rainbow { background-image: linear-gradient(107deg, #ff7751 0%, #ac3bff 35%, #5cc2ff 68%, #62ff7c); } .main.app .leco_life .list_box .list .columns figure .info .mark.purple { background-color: #8900fd; } .main.app .leco_life .list_box .list .columns figure .info .mark.red { background-color: #ff5252; color: #fff !important; } .main.app .leco_life .list_box .list .columns figure .info .mark.green { background-color: #61dd64; } .main.app .leco_life .list_box .list .columns figure .info .mark.white { background-color: #fff; color: #abb4c4; } .main.app .leco_life .list_box .list .columns figure .info .mark.orange { background-color: #ff6833; } .main.app .leco_life .list_box .list .columns figure .info .mark.blue { background-color: #42adff; } .main.app .leco_life .list_box .list .columns figure .info .mark.pink { background-color: #ff7699; } .main.app .leco_life .list_box .list .columns figure .info .mark.yellow { background-color: #fdc000; } .main.app .leco_life .sector_list { margin-bottom: 40px; } .main.app .leco_life .sector_list .title { font-size: 20px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .main.app .leco_life .sector_list .list { } .main.app .leco_life .sector_list .list > ul { padding: 0 20px; width: 100%; display: flex; justify-content: space-between; align-items: start; } .main.app .leco_life .sector_list .list > ul > li { width: 32%; } .main.app .leco_life .sector_list .list ul li .thumb_place { position: relative; display: flex; justify-content: center; } .main.app .leco_life .sector_list .list ul li .thumb_place .mark { position: absolute; top: 0; left: 0; } .main.app .leco_life .sector_list .list ul li .thumb_place .mark img { width: 30px; height: 33px; } .main.app .leco_life .sector_list .list ul li .thumb_place .thumb {box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); width: 80px; height: 80px; display: flex; border-radius: 50%; overflow: hidden; } .main.app .leco_life .sector_list .list ul li .thumb_place .thumb img { object-fit: contain; } .main.app .leco_life .sector_list .list ul li .info_place { width: 100%; margin-top: 14px; text-align: center; } .main.app .leco_life .sector_list .list ul li .info_place .nick { word-wrap: break-word; -webkit-line-clamp: 2; display: -webkit-box; width: 100%; -webkit-box-orient: vertical;text-overflow: ellipsis; overflow: hidden; max-height: 32px; font-size: 14px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;text-align: center;color: #000; } .main.app .leco_life .sector_list .list ul li .info_place .follower { display: inline-block; margin: 8px auto 0; padding: 5px 10px; border-radius: 10px; box-shadow: 2px 4px 10px 0 rgba(60, 67, 72, 0.16); background-color: #000; font-size: 10px; font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .main.app .leco_life .sector_list .list ul li.active:after { z-index: 10; left: 50%; content: ""; position: absolute; border-bottom: 24px solid transparent; border-top: 24px solid transparent; border-left: 24px solid #fff; border-right: 24px solid transparent; } .main.app.creator { overflow: auto; } .main.app.creator .body { position: static; } .main.app.creator .body .leco_life { overflow: auto; height: auto; } .small_pop { z-index: 10; margin-top: 24px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); border-radius: 15px; position: absolute; width: calc(100vw - 40px); left: 20px; background-color: #fff; } .small_pop .header { display: flex; width: 100%; padding: 10px 10px 10px 16px; justify-content: space-between; align-items: center; } .small_pop .header .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.13;letter-spacing: normal;color: #000; } .small_pop .header button.sm_pop_close_btn { width: 30px; height: 30px; background-image: url(/resources/img/BTN_POPUP_CLOSE_01_BK_1_NOR_@3x.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .small_pop .sm_body { position: static; padding: 4px 16px 16px; } .small_pop .sm_body ul { display: block; } .small_pop .sm_body ul li { width: 100%; display: flex; gap: 12px; justify-content: start; align-items: center; } .small_pop .sm_body ul li~li { margin-top: 16px;} .small_pop .sm_body ul li .thumb { width: 114px; height: 64px; display: flex; overflow: hidden; align-items: center; justify-content: center; } .small_pop .sm_body ul li .thumb img { object-fit: cover; width: 100%; height: auto; } .small_pop .sm_body ul li .info { width: calc(100% - 126px); } .small_pop .sm_body ul li .info .tit_name { word-wrap: break-word; -webkit-line-clamp: 2; display: -webkit-box; width: 100%; -webkit-box-orient: vertical;text-overflow: ellipsis; overflow: hidden; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .small_pop .sm_body ul li .info .views { margin-top: 6px; font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #b9c1d2; } .main.app .brand_know { overflow: scroll; height: calc(100% - 60px); margin-top: 60px; padding-bottom: 80px; background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5); } .main.app .brand_know .list_box { } .main.app .brand_know .list_box .tab { padding: 20px; } .main.app .brand_know .list_box .tab ul { display: flex; column-gap: 10px; justify-content: start; align-items: center; } .main.app .brand_know .list_box .tab ul li { padding: 14px 21px 14px 20px;border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff;font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #000; } .main.app .brand_know .list_box .tab ul li.active { padding: 14px 21px 14px 20px;border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #000;font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #fff; } .main.app .brand_know .list_box .list { margin-top: 30px; padding: 0 20px; } .main.app .brand_know .list_box .list ul { } .main.app .brand_know .list_box .list ul li { } .main.app .brand_know .list_box .list ul li .card { border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .main.app .brand_know .list_box .list ul li .card .prd_img { display: flex;background-color: #000000; justify-content: center; align-items: center; width: 100%; height: 330px; border-top-left-radius: 20px; border-top-right-radius: 20px; overflow: hidden; position: relative; } .main.app .brand_know .list_box .list ul li .card .prd_img .mark { padding: 5px 10px; border-radius: 10px; background-color: rgba( 0, 0,0, .8); position: absolute; top: 16px; left: 16px; font-size: 10px; font-weight: 800; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; color: #fff; } .main.app .brand_know .list_box .list ul li .card .prd_img .tit {width: 100%; position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 24px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .main.app .brand_know .list_box .list ul li .card .prd_img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.7; } .main.app .brand_know .list_box .list ul li .card .content { padding: 16px 16px 24px; } .main.app .brand_know .list_box .list ul li .card .content .ment { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.22;letter-spacing: normal;color: #000; } .main.app .brand_know .list_box .list ul li .card .content .desc { margin-top: 8px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #abb4c4; } .main.app .brand_know .list_box .list ul li~li { margin-top: 24px; } .main.app.new .main_img { aspect-ratio: 1/1.13; overflow: hidden; width: 100%; } .main.app.new .main_img img { width: 100%; height: 100%; object-fit: cover; } .main.app.new .scroll_case .main_scroll { top: 89vw;} .main.app.new .scroll_case .main_scroll .main_bar { background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); } .prd_list_section { } .main.app.new .scroll_case .main_scroll .main_bar .prd_list_section .header { position: relative; padding: 40px 20px 14px; } .main.app.new .scroll_case .main_scroll .main_bar .prd_list_section .header .select { display: flex; align-items: center; justify-content: end; position: absolute; right: 14px; top:36px; } .main.app.new .scroll_case .main_scroll .main_bar .prd_list_section .header .select .item { font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .main.app.new .scroll_case .main_scroll .main_bar .prd_list_section .header .select .icon { display: inline-flex; width: 26px; height: 26px; } .main.app.new .scroll_case .main_scroll .main_bar .prd_list_section .header .select .icon img { object-fit: contain; } .main.app.new .main_scroll .main_bar .list ul li a .prd_info .info_foot { margin-top: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .main.app.new .main_scroll .main_bar .list ul li a .prd_info .info_foot .price { display: flex; justify-content: start; align-items: center; } .main.app.new .main_scroll .main_bar .list ul li a .prd_info .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .main.app.new .main_scroll .main_bar .list ul li a .prd_info .info_foot .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .main.app.new .main_scroll .main_bar .list ul li a .prd_info .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } .prd_list_section .header .tit { } .prd_list_section .header .sub_tit { } .prd_list_section .header .prd_count { position: absolute; right: 20px; top: 42px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 130%;letter-spacing: normal;text-align: right;color: #000; } .prd_list_section .header .prd_count .count { } .prd_list_section .list { padding: 20px 20px 60px; } .prd_list_section .list .head { margin-bottom: 30px; display: flex; padding: 12px 0 16px; border-bottom: 2px solid #000; width: 100%; justify-content: space-between; align-items: center;} .prd_list_section .list .head .tit { font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .prd_list_section .list .head .prd_count { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .prd_list_section .list .brand_sec_tit { margin-bottom: 30px; padding: 12px 0 18px; display: flex; width: 100%; justify-content: space-between; align-items: center; border-bottom: 2px solid #000 ; } .prd_list_section .list .brand_sec_tit .tit { font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .prd_list_section .list .brand_sec_tit .amount { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .prd_list_section .list ul~.brand_sec_tit { margin-top: 50px; } .prd_list_section .list ul { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .prd_list_section .list ul li { width: calc(50% - 7px); aspect-ratio: 1/1.2375; padding: 10px 14px 16px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .prd_list_section .list ul li a { display: block; } .prd_list_section .list ul li a .thumb { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; aspect-ratio: 1/1; margin: 0 auto; overflow: hidden; } .prd_list_section2 .list ul li a .thumb > .icon { position: absolute; top: 4px; right: -8px; width: 32px; height: auto; display: flex; flex-direction: column; gap: 2px;} .prd_list_section2 .list ul li a .thumb > .icon img { width: 100%; height: 100%; object-fit: contain; } .prd_list_section .list ul li a .prd_info { margin-top: 14px; } .prd_list_section .list ul li a .prd_info .brand_nm { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .prd_list_section .list ul li a .prd_info .prd_tit { margin-top: 6px; height: 32px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .Lclub_btn { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite; transition: .3s all; position: absolute; z-index: 100; width: 230px; height: 56px; bottom: 72px; right: -136px; padding: 18px 10px 18px 26px; border-top-left-radius: 30px;border-bottom-left-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: rgba(255, 73, 49, 0.9); } .Lclub_btn.lcmd { background-color: rgba(24, 239, 153, 0.9) } .Lclub_btn.active { animation: none; transition: .3s all; } .Lclub_btn .inner { display: flex; width: 100%; justify-content: space-between; align-items: center; } .Lclub_btn .inner .bi { } .Lclub_btn .inner .bi img { } .Lclub_btn .inner .link { } .Lclub_btn .inner .link a { color: #fff; display: flex; justify-content: end; align-items: center; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.67;letter-spacing: normal; row-gap: 4px; } .Lclub_btn .inner .link a .icon { display: flex; align-items: center; } .Lclub_btn .inner .link a .icon img { } @keyframes bounce { 0% { right: -136px; } 60% {right: -126px;} 100% { right: -136px; } } /* 메인화면 끝 20221109 et03 */ /* l.club 20230609 et03 */ .app.lclub { position: absolute; top: 60px; height: calc(100% - 60px); width: 100%; overflow: hidden; } .app.lclub .head { margin-bottom: 10px; } .app.lclub .head .radio { padding: 10px 20px; } .app.lclub .head .radio ul { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub .head .radio ul li { padding: 10px 17px 10px 16px; border-radius: 30px; border: solid 1px #e1e5ed; background-color: #fff;font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #8992a3; } .app.lclub .head .radio ul li.active { background-color: #000; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #fff; } .app.lclub .head .filter { width: 100%; padding: 12px 14px 12px 20px; height: 50px; } .app.lclub .head .filter ul { width: 100%; display: flex; justify-content: end; } .app.lclub .head .filter ul li { display: block; position: relative;} .app.lclub .head .filter ul li~li { margin-left: 20px; } .app.lclub .head .filter ul li~li:before {content: ''; top: 6px; left: -12px; position: absolute; width: 1px; height: 14px; background-color: #d4d8df;} .app.lclub .head .filter ul li button { background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .app.lclub .head .filter ul li button:hover { color: #f44; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub .head .filter ul li .filter_btn { background-image: url(/resources/img/btn-filter-01-nor@3x.png); } .app.lclub .head .filter.history { width: 100%; justify-content: space-between; align-items: center; } .app.lclub .head .filter .history_filter { white-space: nowrap; display: block; background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;color: #000; } .app.lclub .head .filter .history_filter:hover { color: #f44; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub .recruit.list { padding: 10px 20px 80px; height: calc(100% - 116px); overflow-y: scroll; } .app.lclub .recruit.list ul { } .app.lclub .recruit.list ul li { height: 283px; width: 100%; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub .recruit.list ul li~li { margin-top: 24px; } .app.lclub .recruit.list ul li .thumb { display: flex; width: 100%; height:200px; overflow: hidden; } .app.lclub .recruit.list ul li .thumb img { width: 100%; height: auto; object-fit: cover;} .app.lclub .recruit.list ul li .info { padding: 18px 16px 26px; } .app.lclub .recruit.list ul li .info .tit {font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .app.lclub .recruit.list ul li .info .bott { margin-top: 5px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .app.lclub .recruit.list ul li .info .desc { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 20px;letter-spacing: normal;color: #abb4c4; } .app.lclub .recruit.list ul li .info .mem_count { background: url(/resources/img/ic-l-membership-countingnumb@3x.png) left center; background-size: 20px 20px; background-repeat: no-repeat; padding-left: 24px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 20px;letter-spacing: normal;text-align: right;color: #000; } .app.lclub .recruit { display: none; } .app.lclub .history.list { padding: 10px 20px 80px; height: calc(100% - 116px); overflow-y: scroll; } .app.lclub .history.list ul { } .app.lclub .history.list ul li { height: 283px; width: 100%; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub .history.list ul li~li { margin-top: 24px; } .app.lclub .history.list ul li .thumb { display: flex; width: 100%; height:200px; overflow: hidden; } .app.lclub .history.list ul li .thumb img { width: 100%; height: auto; object-fit: cover;} .app.lclub .history.list ul li .info { padding: 18px 16px 26px; } .app.lclub .history.list ul li .info .tit {font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .app.lclub .history.list ul li .info .bott { margin-top: 5px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .app.lclub .history.list ul li .info .desc { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 20px;letter-spacing: normal;color: #abb4c4; } .app.lclub .history.list ul li .info .status { padding: 8px 10px; border-radius: 25px;font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;} .app.lclub .history.list ul li .info .status.ing { color: #0fdf8b; border: solid 1px #0fdf8b; } .app.lclub .history.list ul li .info .status.secret { color: #ff5039; border: solid 1px #ff5039; } .app.lclub .history.list ul li .info .status.done { } .app.lclub .history { display: none; } .app.lclub .myclub.list { padding: 10px 20px 80px; height: calc(100% - 116px); overflow-y: scroll; } .app.lclub .myclub.list ul { } .app.lclub .myclub.list ul li { height: 283px; width: 100%; overflow: hidden; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub .myclub.list ul li~li { margin-top: 24px; } .app.lclub .myclub.list ul li .thumb { display: flex; width: 100%; height:200px; overflow: hidden; } .app.lclub .myclub.list ul li .thumb img { width: 100%; height: auto; object-fit: cover;} .app.lclub .myclub.list ul li .info { padding: 18px 16px 26px; } .app.lclub .myclub.list ul li .info .tit {font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .app.lclub .myclub.list ul li .info .bott { margin-top: 5px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .app.lclub .myclub.list ul li .info .desc { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 20px;letter-spacing: normal;color: #abb4c4; } .app.lclub .myclub.list ul li .info .status { padding: 8px 10px; border-radius: 25px;font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;} .app.lclub .myclub.list ul li .info .status.ing { color: #0fdf8b; border: solid 1px #0fdf8b; } .app.lclub .myclub.list ul li .info .status.secret { color: #ff5039; border: solid 1px #ff5039; } .app.lclub .myclub.list ul li .info .status.done { } .app.lclub .myclub { display: none; } .app.lclub_detail_01 { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 0; position: relative; } .app.lclub_detail_01 .center_content { position: absolute; width: calc(100% - 60px); top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; } .app.lclub_detail_01 .center_content .logo { width: 80px; height: 80px; display: flex; overflow: hidden; margin: 0 auto; } .app.lclub_detail_01 .center_content .logo img { border-radius: 50%;border-radius: 559px; width: 100%; height: 100%; } .app.lclub_detail_01 .center_content .club_name { margin-top: 14px; font-size: 30px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_01 .center_content .club_name~.club_desc_tit { margin-top: 40px; font-size: 20px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;margin-bottom: 20px; } .app.lclub_detail_01 .center_content .club_desc {word-wrap: break-word; white-space: pre-wrap; margin-top: 14px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #fff; } .recruit_bottom_btn { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); width: calc(100% - 60px); z-index: 50; } .recruit_bottom_btn button { padding: 22px 30px; width: 100%; height: 60px; border-radius: 30px; font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .recruit_bottom_btn button~button { margin-top: 20px; } .recruit_bottom_btn button.wt_back { background-color: #fff; color: #000; } .recruit_bottom_btn button.wt_line { border: solid 2px #fff; background: transparent; color: #fff; } .lclub_detail_01 .dim{background-color: #000; width: 100%; height: 100%; opacity: 0.3;} .app.lclub_detail_02 { padding: 60px 20px; } .app.lclub_detail_02 .write { padding-top: 24px; } .app.lclub_detail_02 .write .sec_01 { } .app.lclub_detail_02 .write .title { font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_02 .write .textarea { margin-top: 20px; } .app.lclub_detail_02 .write .sec_01 .textarea textarea { resize: none; border: 0; width: 100%; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #ff5039;height: 200px; padding: 16px 21px 62px 20px;border-radius: 20px;background-color: #f8fafc; } .app.lclub_detail_02 .write .sec_02 .textarea textarea { resize: none; width: 100%; padding: 16px 20px;border-radius: 20px;border: solid 1px #e1e5ed;background-color: #fff;font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #000; height: 222px; } .app.lclub_detail_02 .write .textarea textarea::placeholder {font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #cad4e1;} .app.lclub_detail_02 .write .sec_02 { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e1e5ed; } .app.lclub_detail_02 .bottom_btn { position: absolute; margin-top: 20px; right: 20px; display: flex; width: calc(100% - 60px); justify-content: end; align-items: center; } .app.lclub_detail_02 .bottom_btn button { padding: 22px 30px;border-radius: 30px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .app.lclub_detail_02 .bottom_btn button.submit_done_btn { padding: 22px 30px;border-radius: 30px; background-color: #4fc7fe; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .app.lclub_detail_03 { position: absolute; top: 60px; height: calc(100% - 60px); width: 100%; overflow: hidden; } .app.lclub_detail_03 .head { margin-bottom: 10px; } .app.lclub_detail_03 .head .radio { padding: 10px 20px; height: 56px; } .app.lclub_detail_03 .head .radio ul { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub_detail_03 .head .radio ul li { padding: 10px 16px; height: 36px; border-radius: 30px; border: solid 1px #e1e5ed; background-color: #fff;font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .app.lclub_detail_03 .head .radio ul li.active { background-color: #000; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #fff; } .app.lclub_detail_03 .scroll_case { z-index: 2; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .app.lclub_detail_03 .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .app.lclub_detail_03 .scroll_case .main_scroll { pointer-events: auto; position: absolute; top: 89vw; height: 100%; width: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar { min-height: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; height: auto; width: 100%; padding-bottom: 100px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items { padding: 40px 30px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section { } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section~.section { margin-top: 50px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .headline { width: 100%; display: flex; justify-content: space-between; align-items: center; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .headline .tit { font-size: 20px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .headline .opt { display: flex; align-items: center; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .headline .opt a { padding-bottom: 3px; border-bottom: 1px solid #b9c1d2;; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #b9c1d2; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content { margin-top: 20px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.creator ul { display: flex; width: 100%;flex-flow: wrap; gap: 10px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.creator ul li { position: relative; align-items: center; border-radius: 50%; display: inline-flex; width: calc(20% - 8px); height: auto; aspect-ratio: 1/1; border: solid 2px #f0f4fa; overflow: hidden; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.creator ul li:last-child:before { content: ''; width: 100%; height: 100%; opacity: 0.2; background-color: #000; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.creator ul li:last-child:after { content: '+13'; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb { overflow: hidden; width: 100%; height: auto; aspect-ratio: 7.1/4; border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li { display: flex; height: auto; aspect-ratio: 16/9; overflow: hidden; position: relative; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(1) { float: left; width: 33.33%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(3) { float: left; width: 33.33%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(2) { float: right; width: 66.66%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(4) { float: left; width: 33.33%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(5) { float: left; width: 33.33%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li:nth-child(6) { float: left; width: 33.33%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li .inner_info { position: absolute; background-color: rgba( 0, 0,0, .7); width: 100%; display: flex; height: 100%; justify-content: center; align-items: center; font-size: 20px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb:after { clear: both; content: ''; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .thumb li img { object-fit: cover; width: 100%; height: auto; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .button { margin-top: 20px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission .button a { display: block; padding: 22px 30px;border-radius: 30px;background-color: #000;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission.empty { padding: 50px; width: 100%; height: 178px; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #f0f4fa; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission.empty .ment { font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000;} .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission.empty .button { margin-top: 20px; width: 100%; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.mission.empty .button a { font-size: 14px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 15px 20px; width: 100%;border-radius: 30px;background-color: #000; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote .pannel {padding: 28px 20px 20px 28px; border-radius: 20px;background-image: linear-gradient(106deg, #09fa99 3%, #45ceff 96%);} .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote .pannel .desc { white-space: pre-line; font-size: 20px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote .pannel .link { margin-top: 38px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote .pannel .link a { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #fff; display: flex; width: 100%; justify-content: end; align-items: center; column-gap: 10px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote .pannel .link a .icon { display: inline-flex; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote.empty .pannel { padding: 50px; height: 178px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #f0f4fa; background-image: none; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote.empty .pannel .icon { width: 40px; height: 40px; display: flex; margin: 0 auto; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote.empty .pannel .icon img { object-fit: cover; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.vote.empty .pannel .ment { margin-top: 10px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand { } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul {display: flex; flex-wrap: wrap; gap:10px;} .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li { width:calc(50% - 5px); height: 224px; padding: 10px 14px 16px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .thumb { overflow: hidden; width: 100%; height: 106px; display: flex; align-items: center; justify-content: center; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .thumb img { object-fit: contain; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .info { margin-top: 14px; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .info .tit { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .info .desc { margin-top: 6px; height: 32px; overflow: hidden; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000;} .app.lclub_detail_03 .scroll_case .main_scroll .main_bar .items .section .content.brand ul li .info .pri { margin-top: 12px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .body .slide_banner { height: calc(73vw + 90px); } .app.lclub_detail_03 .body .slide_banner img { width: 100%;} .app.lclub_detail_03 .body .slide_banner .swiper{height: 100%} .app.lclub_detail_03 .body .slide_banner .swiper .swiper-slide { display: flex; align-items: center; justify-content: center; } .app.lclub_detail_03 .body .slide_banner .swiper .swiper-slide img { width: 100%;} .app.lclub_detail_03 .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets, .app.lclub_detail_03 .body .slide_banner .swiper-pagination-bullets.swiper-pagination-horizontal { text-align: center; bottom: 50px; } .app.lclub_detail_03 .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .app.lclub_detail_03 .body .slide_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 6px; height: 6px; transition: .3s; opacity: 0.6; background-color: #fff; } .app.lclub_detail_03 .body .slide_banner .swiper-pagination-bullet-active { width: 6px; border-radius: 3px; background: #fff; opacity: 1 !important; } .app.lclub_detail_03 .lclub_main { display: none; } .app.lclub_detail_03 .lclub_mission { display: none; position: absolute; top: 56px; left: 0; width: 100%; height: calc(100% - 56px); overflow-y: scroll; } .app.lclub_detail_03 .lclub_mission .list { padding-bottom: 100px; } .app.lclub_detail_03 .lclub_mission .list ul { } .app.lclub_detail_03 .lclub_mission .list ul li { padding: 30px 30px 20px; } .app.lclub_detail_03 .lclub_mission .list ul li .title { } .app.lclub_detail_03 .lclub_mission .list ul li .title .tit { font-size: 20px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .lclub_mission .list ul li .title .info { justify-content: space-between; display: flex; width: 100%; margin-top: 2px; align-items: center; } .app.lclub_detail_03 .lclub_mission .list ul li .title .info .date { font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_03 .lclub_mission .list ul li .title .info .status { font-size: 10px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right; padding: 6px 8px 6px 9px; border-radius: 25px; border: solid 1px; } .app.lclub_detail_03 .lclub_mission .list ul li .title .info .status.yet { border: solid 1px #ff5039; color: #ff5039; } .app.lclub_detail_03 .lclub_mission .list ul li .title .info .status.done { border: solid 1px #0fdf8b; color: #0fdf8b; } .app.lclub_detail_03 .lclub_mission .list ul li .content { margin-top: 20px; display: flex; width: 100%; height: auto; aspect-ratio: 6/5; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #ff7878; } .app.lclub_detail_03 .lclub_mission .list ul li .content img { object-fit: cover; width:100%;} .app.lclub_detail_03 .lclub_collect { display: none; position: absolute; top: 56px; left: 0; width: 100%; height: calc(100% - 56px); overflow-y: scroll; } .app.lclub_detail_03 .lclub_collect .head { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 66px; padding: 27px 20px 11px; } .app.lclub_detail_03 .lclub_collect .head:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 2px; width: calc(100% - 40px); background-color: #000; transform: translateX(-50%); } .app.lclub_detail_03 .lclub_collect .head .tit { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .lclub_collect .head .opt { display: flex; align-items: center; justify-content: end; position: relative; } .app.lclub_detail_03 .lclub_collect .head .opt button~button:before { content: ''; padding-left: 12px; margin-left: 12px; border-left: 1px solid #d4d8df;} .app.lclub_detail_03 .lclub_collect .head .opt .sort_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-select-02-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_03 .lclub_collect .head .opt .sort_btn:hover, .app.lclub_detail_03 .lclub_collect .head .opt .sort_btn:active { color: #ff5039; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub_detail_03 .lclub_collect .head .opt .filter_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-filter-01-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_03 .lclub_collect .head .opt .filter_btn:hover, .app.lclub_detail_03 .lclub_collect .head .opt .filter_btn:active { color: #ff5039; background-image: url(/resources/img/btn-filter-02-sel@3x.png); } .app.lclub_detail_03 .lclub_collect .list {padding: 20px;} .app.lclub_detail_03 .lclub_collect .list ul { display: flex; width: 100%; justify-content: start; gap: 2px; flex-wrap: wrap; } .app.lclub_detail_03 .lclub_collect .list ul li { width: 100%; height: 204px; background-color: #ffa4a4; } .app.lclub_detail_03 .lclub_collect .list ul li.one {} .app.lclub_detail_03 .lclub_collect .list ul li.two { } .app.lclub_detail_03 .lclub_act { display: none; position: absolute; top: 56px; left: 0; width: 100%; height: calc(100% - 56px); overflow-y: scroll; } .app.lclub_detail_03 .lclub_act .head { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 66px; padding: 27px 20px 11px; } .app.lclub_detail_03 .lclub_act .head:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 2px; width: calc(100% - 40px); background-color: #000; transform: translateX(-50%); } .app.lclub_detail_03 .lclub_act .head .tit { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .lclub_act .head .opt { display: flex; align-items: center; justify-content: end; position: relative; } .app.lclub_detail_03 .lclub_act .head .opt .sort_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-select-02-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_03 .lclub_act .head .opt .sort_btn:hover { color: #ff5039; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub_detail_03 .lclub_act .list {padding: 20px 20px 100px;} .app.lclub_detail_03 .lclub_act .list ul { display: flex; width: 100%; justify-content: start; row-gap: 30px; flex-wrap: wrap; } .app.lclub_detail_03 .lclub_act .list ul li { width: calc(50% - 7px); background-color: #fff; } .app.lclub_detail_03 .lclub_act .list ul li:nth-child(2n) { margin-left: 14px; } .app.lclub_detail_03 .lclub_act .list ul li .act_info { width: 100%; height: auto; overflow: hidden; position: relative; aspect-ratio: 12/13; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #383737; } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head { position: absolute; width: 100%; padding: 10px 10px 10px 14px; display: flex; justify-content: space-between; align-items: center; } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head .type { } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head .type span { font-size: 10px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff;display: none; padding: 6px 8px;border-radius: 25px;border: solid 1px #fff;background-color: rgba(0, 0, 0, 0.1); } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head .opt { width: 30px; height: 30px; background-position:center center; background-repeat: no-repeat; background-size: cover; background-image: url(/resources/img/btn-option-2-01-nor@3x.png); } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head .opt:hover { background-image: url(/resources/img/btn-option-2-02-sel@3x.png);} .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_head .opt img { } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_images {width: 100%; display: flex; height: 100%; align-items:center; } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_images img {width: 100%; height: 100%; object-fit: cover; } .app.lclub_detail_03 .lclub_act .list ul li .act_info .act_desc { display: -webkit-box; word-wrap: break-word;-webkit-line-clamp: 5;-webkit-box-orient: vertical; position: absolute; left: 14px; bottom: 20px; width: calc(100% - 28px); max-height: 90px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #fff; } .app.lclub_detail_03 .lclub_act .list ul li .act_info .img_count { position: absolute; bottom: 8px; right: 8px; width: 28px; height: 28px; overflow: hidden; padding: 8px 0; border-radius: 25px; background-color: rgba(0, 0, 0, 0.7); font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_03 .lclub_act .list ul li .act_tit { margin-top: 14px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .app.lclub_detail_03 .lclub_act .list ul li .act_date { margin-top: 10px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_03 .lclub_act .list ul li.contents { } .app.lclub_detail_03 .lclub_act .list ul li.reply { } .app.lclub_detail_03 .lclub_act .list ul li.write { } .app.lclub_detail_03 .lclub_act .list ul li.delete_post{position: relative;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_info{ } .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_info .act_head { display: none;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_info::before{transform: translate(-50%, -50%); left: 50%; top: 50%; line-height: 18px; font-size: 12px; border-radius: 10px; padding: 10px; background-color: rgba(56, 55, 55, 0.9); text-align: center; position: absolute; white-space: pre; content: "원글이\A삭제되었습니다."; display: inline; color: white; z-index: 100; opacity: 1;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_info {background-color: rgba(56, 55, 55, 0.5) !important; box-shadow: none; } .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_images{ opacity: 0.7;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_desc{ opacity: 0.7;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_tit{opacity: 0.3;} .app.lclub_detail_03 .lclub_act .list ul li.delete_post .act_date{opacity: 0.3;} .app.lclub_detail_03 .lclub_act .list ul li.contents .act_info .act_desc { display: none; } .app.lclub_detail_03 .lclub_act .list ul li.reply .act_info .act_images, .app.lclub_detail_03 .lclub_act .list ul li.reply .act_info .img_count { display: none; } .app.lclub_detail_03 .lclub_act .list ul li.write .act_info .act_images, .app.lclub_detail_03 .lclub_act .list ul li.write .act_info .img_count { display: none; } .app.lclub_detail_03 .lclub_act .list ul li.contents .act_info .act_head .type .type_con { display: inline-block; } .app.lclub_detail_03 .lclub_act .list ul li.reply .act_info .act_head .type .type_rep { display: inline-block; } .app.lclub_detail_03 .lclub_act .list ul li.write .act_info .act_head .type .type_wri { display: inline-block; } .mention { color: #4fc7fe !important; } .app.lclub_detail_04 { position: absolute; top: 60px; height: calc(100% - 60px); width: 100%; overflow: hidden; } .app.lclub_detail_04 .head { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 66px; padding: 27px 20px 11px; } .app.lclub_detail_04 .head:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 2px; width: calc(100% - 40px); background-color: #000; transform: translateX(-50%); } .app.lclub_detail_04 .head .tit { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_04 .head .filter { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-select-02-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_04 .head .filter:hover, .app.lclub_detail_04 .head .filter:active { color: #ff5039; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub_detail_04 .body { position: absolute; top: 66px; height: calc(100% - 66px); width: 100%; overflow-y: scroll; } .app.lclub_detail_04 .body .list { padding-bottom: 100px; } .app.lclub_detail_04 .body .list ul {} .app.lclub_detail_04 .body .list ul li { align-items: center; column-gap: 16px; position: relative; padding: 20px; display: flex; width: 100%; justify-content: start; } .app.lclub_detail_04 .body .list ul li:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 1px; width: calc(100% - 40px); background-color: #e1e5ed; transform: translateX(-50%); } .app.lclub_detail_04 .body .list ul li .thumb { display: flex; width: 70px; height: 70px; border: solid 2px #f0f4fa; overflow: hidden; border-radius: 50%; box-shadow: 0 2px 6px 0 rgba(60, 67, 72, 0.26);align-items: center; } .app.lclub_detail_04 .body .list ul li .thumb img { object-fit: cover;width: 100%; } .app.lclub_detail_04 .body .list ul li .info { } .app.lclub_detail_04 .body .list ul li .info .cre_name { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_04 .body .list ul li .info .opt { margin-top: 8px; display: flex; width: 100%; justify-content: start; align-items: center; column-gap: 8px; } .app.lclub_detail_04 .body .list ul li .info .opt .tag { display: block; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #b9c1d2;padding: 6px 8px;border-radius: 25px;border: solid 1px #b9c1d2; } .app.lclub_detail_05 { position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); overflow-y: scroll; } .app.lclub_detail_05 .content {} .app.lclub_detail_05 .content img { width: 100%; } .lclub_bottom_btn { position: fixed; bottom: 20px; width: 100%; padding: 0 20px; display: flex; column-gap: 10px; justify-content: space-between; align-items: center; } .lclub_bottom_btn button { width: 100%; padding: 22px 20px; border-radius: 30px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; text-align: center; } .lclub_bottom_btn button.bk_back { background-color: #000; color: #fff; } .lclub_bottom_btn button.wt_back { background-color: #fff; color: #000; } .lclub_bottom_btn button.period_end { box-shadow: none !important; color: #DEDEE0 !important; } .app.lclub_detail_06 { position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); overflow-y: scroll; } .app.lclub_detail_06 .section { padding: 30px 20px; position: relative; } .app.lclub_detail_06 .section~.section:before {content: ''; position: absolute; width: calc(100% - 40px); height: 1px; background-color: #e1e5ed; top: 0; left: 50%; transform: translateX(-50%); } .app.lclub_detail_06 .section .tit { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_06 .section .sub { margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_06 .section .content { margin-top: 20px; } .app.lclub_detail_06 .section .content .textarea { } .app.lclub_detail_06 .section .content .textarea textarea { width: 100%; border: 0; resize: none; white-space: pre-line; font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #ff5039;padding: 16px 20px; height: 156px; border-radius: 20px; background-color: #f8fafc; } .app.lclub_detail_06 .section .content .type_tab { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub_detail_06 .section .content .type_tab .radio { } .app.lclub_detail_06 .section .content .type_tab .radio input { display: none; width: 0; height: 0; position: absolute; top: 0; left: 0; } .app.lclub_detail_06 .section .content .type_tab .radio label { padding: 15px 14px; border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .app.lclub_detail_06 .section .content .type_tab .radio input:checked + label { background-color: #000; color: #fff; } .app.lclub_detail_06 .section .content .text { } .app.lclub_detail_06 .section .content .text input { text-overflow: ellipsis; } .app.lclub_detail_06 .bottom_btn { padding: 30px 20px 0; position: relative; } .app.lclub_detail_06 .bottom_btn:before {content: ''; position: absolute; width: calc(100% - 40px); height: 1px; background-color: #e1e5ed; top: 0; left: 50%; transform: translateX(-50%); } .app.lclub_detail_06 .bottom_btn button { width: 100%; font-size: 16px;padding: 22px 20px; border-radius: 30px;background-color: #4fc7fe;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .app.lclub_detail_06 .section .content .file_upload { column-gap: 12px; display: flex; width: 100%; justify-content: start; align-items: center; } .app.lclub_detail_06 .section .content .file_upload .file { width: 90px; height: 90px; } .app.lclub_detail_06 .section .content .file_upload .file input { display: none; width: 0; height: 0; top: 0; position: absolute; left: 0; } .app.lclub_detail_06 .section .content .file_upload .file label { width: 90px; height: 90px; background-image: url(/resources/img/btn-add-photo-nor@3x.png); background-size: cover; background-position: center center; background-repeat: no-repeat; border-radius: 18px; overflow: hidden; } .app.lclub_detail_06 .section .content .file_upload .file label:hover { background-image: url(/resources/img/btn-add-photo-sel@3x.png); } .app.lclub_detail_06 .section .content .file_upload .file_list { width: calc(100% - 102px); overflow-x: scroll; } .app.lclub_detail_06 .section .content .file_upload .file_list ul { width: fit-content; column-gap: 12px; white-space: pre; display: flex; justify-content: start; align-items: center; } .app.lclub_detail_06 .section .content .file_upload .file_list ul li { align-items: center; width: 90px; height: 90px; border-radius: 18px; position: relative; border: solid 1px #b9c1d2; display: flex; overflow: hidden; } .app.lclub_detail_06 .section .content .file_upload .file_list ul li .del { background-image: url(/resources/img/btn-delete-03-small-1-nor@3x.png); width: 36px; height: 36px; border-radius: 18px; background-size: cover; background-position: center center; background-repeat: no-repeat; position: absolute; top: 0; right: 0;z-index: 2; } .app.lclub_detail_06 .section .content .file_upload .file_list ul li .del:hover { background-image: url(/resources/img/btn-delete-03-small-2-sel@3x.png); } .app.lclub_detail_06 .section .content .file_upload .file_list ul li img { object-fit: cover; } .app.lclub_detail_06 .section .content .textarea.writer textarea { border: solid 1px #e1e5ed; background-color: #fff; width: 100%; height: 222px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #000; } .app.lclub_detail_06 .section .content .checkbox_group { display: flex; flex-wrap: wrap; width: 100%; justify-content: start; align-items: start; gap: 10px; } .app.lclub_detail_06 .section .content .checkbox_group .checkbox { } .app.lclub_detail_06 .section .content .checkbox_group .checkbox input { display: none; width: 0; height: 0; top: 0; position: absolute; left: 0; } .app.lclub_detail_06 .section .content .checkbox_group .checkbox label { border-radius: 21px; padding: 15px; background-color: #f3f5fa; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .app.lclub_detail_06 .section .content .checkbox_group .checkbox input:checked + label { background-color: #000; color: #fff; } .app.lclub_detail_07 { position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); overflow: hidden; } .app.lclub_detail_07 .head { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 66px; padding: 27px 20px 11px; } .app.lclub_detail_07 .head:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 2px; width: calc(100% - 40px); background-color: #000; transform: translateX(-50%); } .app.lclub_detail_07 .head .tit { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_07 .head .sort_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-select-02-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_07 .head .sort_btn:hover, .app.lclub_detail_07 .head .sort_btn:active { color: #ff5039; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub_detail_07 .content { position:absolute; width: 100%; top: 66px; height: calc(100% - 66px); overflow-y: scroll; } .app.lclub_detail_07 .content .list { padding: 30px 20px 100px; } .app.lclub_detail_07 .content .list ul { display: flex; width: 100%; flex-wrap: wrap; justify-content: end; } .app.lclub_detail_07 .content .list ul li { } .app.lclub_detail_07 .content .list ul li.reply { width: 100%; padding-top: 30px; border-top: 1px solid #e1e5ed; } .app.lclub_detail_07 .content .list ul li.reply:first-child { padding-top: 0px; border-top: 0; } .app.lclub_detail_07 .content .list ul li.reply .reply_head { display: flex; width: 100%; justify-content: space-between; align-items: center; } .app.lclub_detail_07 .content .list ul li.reply .user { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub_detail_07 .content .list ul li.reply .user .thumb { align-items: center; width: 40px; height: 40px; display: flex; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 6px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub_detail_07 .content .list ul li.reply .user .thumb img { object-fit: cover; } .app.lclub_detail_07 .content .list ul li.reply .user .name { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_07 .content .list ul li.reply .value {word-break: break-all; white-space: pre-wrap; font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #000;margin-top: 10px; padding: 16px 20px; border-radius: 20px; background-color: #f4f7fd; } .app.lclub_detail_07 .content .list ul li.reply .bot { margin-top: 14px; display: flex; width: 100%; justify-content: start; align-items: center; } .app.lclub_detail_07 .content .list ul li.reply .bot .date { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_07 .content .list ul li.reply .bot .reply_btn { padding-left: 12px; margin-left: 12px; border-left: 1px solid #e1e5ed; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_07 .content .list ul li.re_reply { width: calc(100% - 30px); margin-top: 30px; border-top: 0; } .app.lclub_detail_07 .content .list ul li.re_reply .reply_head { display: flex; width: 100%; justify-content: space-between; align-items: center; } .app.lclub_detail_07 .content .list ul li.re_reply .user { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub_detail_07 .content .list ul li.re_reply .user .thumb { align-items: center; width: 40px; height: 40px; display: flex; border-radius: 20px; overflow: hidden; box-shadow: 0 2px 6px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub_detail_07 .content .list ul li.re_reply .user .thumb img { object-fit: cover; } .app.lclub_detail_07 .content .list ul li.re_reply .user .name { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_07 .content .list ul li.re_reply .value { word-break: break-all; white-space: pre-wrap; font-size: 14px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #000;margin-top: 10px; padding: 16px 20px; border-radius: 20px; background-color: #f4f7fd; } .app.lclub_detail_07 .content .list ul li.re_reply .bot { margin-top: 14px; display: flex; width: 100%; justify-content: start; align-items: center; } .app.lclub_detail_07 .content .list ul li.re_reply .bot .date { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_07 .content .list ul li.re_reply .bot .reply_btn { padding-left: 12px; margin-left: 12px; border-left: 1px solid #e1e5ed; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_07 .content .list ul li.reply~.reply { margin-top: 40px; } .app.lclub_detail_07 .content .list ul li.re_reply~.reply { margin-top: 40px; } .app.lclub_detail_07 .content .list ul li.reply .value .target_rep { color: #ff5039; } .app.lclub_detail_07 .content .list ul li.re_reply .value .target_rep { color: #ff5039; } .app.lclub_detail_08 { position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); } .app.lclub_detail_08 .lclub_vote { padding: 20px; } .app.lclub_detail_08 .lclub_vote .status { } .app.lclub_detail_08 .lclub_vote .status > span { display: inline-block;padding: 8px 10px; border-radius: 25px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; } .app.lclub_detail_08 .lclub_vote .status .able { border: solid 1px #0fdf8b; color: #0fdf8b; } .app.lclub_detail_08 .lclub_vote .status .done { border: solid 1px #abb4c4; color: #abb4c4; } .app.lclub_detail_08 .lclub_vote .tit { margin-top: 10px; font-size: 20px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #000; } .app.lclub_detail_08 .lclub_vote .vote { margin-top: 30px; } .app.lclub_detail_08 .lclub_vote .vote .radio { } .app.lclub_detail_08 .lclub_vote .vote .radio~.radio { margin-top: 30px; } .app.lclub_detail_08 .lclub_vote .vote .radio input { display: none; width: 0; height: 0; position: absolute; top: 0; left: 0; } .app.lclub_detail_08 .lclub_vote .vote .radio label { border-radius: 20px; overflow: hidden; border: solid 2px #fff; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; display: flex; width: 100%; height: 110px; justify-content: space-between; align-items: center; } .app.lclub_detail_08 .lclub_vote .vote .radio label .thumb { width: 160px; height: 110px; display: flex; } .app.lclub_detail_08 .lclub_vote .vote .radio label .thumb img { object-fit: cover; } .app.lclub_detail_08 .lclub_vote .vote .radio label .info { width: calc(100% - 160px); height: 110px; position: relative; padding: 12px; } .app.lclub_detail_08 .lclub_vote .vote .radio label .info .top { display: flex; width: 100%; justify-content: space-between; align-items: center;} .app.lclub_detail_08 .lclub_vote .vote .radio label .info .nb { font-size: 26px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_08 .lclub_vote .vote .radio label .info .per { display: none; font-size: 26px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio label .info .desc { position: absolute; left: 12px; bottom:12px; width: calc(100% - 24px); font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .app.lclub_detail_08 .lclub_vote .vote .radio input:checked + label { border: solid 2px #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio input:checked + label .info .nb { color: #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio input:checked + label .info .desc { color: #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio label.done { border: solid 2px #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio label.done .info .nb { color: #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio label.done .info .desc { color: #ff5039; } .app.lclub_detail_08 .lclub_vote .vote .radio label.done .info .per { display: block; } .fixed_bottom_btn { position: fixed; bottom: 0; z-index: 2; padding: 0 20px; width: 100%; } .fixed_bottom_btn button { width: 100%; padding: 22px 20px;border-radius: 30px;background-color: #00afff; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .fixed_bottom_btn button:disabled { opacity: .3; } .app.lclub_detail_09 { background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5); position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); padding-bottom: 100px; } .app.lclub_detail_09 .title { padding: 20px 20px 22px; position: relative; font-size: 20px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #000; } .app.lclub_detail_09 .title:after { width: calc(100% - 40px); position: absolute; content: ''; bottom: 0; left: 50%; transform: translateX(-50%); height: 2px; background-color: #000; } .app.lclub_detail_09 .user_info { padding: 20px 20px 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .app.lclub_detail_09 .user_info .user { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .app.lclub_detail_09 .user_info .user .thumb { align-items: center; overflow: hidden; display: flex;border-radius: 20px; width: 40px; height: 40px; border: solid 2px #f0f4fa; box-shadow: 0 2px 6px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .app.lclub_detail_09 .user_info .user .thumb img { object-fit: cover; } .app.lclub_detail_09 .user_info .user .name { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_09 .user_info .opt { width: 30px; height: 30px; display: flex; overflow: hidden; } .app.lclub_detail_09 .user_info .opt img { object-fit: cover; } .app.lclub_detail_09 .slide_banner { } .app.lclub_detail_09 .slide_banner .swiper { width: 100%; height: auto; aspect-ratio: 1/1; } .app.lclub_detail_09 .slide_banner .swiper .swiper-wrapper { align-items: center; } .app.lclub_detail_09 .slide_banner .swiper .swiper-wrapper .swiper-slide { height: auto; aspect-ratio: 1/1; } .app.lclub_detail_09 .slide_banner .swiper .swiper-wrapper .swiper-slide img { object-fit: cover; width: 100%; } .app.lclub_detail_09 .img_banner { display: flex; width: 100%; height: auto; aspect-ratio: 12.5/7; overflow: hidden; position: relative; } .app.lclub_detail_09 .img_banner img { width: 100%; object-fit: cover; } .app.lclub_detail_09 .img_banner .play_btn { width: 50px; height: 50px; position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; z-index: 2; display: flex; overflow: hidden; } .app.lclub_detail_09 .img_banner .play_btn img { width: 100%; object-fit: cover; } .app.lclub_detail_09 .sub_info { padding: 20px 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .app.lclub_detail_09 .sub_info .date { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .app.lclub_detail_09 .sub_info .type { display: flex; justify-content: start; align-items: center; column-gap: 6px; } .app.lclub_detail_09 .sub_info .type .icon { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; } .app.lclub_detail_09 .sub_info .type .icon img { object-fit: cover; } .app.lclub_detail_09 .sub_info .type .value { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .app.lclub_detail_09 .content {word-break: break-all; width:100%; padding: 20px 20px 0; position: relative; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .app.lclub_detail_09 .content:before { width: calc(100% - 40px); position: absolute; content: ''; top: 0; left: 50%; transform: translateX(-50%); height: 1px; background-color: #e1e5ed; } .app.lclub_detail_09 .content .blue { color: #4fc7fe; } .app.lclub_detail_09 .info_box { padding: 0 20px; margin-top: 40px; } .app.lclub_detail_09 .info_box .inner { padding: 14px 20px; border-radius: 20px; background-color: #f0f4fa; display: flex; justify-content: space-between; width: 100%; align-items: start; } .app.lclub_detail_09 .info_box .inner .icon { display: flex; width: 26px; height: 26px; overflow: hidden; } .app.lclub_detail_09 .info_box .inner .icon img { width: 100%; object-fit: cover; } .app.lclub_detail_09 .info_box .inner .value { padding: 2px; width: calc(100% - 30px); font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #ff5039; } .app.lclub_detail_09 .swiper-horizontal>.swiper-pagination-bullets, .app.lclub_detail_09 .swiper-pagination-bullets.swiper-pagination-horizontal, .app.lclub_detail_09 .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 20px } .app.lclub_detail_09 .swiper-pagination-bullet { width: 6px; height: 6px; opacity: 0.6; background-color: #fff; } .app.lclub_detail_09 .swiper-pagination-bullet-active { opacity: 1;} .app.lclub_detail_10 { position:absolute; width: 100%; top: 60px; height: calc(100% - 60px); } .app.lclub_detail_10 .head { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; height: 66px; padding: 27px 20px 11px; } .app.lclub_detail_10 .head:after { content: ''; position: absolute; bottom: 0; left: 50%; height: 2px; width: calc(100% - 40px); background-color: #000; transform: translateX(-50%); } .app.lclub_detail_10 .head .tit { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .app.lclub_detail_10 .head .sort_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-select-02-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_10 .head .sort_btn:hover, .app.lclub_detail_10 .head .sort_btn:active { color: #ff5039; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .app.lclub_detail_10 .head .opt .filter_btn { font-size: 12px;font-weight: 500; font-stretch: normal;font-style: normal; line-height: 26px; letter-spacing: normal;text-align: right;color: #000;background-image: url(/resources/img/btn-filter-01-nor@3x.png);background-size: 26px 26px;background-position: right;background-repeat: no-repeat;padding-right: 26px;height: 26px;} .app.lclub_detail_10 .head .opt .filter_btn:hover, .app.lclub_detail_10 .head .opt .filter_btn:active { color: #ff5039; background-image: url(/resources/img/btn-filter-02-sel@3x.png); } .app.lclub_detail_10 .head .opt button~button:before { content: ''; padding-left: 12px; margin-left: 12px; border-left: 1px solid #d4d8df;} /* 모아보기 css 모아놓기 */ .collect_view { padding: 30px 20px 100px; } .collect_view ul { width: 100%; display: flex; justify-content: start; align-items: start; gap: 2px; flex-wrap: wrap; } .collect_view ul li { width: 100%; height: 200px; background-color: red; } .collect_view ul li:nth-child(1) { width: 50%; height: 200px; } .collect_view ul li:nth-child(2) { width: 25%; height: 99px; } .collect_view ul li:nth-child(3) { width: 25%; height: 99px; } .collect_view .list_line > div { background-color: #000; display: flex; } .collect_view .list_line > div img { object-fit: cover; } .collect_view .list_line~.list_line { margin-top: 2px; } .collect_view .list_line:after { content: ''; clear: both; display:block; } .collect_view .line_type_01 { width: 100%; position: relative; } .collect_view .line_type_01 .one { width: 100%; height: auto; aspect-ratio: 8/5; margin-bottom: 2px; } .collect_view .line_type_01 .one~.two { } .collect_view .line_type_01 .two { width: calc(50% - 1px); height: auto; aspect-ratio: 8/5; float: left; } .collect_view .line_type_01 .three { width: calc(50% - 1px); height: auto; aspect-ratio: 8/5; float: right; } .collect_view .line_type_02 { width: 100%; position: relative; } .collect_view .line_type_02 .one { width: 66%; height: 100%; aspect-ratio: 8/5; margin-right: 2px; float: left; } .collect_view .line_type_02 .two { width: calc(34% - 2px); height: 50%; aspect-ratio: 8/4.84; float: right; } .collect_view .line_type_02 .three { margin-top: 2px; width: calc(34% - 2px); height: 50%; aspect-ratio: 8/4.84; float: right; } .collect_view .line_type_03 { width: 100%; position: relative; } .collect_view .line_type_03 .one { width: calc(34% - 2px); height: 50%; aspect-ratio: 8/4.84; float: left; } .collect_view .line_type_03 .two { width: 66%; height: 100%; aspect-ratio: 8/5; float: right; margin-left: 2px; } .collect_view .line_type_03 .three { margin-top: 2px; width: calc(34% - 2px); height: 50%; aspect-ratio: 8/4.84; float: left; } .collect_view .line_type { width: 100%; position: relative;} .collect_view .line_type.type_a .one { width: 66%; height: 260px; margin-right: 2px; float: left; } .collect_view .line_type.type_a .two { width: calc(34% - 2px); height: 129px; float: right; } .collect_view .line_type.type_a .three { margin-top: 2px; width: calc(34% - 2px); height: 129px; float: right; } .collect_view .line_type div{overflow: hidden;} .collect_view .line_type div a{width: 100%; } .collect_view .line_type div a img{object-fit: cover; width: 100%; height: 100%; } .collect_view .line_type.type_b .one { width: calc(34% - 2px); height: 129px; float: left; } .collect_view .line_type.type_b .two {width: 66%; height: 260px; float: right; } .collect_view .line_type.type_b .three { margin-top: 2px; width: calc(34% - 2px); height: 129px; float: left; } .collect_view .line_type > div{position: relative;} .collect_view .line_type .img_count{ position: absolute; bottom: 8px; right: 8px; width: 30px; height: 28px; overflow: hidden; padding: 8px 0; border-radius: 25px; background-color: rgba(0, 0, 0, 0.7); font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; color: #fff;} /* // 모아보기 css 모아놓기 끝 */ .app.lclub .empty_box { display: none; position: fixed; width: 100%; height: 100%; top:0; left: 0; bottom: 0; right: 0; } .app.lclub .empty_box .inner { } .app.lclub .empty_box .inner .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #b9c1d2;position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .app.lclub .empty_box .inner .ment .icon { margin: 0 auto; width: 68px; height: 68px; margin-bottom: 14px; overflow: hidden; } .app.lclub .empty_box .inner .ment .icon img { object-fit: contain; } .mission_ment { width: 100%; white-space: pre-line; padding: 30px; position: absolute; top:46%; left: 50%; transform: translate(-50%, -50%); font-size: 16px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: center;color: #000; } .mission_ment .icon { width:100%; height: 68px; margin-bottom: 20px; } .mission_ment .icon img { object-fit: cover; } .mission_ment .tit { margin-bottom: 20px; font-size: 20px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } /* l.club 여기까지*/ /* 상세페이지 시작 2022.11.01 et03 */ .detail.app { height: 100%; overflow: hidden; } .detail.app .detailBanner .swiper-slide { width: 75%; } .detail.app .body { position: fixed;top: 0;z-index: -1;width: 100%; } .detail.app .body .slide_banner { height: 122vw; } .detail.app .body .slide_banner .Prd_img_slider { height: 100%; } .detail.app .body .slide_banner .Prd_img_slider .swiper-slide { display: flex; align-items: center; justify-content: center; } .detail.app .body .slide_banner .Prd_img_slider .swiper-slide img { width: 100%;} .detail.app .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets, .detail.app .body .slide_banner .swiper-pagination-bullets.swiper-pagination-horizontal { text-align: left; bottom: 60px; padding: 0 27px; } .detail.app .body .slide_banner .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .detail.app .body .slide_banner .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 6px; height: 6px; transition: .3s; } .detail.app .body .slide_banner .swiper-pagination-bullet-active { width: 30px !important; border-radius: 3px; background: #000; } .detail.app .body .slide_banner .Prd_img_slider .icon { position: absolute;z-index: 1; top: 80px; right: 20px; display: flex; justify-content: center; flex-direction: column; gap: 6px;} .detail.app .body .slide_banner .Prd_img_slider .icon img { object-fit: contain; } .detail.app .body .slide_banner .Prd_img_slider .awards img {width: 56px;} .detail.app .scroll_case { z-index: 2; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); overflow-y: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .detail.app .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .detail.app .scroll_case .main_scroll { pointer-events: auto; position: absolute; top: 98vw; height: 100%; width: 100%; border-top-left-radius: 30px; border-top-right-radius: 30px; } .detail.app .scroll_case .main_scroll .main_bar { box-shadow: 0 -2px 20px 0 rgba(23, 48, 84, 0.1); border-top-left-radius: 30px; border-top-right-radius: 30px; height: auto; width: 100%; background-image: linear-gradient(to bottom, #fff 39%, #f7f5f5); padding-bottom: 100px; } .detail.app .scroll_case .main_scroll .main_bar .header { padding: 40px 30px 0px; } .detail.app .scroll_case .main_scroll .main_bar .header .brand { padding: 0; margin:0; line-height: 0; } .detail.app .scroll_case .main_scroll .main_bar .header .brand a { background-image: url(/resources/img/btn-forward-01-small-1-nor@3x.png); background-position: right center; background-repeat: no-repeat; background-size: 12px 12px; display: inline-block; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; padding-right: 14px; } .detail.app .scroll_case .main_scroll .main_bar .header .prd_tit { margin-top: 10px; font-size: 22px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.36;letter-spacing: normal;color: #000; } .detail.app .scroll_case .main_scroll .main_bar .header .info_pri { column-gap: 12px; margin-top: 24px; display: flex; justify-content: start; align-items: center; } .detail.app .scroll_case .main_scroll .main_bar .header .info_pri .price { display: flex; align-items: end; } .detail.app .scroll_case .main_scroll .main_bar .header .info_pri .price .sell_pri { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .detail.app .scroll_case .main_scroll .main_bar .header .info_pri .price .ori_pri {text-decoration: line-through; font-family: 'Pretendard', sans-serif; margin-left: 10px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #cad4e1; } .detail.app .scroll_case .main_scroll .main_bar .header .info_pri .discount { font-family: 'Pretendard', sans-serif; font-size: 20px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44; } .detail.app .scroll_case .fixed_opt { position: absolute; top: -40px; right:20px; z-index: 2; } .detail.app .scroll_case .fixed_opt.fixed { position: fixed; top: 80px; } .detail.app .scroll_case .fixed_opt .share_btn { border-radius: 26px; display:flex; justify-content: center; align-items: center; width: 52px; height: 52px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .detail.app .scroll_case .fixed_opt .share_btn img { } /* 쉐어버튼 사용 하시려면 주석 제거해 주세요 .detail.app .scroll_case .fixed_opt .share_btn + .like_btn { margin-top: 20px; } */ .detail.app .scroll_case .fixed_opt .like_btn { padding: 16px 12px; border-radius: 26px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: rgba( 0, 0,0, .76); } .detail.app .scroll_case .fixed_opt .like_btn.active { box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: rgb(255 80 57 / 90%); } .detail.app .scroll_case .fixed_opt .like_btn .icon { } .detail.app .scroll_case .fixed_opt .like_btn .icon img { width: 28px; height: 28px; } .detail.app .scroll_case .fixed_opt .like_btn .fav_count { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #fff; } .extra_info { margin: 40px 30px 0; padding: 26px 0; border: 1px solid #e1e5ed; border-left: 0; border-right: 0; } .extra_info .tit { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .extra_info .info { margin-top: 14px; } .sectit { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .extra_info .info .line { display: flex; justify-content: space-between; align-items: center; } .extra_info .info .line~.line { margin-top: 12px; } .extra_info .info .line .item { display: flex; align-items: center; width: 90px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3; } .extra_info .info .line .item img { } .extra_info .info .line .value { width: calc(100% - 90px); font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3; } .detail.app .scroll_case .main_scroll .main_bar .bar_banner { position: relative; margin-top: 26px; padding-bottom: 25px; } .detail.app .scroll_case .main_scroll .main_bar .bar_banner:after { content: ''; position: absolute; bottom:0; left: 30px; width: calc(100% - 60px); height: 1px; background-color: #e1e5ed; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box { margin-top: 26px; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box img { width: 100%; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab { margin-top: 10px; padding: 0 20px; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; border-radius: 33px; background-color: #f3f5fa; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul .wht_back { transition: .2s all; left: 10px; z-index: 0; position: absolute; width: calc(50% - 10px); height: 50px; border-radius: 30px; box-shadow: 0 2px 4px 0 rgba(58, 65, 79, 0.1);background-color: #fff; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul .wht_back.right { transition: .2s all; left: 50%; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul li { z-index: 2; width: 50%; padding: 18px 20px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul li a { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul li.active { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab ul li.active a { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_tab.fixed { position: fixed; top: 70px; left: 0px; width: 100%; } /*.detail.app .scroll_case .main_scroll .main_bar .detail_img_box .prd_info_img { padding: 0 30px; } */ /* 상세페이지 끝 2022.11.01 et03 */ /* 007 검색 20221116 et03 시작 */ .search.app { height: calc(100% - 60px);position: absolute;top: 60px;width: 100%; } .search.app .search_box { padding: 10px 20px; position: relative; } .search.app .search_box input[type='search'] { height: 60px; padding: 22px 24px;border-radius: 30px;border: 0; background-color: #f6f8fb; font-size: 16px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .search.app .search_box input[type='search']::placeholder {font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1;} .search.app .search_box .search_btn { position: absolute; top: 20px; right: 36px; width: 40px; height: 40px; } .search.app .search_box .search_del_btn { display: none; position: absolute; top: 24px; right: 86px; width: 32px; height: 32px; } .search.app .empty_box { position: fixed; width: 100%; height: 100%; top:0; left: 0; bottom: 0; right: 0; } .search.app .empty_box .inner { } .search.app .empty_box .inner .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #b9c1d2;position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .search.app .empty_box .inner .ment .icon { margin: 0 auto; width: 68px; height: 68px; margin-bottom: 14px; overflow: hidden; } .search.app .empty_box .inner .ment .icon img { object-fit: contain; } .search.app .search_result .header { display: flex; justify-content: space-between; align-items: center; padding: 40px 14px 18px 20px; } .search.app .search_result .header .front { } .search.app .search_result .header .front .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .search.app .search_result .header .front .tit font { } .search.app .search_result .header .back { display: flex; justify-content: end; align-items: center; } .search.app .search_result .header .back .checkbox { position: relative; } .search.app .search_result .header .back .checkbox input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .search.app .search_result .header .back .checkbox label { height: 26px; background-image: url(/resources/img/btn-checkbox-02-listoption-1-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: left center; padding-left: 30px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .search.app .search_result .header .back .checkbox input[type=checkbox]:checked + label {background-image: url(/resources/img/btn-checkbox-02-listoption-2-sel@3x.png);} .search.app .search_result .header .back .checkbox +.button { margin-left: 10px; padding-left: 10px; } .search.app .search_result .header .back .checkbox +.button::before { position: absolute; top:6px; left: 0; content: ''; width: 1px; height: 14px; background-color: #d4d8df; } .search.app .search_result .header .back .button { position: relative; } .search.app .search_result .header .back .button .sort_btn { background-image: url(/resources/img/btn-select-02-nor@3x.png); background-repeat: no-repeat; background-size: 26px 26px; background-position: right center; padding-right: 26px; height: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; } .search.app .search_result .header .back .button .sort_btn:hover { color: #f44; background-image: url(/resources/img/btn-select-02-sel@3x.png); } .search.app .search_result .list { padding: 20px 20px 60px; } .search.app .search_result .list ul { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .search.app .search_result .list ul li { width: calc(50% - 7px); padding: 10px 14px 14px;border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .search.app .search_result .list ul li a { display: block; } .search.app .search_result .list ul li a .thumb { position: relative; display: flex; justify-content: center; align-items: center; width: 30vw; height: 30vw; margin: 0 auto; overflow: hidden;} .search.app .search_result .list ul li a .thumb .mark { text-transform: uppercase; white-space: nowrap;padding: 5px 10px; border-radius: 10px; display: inline-block; position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .search.app .search_result .list ul li a .thumb .soldout { font-family: 'Pretendard', sans-serif; content: 'Sold Out'; background-color: rgb(255 80 57 / 90%); } .search.app .search_result .list ul li a .thumb .commingsoon { font-family: 'Pretendard', sans-serif; content: 'Coming Soon'; border-radius: 10px; background-color: rgba( 0, 0,0, .8); } .search.app .search_result .list ul li a .thumb img { } .search.app .search_result .list ul li a .prd_info { margin-top: 6px; } .search.app .search_result .list ul li a .prd_info .info_head { width: 100%; display: flex; justify-content: space-between; align-items: center; } .search.app .search_result .list ul li a .prd_info .info_head .brand_nm { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .search.app .search_result .list ul li a .prd_info .info_head .favorite { } .search.app .search_result .list ul li a .prd_info .info_head .favorite input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .search.app .search_result .list ul li a .prd_info .info_head .favorite label { font-family: 'Pretendard', sans-serif; background-image: url(/resources/img/btn-favorite-02-list-1-nor@3x.png); background-repeat: no-repeat; background-size: 24px 24px; background-position: left center; height: 24px; padding-left: 26px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 24px;letter-spacing: normal;text-align: right;color: #cad4e1; } .search.app .search_result .list ul li a .prd_info .info_head .favorite input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-02-list-2-sel@3x.png); color: #f44; } .search.app .search_result .list ul li a .prd_info .prd_tit { margin-top: 2px; height: 32px; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .search.app .search_result .list ul li a .prd_info .info_foot { margin-top: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .search.app .search_result .list ul li a .prd_info .info_foot .price { display: flex; justify-content: start; align-items: center; } .search.app .search_result .list ul li a .prd_info .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .search.app .search_result .list ul li a .prd_info .info_foot .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .search.app .search_result .list ul li a .prd_info .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } /* 007 검색 20221116 et03 끝 */ /* 008 찜 20221116 et03 시작 */ .like.app { padding-top: 60px; padding-bottom: 120px; height: auto; min-height: 100%; } .like.app .like_tab { margin-top: 10px; padding: 0 20px; } .like.app .like_tab ul { position: relative; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; border-radius: 33px; background-color: #f3f5fa; } .like.app .like_tab ul .wht_back { transition: .2s all; left: 10px; z-index: 0; position: absolute; width: calc(50% - 10px); height: 50px; border-radius: 30px; box-shadow: 0 2px 4px 0 rgba(58, 65, 79, 0.1);background-color: #fff; } .like.app .like_tab ul .wht_back.right { transition: .2s all; left: 50%; } .like.app .like_tab ul li { z-index: 2; width: 50%; padding: 18px 20px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .like.app .like_tab ul li a { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .like.app .like_tab ul li.active { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .like.app .like_tab ul li.active a { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .like.app .empty_box { position: fixed; width: 100%; height: 100%; top:0; left: 0; bottom: 0; right: 0; } .like.app .empty_box .inner { } .like.app .empty_box .inner .ment { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #b9c1d2;position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .like.app .empty_box .inner .ment .icon { margin: 0 auto; width: 68px; height: 68px; margin-bottom: 14px; overflow: hidden; } .like.app .empty_box .inner .ment .icon img { object-fit: contain; } .like.app .brd_contents { display: none; } .prd_list_01 { margin-top: 10px; } .prd_list_01 .head { position: relative; padding: 24px 30px 16px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .prd_list_01 .head::after { content:''; position: absolute; bottom: 0; width: calc(100% - 60px); height: 2px; background-color: #000; } .prd_list_01 .head .tit { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .prd_list_01 .head .sort_btn { display: flex; align-items: center; height: 26px; background-image: url(/resources/img/btn-select-02-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: right center; padding-right: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .prd_list_01 .list { margin-top: 10px; } .prd_list_01 .list ul { padding: 0 30px; } .prd_list_01 .list ul li { border-bottom: 1px solid #e1e5ed; padding: 10px 0 20px; display: flex; justify-content: space-between; align-items: start; width: 100%; position: relative; } .prd_list_01 .list ul li.not_sell { } .prd_list_01 .list ul li.soldout { } .prd_list_01 .list ul li .thumb { width: 106px; height: 106px; position: relative; } .prd_list_01 .list ul li .thumb img { } .prd_list_01 .list ul li .thumb .soldout { white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; padding: 5px 10px; border-radius: 10px;background-color: rgba(255,80,57,.9); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .prd_list_01 .list ul li.soldout .thumb .soldout { display: block; } .prd_list_01 .list ul li .thumb .comingsoon { white-space: nowrap; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: none; padding: 5px 10px; border-radius: 10px;background-color: rgba(0,0,0,.76); font-size: 10px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .prd_list_01 .list ul li.comingsoon .thumb .comingsoon { display: block; } .prd_list_01 .list ul li .info { width: calc(100% - 106px); position: relative; padding: 10px 0 0 6px; } .prd_list_01 .list ul li .info .tit { width: 75%; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .prd_list_01 .list ul li .info .desc { width: 75%; margin-top: 2px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .prd_list_01 .list ul li .info .price { margin-top: 8px; } .prd_list_01 .list ul li .info .price .sell_pri { font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039;} .prd_list_01 .list ul li .info .price .ori_pri { } .prd_list_01 .list ul li .info .option { margin-top: 16px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff5039; } .prd_list_01 .list ul li .info .fav { position: absolute; right: 0; top: 0; } .prd_list_01 .list ul li .info .fav .icon { } .prd_list_01 .list ul li .info .fav .icon img { } .prd_list_01 .list ul li .info .fav .icon input[type=checkbox] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .prd_list_01 .list ul li .info .icon label { width: 30px; padding-top: 22px; background-image: url(/resources/img/btn-favorite-03-list-1-nor@3x.png); background-position: top center; background-repeat: no-repeat; background-size: 22px 22px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #cad4e1; } .prd_list_01 .list ul li .info .icon input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-03-list-2-sel@3x.png); color: #ff5039; } .prd_list_01 .list ul li .info .fav .count { font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #f44; } .prd_list_01 .list ul li .not_sell_ment { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); white-space: nowrap; padding: 9px 20px; border-radius: 15px; background-color: rgba(0, 0, 0, 0.8);display: none; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .prd_list_01 .list ul li.not_sell > * { opacity: .4; } .prd_list_01 .list ul li.not_sell .not_sell_ment { display: block; opacity: 1; } .brd_list_01 { margin-top: 10px; } .brd_list_01 .head { position: relative; padding: 24px 30px 16px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .brd_list_01 .head::after { content:''; position: absolute; bottom: 0; width: calc(100% - 60px); height: 2px; background-color: #000; } .brd_list_01 .head .tit { font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .brd_list_01 .head .sort_btn { display: flex; align-items: center; height: 26px; background-image: url(/resources/img/btn-select-02-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: right center; padding-right: 26px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .brd_list_01 .list { margin-top: 10px; } .brd_list_01 .list ul { padding: 0 30px;} .brd_list_01 .list ul li.disabled .tit { opacity: .2; } .brd_list_01 .list ul li.disabled .fav { opacity: .2; } .brd_list_01 .list ul li { border-bottom: 1px solid #e1e5ed; padding: 20px 0 25px; display: flex; justify-content: space-between; align-items: center; width: 100%; position: relative; } .brd_list_01 .list ul li .tit { } .brd_list_01 .list ul li .tit .brd_name_kor { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .brd_list_01 .list ul li .tit .brd_name_eng { margin-top: 6px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .brd_list_01 .list ul li .fav .icon { } .brd_list_01 .list ul li .fav .icon img { } .brd_list_01 .list ul li .fav .count { font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #f44; } .brd_list_01 .list ul li .fav .icon input[type=checkbox] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .brd_list_01 .list ul li .fav .icon label { width: 30px; padding-top: 22px; background-image: url(/resources/img/btn-favorite-03-list-1-nor@3x.png); background-position: top center; background-repeat: no-repeat; background-size: 22px 22px; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #cad4e1; } .brd_list_01 .list ul li .fav .icon input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-favorite-03-list-2-sel@3x.png); color: #ff5039; } /* 008 찜 20221116 et03 끝 */ /* 009 마이페이지 시작 et03 20221114 */ .mypage.app { height: auto; min-height: 100%; font-family: 'Pretendard'; padding-bottom: 120px; padding-top: 60px; } .mypage.app .main_img { top:0; position: absolute; display: flex; width: 100%; aspect-ratio: 1/.9707; } .mypage.app .main_img img { width: 100%; height: 100%; object-fit: cover; } .mypage.app .main_img:after { content: ''; top: 0; position:absolute; width: 100%; height: 100%; background-image: url(/resources/img/dim-mypage-main-top@3x.png); background-size: contain; z-index: 2; background-position: top center; } .mypage.app .welcome { position: absolute; z-index: 3; width: 100%; padding: 0 30px; column-gap: 14px; bottom: 70px; display: flex; justify-content: start; align-items: center;} .mypage.app .welcome .icon { width: 60px; height: 60px; border-radius: 30px; border: solid 2px #fff; overflow: hidden; display: flex; } .mypage.app .welcome .icon img { object-fit: cover; } .mypage.app .welcome .ment { font-size: 20px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1.3;letter-spacing: normal;color: #fff; } .mypage.app .welcome .ment .user_nick { font-weight: 900; } .mypage.app .scroll_case { z-index: 4; pointer-events: none; width: 100%; position: fixed; top: 60px; height: calc(100% - 60px); overflow-y: scroll; width: 100%; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .mypage.app .scroll_case::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .mypage.app .scroll_case .main_scroll { pointer-events: auto; position: absolute; top: auto; height: 100%; width: 100%; overflow-y: hidden; border-top-left-radius: 30px; border-top-right-radius: 30px; background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5); } .mypage.app .scroll_case .main_scroll .main_bar { } .mypage.app .main_bar { padding: 30px 0 120px; } .mypage.app .main_bar .head { padding: 0 30px; } .mypage.app .main_bar .head .mb_clr { padding: 4px 0 20px; position: relative; border-bottom: 1px solid #e1e5ed; } .mypage.app .main_bar .head .item { font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .main_bar .head .value { margin-top: 20px; font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .mypage.app .main_bar .head .mb_clr .more_btn { top:4px; right: 0; position: absolute; padding: 15px 15px;border-radius: 21px;background-color: #f3f5fa; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right; color: #8992a3; } .mypage.app .main_bar .head .line { border-bottom: 2px solid #000; padding: 20px 0 30px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .mypage.app .main_bar .head .line .divider { margin: auto 20px; width: 1px; height: 56px; background-color: #e1e5ed; } .mypage.app .main_bar .head .line .point { width: 53%; } .mypage.app .main_bar .head .line .coupon { width: 40%;} .mypage.app .main_bar .my_lclub .list {display: flex; gap: 14px; padding: 0 30px; } .mypage.app .main_bar .my_lclub .list > div{ width:50%; height: 112px; margin-top:20px; padding:16px 20px; border-radius: 20px; background-color: #09fa99; color: #214d56; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);} .mypage.app .main_bar .my_lclub .list > div:nth-child(2){background-color: #6ed1ff;color: #2c5096;} .mypage.app .main_bar .my_lclub .list .tit{font-size: 12px; line-height: 1.33; font-weight: 500; margin-bottom: 10px;} .mypage.app .main_bar .my_lclub .list .sub{ font-size: 14px; line-height: 1.14; font-weight: 800;} .mypage.app .main_bar .my_lclub .list .sub span{ font-size: 40px; font-weight: 800;} .mypage.app .main_bar .satisfy_research { margin-top: 60px; } .mypage.app .main_bar .satisfy_research .head { } .mypage.app .main_bar .satisfy_research .head .tit { font-size: 20px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .main_bar .satisfy_research .head .sub { margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .mypage.app .main_bar .satisfy_research .list .swiper-wrapper { align-items: center; height: 214px; margin-top: 20px; } .mypage.app .main_bar .satisfy_research .list .swiper-slide { transition: all .3s; display: flex; width: 150px; justify-content: center; align-items: center; height: 164px; border-radius: 20px; padding: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); } .mypage.app .main_bar .satisfy_research .list .swiper-slide:nth-child(1) { background-color: #004429; color: #09fa99; } .mypage.app .main_bar .satisfy_research .list .swiper-slide:nth-child(2) { background-color: #4fc7fe; color: #fff; } .mypage.app .main_bar .satisfy_research .list .swiper-slide:nth-child(3) { background-color: #011c4e; color: #4fc7fe; } .mypage.app .main_bar .satisfy_research .list .swiper-slide .card { width: 100%; } .mypage.app .main_bar .satisfy_research .list .swiper-slide .icon { text-align: center; } .mypage.app .main_bar .satisfy_research .list .swiper-slide .icon img { } .mypage.app .main_bar .satisfy_research .list .swiper-slide .ment { margin-top: 6px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: center; } .mypage.app .main_bar .satisfy_research .list .swiper-slide .count { margin-top: 2px; display: flex; width: 100%; justify-content: center; align-items: flex-end; font-size: 40px; font-weight: 800; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; } .mypage.app .main_bar .satisfy_research .list .swiper-slide .count:after { margin-bottom: 4px; content: '건'; font-size: 14px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;} .mypage.app .main_bar .satisfy_research .list .swiper-slide .bottom { margin-top: 23px; background-image: url(/resources/img/btn-forward-03-wht@3x.png); background-position: right bottom; background-repeat: no-repeat; background-size: 18px 18px; padding-top: 14px; border-top: 1px solid rgba( 255, 255, 255, .4); font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #fff; } .mypage.app .main_bar .satisfy_research .list .swiper-slide.swiper-slide-active { transition: all .3s; height: 194px;} .mypage.app .main_bar .pickup_history { margin-top: 40px; } .mypage.app .main_bar .pickup_history .head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; } .mypage.app .main_bar .pickup_history .head .title { } .mypage.app .main_bar .pickup_history .head .tit { font-size: 20px;font-weight: 800; font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .main_bar .pickup_history .head .sub { margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .mypage.app .main_bar .pickup_history .head .button { } .mypage.app .main_bar .pickup_history .head .button button { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: right;color: #b9c1d2; } .mypage.app .main_bar .pickup_history .contents { padding: 0 30px; column-gap: 8px; margin-top: 20px; display: flex; justify-content: flex-start; align-items: flex-start; } .mypage.app .main_bar .pickup_history .contents .left { width: 14px; position: relative; } .mypage.app .main_bar .pickup_history .contents .left ul { } .mypage.app .main_bar .pickup_history .contents .left:after { content: ''; top: 5px; left: 5px; position: absolute; width: 4px; height: 213px; background-color: #4fc7fe; } .mypage.app .main_bar .pickup_history .contents .left ul li { position: relative; z-index: 1; border-radius: 7px; width: 14px; height: 14px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);border: solid 4px #4fc7fe;background-color: #fff; } .mypage.app .main_bar .pickup_history .contents .left ul li~li { margin-top: 57px; } .mypage.app .main_bar .pickup_history .contents .right { width: calc(100% - 22px); margin-top: 7px; } .mypage.app .main_bar .pickup_history .contents .right ul { } .mypage.app .main_bar .pickup_history .contents .right ul li { } .mypage.app .main_bar .pickup_history .contents .right ul li~li { margin-top: 17px; } .mypage.app .main_bar .pickup_history .contents .right ul li .rounded_box { padding: 14px 20px; border-radius: 20px; border-top-left-radius: 0px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); background-color: #fff; } .mypage.app .main_bar .pickup_history .contents .right ul li .rounded_box .justy { display: flex; justify-content: space-between; align-items: center; } .mypage.app .main_bar .pickup_history .contents .right ul li .rounded_box .item { font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .main_bar .pickup_history .contents .right ul li .rounded_box .value { font-size: 26px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .mypage.app .main_bar .pickup_history .contents .right ul li .rounded_box .value:after { margin-bottom: 4px; content: '건'; font-size: 10px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000;} .mypage.app .main_bar .pickup_history .contents .right ul li:nth-child(1) { width: 70%;} .mypage.app .main_bar .pickup_history .contents .right ul li:nth-child(2) { width: 80%;} .mypage.app .main_bar .pickup_history .contents .right ul li:nth-child(3) { width: 88%;} .mypage.app .main_bar .pickup_history .contents .right ul li:nth-child(4) { width: 95%;} .mypage.app .period_tab { position: sticky; width: 100%; z-index: 2; top: 0px; } .mypage.app .period_tab ul { background-color: #f8fafc; padding: 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .mypage.app .period_tab ul li { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;padding: 15px 18px;border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .mypage.app .period_tab ul li.active { background-color: #000; color: #fff; } .mypage.app .period_input { display: none; background-color: #f8fafc; padding: 0 20px 30px; } .mypage.app .period_input .date { position: relative; height: 48px; width: 100%; display: flex; justify-content: start; align-items: center; border-radius: 30px;border: solid 1px #e1e5ed;background-color: #fff; } .mypage.app .period_input .date input { padding: 0 20px; width:35%; border: 0; height: auto; background-color: transparent; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .period_input .date input::placeholder {border: 0; height: auto; background-color: transparent; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .mypage.app .period_input .date .divider { top: calc(50% - 1px); left: 35%; position: absolute; width: 10px; height: 2px; background-color: #000; } .mypage.app .period_input .date button { position: absolute; right: 0; display: flex; justify-content: center; align-items: center; height: 48px; border-radius: 30px; border: solid 1px #cad4e1; background-color: #fff; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .period_tab { position: sticky; width: 100%; z-index: 2; top: 60px; } .period_tab ul { background-color: #f8fafc; padding: 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .period_tab ul li { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;padding: 15px 18px;border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .period_tab ul li.active { background-color: #000; color: #fff; } .period_tab .period_input { display: none; background-color: #f8fafc; padding: 0 20px 30px; } .period_tab .period_input .date { position: relative; height: 48px; width: 100%; display: flex; justify-content: space-between; align-items: center; border-radius: 30px;border: solid 1px #e1e5ed;background-color: #fff; } .period_tab .period_input .date input { padding: 0 20px; width:35%; border: 0; height: auto; background-color: transparent; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .period_tab .period_input .date input::placeholder {border: 0; height: auto; background-color: transparent; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .period_tab .period_input .date .divider { top: calc(50% - 1px); left: 35%; position: absolute; width: 10px; height: 2px; background-color: #000; } .period_tab .period_input .date button {padding: 16px 30px; height: 48px; border-radius: 30px; border: solid 1px #cad4e1; background-color: #fff; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .mypage.app .prd_list { background-color: #f4f7fd; } .mypage.app .prd_list .section { background-color: #fff; } .mypage.app .prd_list .section~.section { margin-top: 10px; } .mypage.app .prd_list .section .head { padding: 30px 20px; display: flex; justify-content: space-between; align-items: center; } .mypage.app .prd_list .section .head .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .mypage.app .prd_list .section .head .date { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .mypage.app .prd_list .section .head .detail_btn { padding-bottom: 3px; border-bottom: 1px solid #2d2d2d; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .mypage.app .prd_list .section .list { padding: 0 20px; } .mypage.app .prd_list .section .list ul { } .mypage.app .prd_list .section .list ul li { display: flex; width: 100%; justify-content: space-between; align-items: start; padding: 10px 0 30px; border-bottom: 1px solid #e1e5ed; } .mypage.app .prd_list .section .list ul li:last-child { border: 0; } .mypage.app .prd_list .section .list ul li~li { margin-top: 10px; } .mypage.app .prd_list .section .list ul li .thumb { width: 106px; height: 106px; align-items: center; justify-content: center; display: flex; overflow: hidden; } .mypage.app .prd_list .section .list ul li .thumb img { object-fit: contain; width: 100%; height: 100%; } .mypage.app .prd_list .section .list ul li .info { width: calc(100% - 106px); padding: 6px; position: relative; } .mypage.app .prd_list .section .list ul li .info .prd_tit { width: calc(100% - 50px); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .prd_list .section .list ul li .info .sub { margin-top: 2px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .mypage.app .prd_list .section .list ul li .info .price { margin-top: 8px; display: flex; width: 100%; justify-content: start; align-items: center; } .mypage.app .prd_list .section .list ul li .info .price .sell_pri { font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .mypage.app .prd_list .section .list ul li .info .price .ori_pri { margin-left: 2px; text-decoration: line-through; font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #cad4e1; } .mypage.app .prd_list .section .list ul li .info .option { margin-top: 16px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff5039; } .mypage.app .prd_list .section .list ul li .info .status { position: absolute; top: 6px; right: 0; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .mypage.app .prd_list .section .list ul li .info .status.done { } .mypage.app .prd_list .section .list ul li .info .status.preparing { color: #4fc7fe; } .mypage.app .prd_list .section .list ul li .info .status.cancel { color: #ff5039; } .mypage.app .prd_list .section .list ul li .info .status.shipping { color: #0fdf8b; } .mypage.app .prd_list .section .list ul li .info .button { margin-top: 26px; text-align: right; } .mypage.app .prd_list .section .list ul li .info .button button { padding: 15px 14px; border-radius: 21px;background-color: #4fc7fe;font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .mypage.app .prd_list .bottom { padding: 0 20px 30px; }.mypage.app .prd_list .bottom button { font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;width: 100%; padding: 20px 30px; border-radius: 30px; background-color: #4fc7fe; } .mypage.app .prd_list .bottom .noti { padding: 12px 0 0; border-top: 1px solid #e1e5ed; display: flex; justify-content: start; align-items: center; width: 100%; } .mypage.app .prd_list .bottom .noti .icon { } .mypage.app .prd_list .bottom .noti .ment { margin-left: 2px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .mypage.app .prd_list .bottom .ship_done { width: auto; padding: 15px 14px; border-radius: 21px; text-align: right; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .mypage.app .mypoint { padding: 10px 20px 40px; } .mypage.app .mypoint .card { padding: 20px; border-radius: 20px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26); } .mypage.app .mypoint .card.uap { background-color: #09fa99; } .mypage.app .mypoint .card.dap { background-color: #4fc7fe; margin-top: 20px; } .mypage.app .mypoint .card .head { display: flex; width: 100%; justify-content: space-between; align-items: center; } .mypage.app .mypoint .uap .head .tit { font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #004858; } .mypage.app .mypoint .dap .head .tit { font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #1b4188; } .mypage.app .mypoint .dap .head button { font-size: 12px; padding-bottom: 3px; border-bottom: 1px solid #1b4188;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right; color: #1b4188; } .mypage.app .mypoint .card .content { padding: 40px 0 30px; } .mypage.app .mypoint .uap .content .point { margin: 0 0 10px; font-size: 40px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #004858; } .mypage.app .mypoint .card .content .line { display: flex; width: 100%; justify-content: space-between; align-items: center; } .mypage.app .mypoint .card .content .line~.line { margin-top: 10px; } .mypage.app .mypoint .card .content .line .item {font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #1b4188;} .mypage.app .mypoint .card .content .line .value { font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #1b4188; } .mypage.app .mypoint .get_point { margin-top: 20px; padding: 20px; font-size: 14px; border-radius: 20px; border: solid 1px #e1e5ed; background-color: #fff;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039;background-image: url(/resources/img/btn-forward-02-mid-1-nor@3x.png); background-size: 14px 14px; background-repeat: no-repeat; background-position: right 20px center; } .mypage.app .point_list { } .mypage.app .point_list .tab { padding: 20px; } .mypage.app .point_list .tab ul { display: flex; width: 100%; justify-content: start; align-items: center; column-gap: 10px; } .mypage.app .point_list .tab ul li { font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;padding: 16px 20px 14px; border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .mypage.app .point_list .tab ul li.active { background-color: #000; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; } .mypage.app .point_list .head { display: flex; position: relative; padding: 26px 20px 20px; width: 100%; justify-content: space-between; align-items: center; } .mypage.app .point_list .head:after { content: ''; position: absolute; width: calc(100% - 40px); height: 2px; background-color: #000; left: 20px; bottom: 0; } .mypage.app .point_list .head .item { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .point_list .list { height: 400px; overflow-y: scroll; } .mypage.app .point_list .list ul { padding: 0 20px; } .mypage.app .point_list .list ul li { padding: 24px 0 26px; display: flex; width: 100%; justify-content: space-between; align-items: center; border-bottom: 1px solid #e1e5ed; } .mypage.app .point_list .list ul li .item { } .mypage.app .point_list .list ul li .item .sub { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .point_list .list ul li .item .main { margin-top: 6px; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .point_list .list ul li .value { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #4fc7fe;} .mypage.app .point_list .used_point .list ul li .value { color: #ff5039; } .mypage.app .point_list .used_point { display: none; } .mypage.app .coupon_list { margin-top: 30px; } .mypage.app .coupon_list ul { padding: 0 30px; } .mypage.app .coupon_list ul li { position: relative; } .mypage.app .coupon_list ul li~li { margin-top: 30px;} .mypage.app .coupon_list ul li .coupon { position: relative; filter: drop-shadow(0px 4px 10px rgba(60, 67, 72, 0.26)); } .mypage.app .coupon_list ul li .coupon .info { padding: 0 20px; position: absolute; width: 100%; top: 50%; transform: translateY(-50%); } .mypage.app .coupon_list ul li .coupon .info .discount { font-size: 50px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: -2px;color: #2c5096; } .mypage.app .coupon_list ul li .coupon .info .tit { margin-top: 20px; text-overflow: ellipsis; width: 80%; overflow: hidden; white-space: nowrap; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #214d56; } .mypage.app .coupon_list ul li .coupon .info .coupon_type { margin-top: 6px; text-overflow: ellipsis; width: 80%; overflow: hidden; white-space: nowrap; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #214d56; } .mypage.app .coupon_list ul li .coupon .info .date { margin-top: 12px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #214d56; } .mypage.app .coupon_list ul li .coupon .img { } .mypage.app .coupon_list ul li .coupon .img img { width: 100%; height: auto; } .mypage.app .coupon_list ul li .coupon.brand .info > * { color: #214d56; } .mypage.app .coupon_list ul li .coupon.product .info > * { color: #5f0b00; } .mypage.app .used_coupon { display: none; } .mypage.app .used_coupon ul li .coupon { opacity: 0.4; } .mypage.app .used_coupon ul li .done_mark { position: absolute; right: -10px; top: -10px; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 30px; background-color: rgba(0,0,0, .9); font-size: 12px;font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: center;color: #fff; } .mypage.app .mb_modify { } .mypage.app .mb_modify .section {margin-top: 20px;position: relative; padding-bottom: 20px; } .mypage.app .mb_modify .section:last-child:after { content: ""; width: 0; } .mypage.app .mb_modify .section:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 1px; background-color: #e1e5ed; } .mypage.app .mb_modify .section .head { } .mypage.app .mb_modify .section .head .tit { padding: 20px 20px 12px; font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .mypage.app .mb_modify .section .info { margin-top: 10px; } .mypage.app .mb_modify .section .info .line { padding: 17px 20px; display: flex; width: 100%; justify-content: start; align-items: flex-start; } .mypage.app .mb_modify .section .info .line .item { width: 110px; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.25;letter-spacing: normal;color: #000; } .mypage.app .mb_modify .section .info .line .value { width: calc(100% - 110px); font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.25;letter-spacing: normal;color: #000; } .mypage.app .mb_modify .section .noti { padding: 16px 20px 10px; column-gap: 2px; display: flex; width: 100%; justify-content: start; align-items: center; } .mypage.app .mb_modify .section .noti .icon { width: 26px; height: 26px; overflow: hidden; } .mypage.app .mb_modify .section .noti .ment { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .mypage.app .mb_modify .section .button { padding: 20px; } .mypage.app .mb_modify .section .button button { padding: 22px 30px; width: 100%;border-radius: 30px;background-color: #4fc7fe; font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .mypage.app .mb_modify .section .button .solid_b_back { background-color: #000; } .mypage.app .mb_modify .section .content { margin-top: 10px; padding: 0 20px;} .mypage.app .mb_modify .section .content .line~.line { margin-top: 50px;} .mypage.app .mb_modify .section .content .line label {margin-bottom: 20px; font-size: 16px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .mb_modify .section .content .line label .required { color: #ff4c1d; } .mypage.app .mb_modify .section .content .line .input { position: relative; } .mypage.app .mb_modify .section .content .line .input a { position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .mypage.app .mb_modify .section .content .line .input input[type=button] { width: auto; position: absolute; right: 10px; top: 8px; padding: 17px 16px; border-radius: 30px; background-color: #000; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff; } .mypage.app .mb_modify .section .content .line .select { } .mypage.app .mb_modify .section .content .line .select select { background-color: #fff; appearance:none; width: 100%; padding: 18px 24px 19px; height: 60px; border-radius: 30px;border: solid 1px #e1e5ed; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; background-image: url(/resources/img/btn-select-04-option-1-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: right 14px center; } .mypage.app .mb_modify .section .content .line .select select option[value=""][disabled] { display: none; } .mypage.app .mb_modify .section .content .line .select select optgroup { color: #000} .mypage.app .mb_modify .section .content .line .select select option { color: #000} .mypage.app .mb_modify .section .content .line .select select select:invalid {color: #000;} .mypage.app .mb_modify .section .content .noti { padding: 8px 0 0 24px; margin: 0; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3; } .mypage.app .mb_modify .section .content .pw_line { padding: 17px 0px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .mypage.app .mb_modify .section .content .pw_line .tit { font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; color: #000; } .mypage.app .mb_modify .section .content .pw_line button.underline { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; padding-bottom: 1px solid #2d2d2d; padding-bottom: 3px;} .mypage.app .mb_modify .section .content .profile { padding: 2px 0px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .mypage.app .mb_modify .section .content .profile .tit { font-size: 16px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; color: #000; } .mypage.app .mb_modify .section .content .profile .profile_icon { position: relative; margin-right: 10px; } .mypage.app .mb_modify .section .content .profile .profile_icon .image_preview { overflow: hidden; border-radius: 23px; width: 46px; height: 46px; border: solid 2px #000; } .mypage.app .mb_modify .section .content .profile .profile_icon .file { position: absolute; bottom:0; right: -10px; } .mypage.app .mb_modify .section .content .profile .profile_icon .file input[type=file] { display: none; width: 0; height: 0; position: absolute; top:0; left:0; } .mypage.app .mb_modify .section .content .profile .profile_icon .file label { display: flex; } .mypage.app .mb_modify .section .content .profile .profile_icon img { } .mypage.app .mb_modify .section .content .line .head {} .mypage.app .mb_modify .section .content .line .head label { margin: 0; padding: 0; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .mypage.app .mb_modify .section .content .line .head .sub_ment { margin-top: 10px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #2d2d2d; } .mypage.app .mb_modify .section .content .checkbox { margin-top: 23px;} .mypage.app .mb_modify .section .content .checkbox label { } .mypage.app .mb_modify .section .content .checkbox input[type=checkbox] { } .mypage.app .mb_modify .section .content .checkbox .agree_content { height: 130px; overflow-y: scroll; margin: 13px 0 0;padding: 24px 24px 0;border-radius: 20px;background-color: #f8fafc;} .mypage.app .mb_modify .section .content .checkbox .agree_content .inner { padding-bottom: 24px; font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #8992a3; } .mypage.app .mb_modify .section .content .checkbox label { background-image: url(/resources/img/btn-checkbox-nor@3x.png); background-size: 28px 28px; background-repeat: no-repeat; background-position: 2px center; padding-left: 38px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 28px;letter-spacing: normal;color: #2d2d2d; } .mypage.app .mb_modify .section .content .checkbox input[type=checkbox] { display: none; position: absolute; width: 0; height: 0;border: 0; background: none; } .mypage.app .mb_modify .section .content .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-sel@3x.png); } .mypage.app .setting { } .list_type_01 { } .list_type_01 .section {margin-top: 20px;position: relative; padding-bottom: 20px; } .list_type_01 .section:last-child:after { content: ""; width: 0; } .list_type_01 .section:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 1px; background-color: #e1e5ed; } .list_type_01 .section .head { } .list_type_01 .section .head .tit { padding: 20px 20px 12px; font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .list_type_01 .section .list { margin-top: 10px; } .list_type_01 .section .list ul { } .list_type_01 .section .list ul li { } .list_type_01 .section .list ul li a { display: block; padding: 17px 20px; background-image: url(/resources/img/btn-forward-02-mid-1-nor@3x.png);background-repeat: no-repeat;background-size: 14px 14px;background-position: right 20px center;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; background-color: #fff;} .list_type_01 .section .list ul li a:hover { background-image: url(/resources/img/btn-forward-02-mid-2-sel@3x.png); background-color: #f8fafc; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .list_type_02 { padding-top: 10px; } .list_type_02 .section { padding: 0 20px; position: relative; } .list_type_02 .section~.section { margin-top: 20px; } .list_type_02 .section.fix_list:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 2px; background-color: #000; } .list_type_02 .section ul { } .list_type_02 .section ul li { padding: 24px 0 25px; background-image: url(/resources/img/btn-forward-02-mid-1-nor@3x.png); background-size: 14px 14px; background-position: right center; background-repeat: no-repeat; border-bottom: 1px solid #e1e5ed;; } .list_type_02 .section ul li .tit { width: 90%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .list_type_02 .section ul li .date { margin-top: 6px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #b9c1d2; } .list_type_03 { } .list_type_03 .horizon_scroll_tab { padding: 20px 0; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .list_type_03 .horizon_scroll_tab::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .list_type_03 .horizon_scroll_tab ul { display: flex; white-space: nowrap; padding: 0 20px; width: fit-content; } .list_type_03 .horizon_scroll_tab ul li { font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;padding: 16px 20px 14px; border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .list_type_03 .horizon_scroll_tab ul li~li { margin-left: 10px; } .list_type_03 .horizon_scroll_tab ul li.active { background-color: #000; color: #fff; } .list_type_03 .section { margin-top: 10px; padding: 0 20px; position: relative; } .list_type_03 .section~.section { margin-top: 20px; } .list_type_03 .section.fix_list:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 2px; background-color: #000; } .list_type_03 .section ul { } .list_type_03 .section ul li { padding: 25px 0 25px; display: flex; width: 100%; justify-content: start; align-items: start; border-bottom: 1px solid #e1e5ed;; } .list_type_03 .section ul li .tit { width: calc(100% - 100px); font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .list_type_03 .section ul li .item { width: 100px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .input_list_01 { } .input_list_01 .section { padding-bottom: 30px; position: relative; } .input_list_01 .section:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 1px; background-color: #e1e5ed; } .input_list_01 .line { padding: 40px 20px 10px; } .input_list_01 .line .noti { padding: 8px 0 0 24px; margin:0; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3;} .input_list_01 .line .noti.warning { color: #ff5039;} .input_list_01 .line .noti.success {color: #4fc7fe;} .input_list_01 .line .label { padding: 0px 0 20px; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .input_list_01 .line .input { position: relative; } .input_list_01 .line .input .input_del_btn { position: absolute; top: 14px; right: 16px; width: 32px; height: 32px; } .input_list_01 .line .input input { padding: 22px 24px; height: 60px; border-radius: 30px;border: solid 1px #e1e5ed;background-color: #fff; font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; color: #000; } .input_list_01 .line .input input.warning { border: solid 1px #ff5039; } .input_list_01 .line .input input:focus { border: solid 1px #4fc7fe; } .input_list_01 .line .input .addr_btn { position: absolute; width: 40px; height: 40px; background-image: url(/resources/img/btn-appbar-search-02-bk@3x.png); background-size: cover; background-position: center center; background-repeat: no-repeat; top: 10px; right: 16px; } .input_list_01 .line .input input~input { margin-top: 10px; } .input_list_01 .line .input input::placeholder { font-family: 'Pretendard'; font-size: 16px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; } .board_detail_01 { padding: 0 20px; } .board_detail_01 .head { padding: 20px 0; border-bottom: 2px solid #000; } .board_detail_01 .head .type { margin-bottom: 6px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .board_detail_01 .head .tit { font-size: 30px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .board_detail_01 .head .date { margin-top: 10px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #b9c1d2; } .board_detail_01 .content { margin-top: 30px; font-size: 16px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .board_detail_01 .content .underline { text-decoration: underline; } .term_detail_01 { padding: 0 20px; } .term_detail_01 .head { padding: 40px 0; border-bottom: 2px solid #000; } .term_detail_01 .head .type { margin-bottom: 6px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .term_detail_01 .head .tit { font-size: 24px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.25;letter-spacing: normal;color: #000; } .term_detail_01 .head .detit {font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: center;color: #000;} .term_detail_01 .head .sub { margin-top: 6px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: center;color: #000;} .term_detail_01 .head .date { margin-top: 10px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #b9c1d2; } .term_detail_01 .head .ment { margin-top: 40px; font-size: 14px;sfont-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content { margin-top: 40px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content .item~.item { margin-top: 40px; } .term_detail_01 .content .item { } .term_detail_01 .content .item b { display: block; margin-bottom: 20px; font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .term_detail_01 .content .item ol { list-style: auto; list-style-type: decimal; } .term_detail_01 .content .item ol li { margin-left: 16px; padding-left: 4px; list-style: auto; } .term_detail_01 .content .item ol li a { color: #333; } .term_detail_01 .content .item ol li ol { margin-top: 10px; } .term_detail_01 .content .item ol li~li { margin-top: 10px; } .term_detail_01 .content .underline { text-decoration: underline; } .term_detail_01 .content .item .table { margin-top: 20px; } .term_detail_01 .content .item .table table { text-align: left; width: 100%; } .term_detail_01 .content .item .table table th, .term_detail_01 .content .item .table table td { vertical-align: middle; line-break: anywhere; } .term_detail_01 .content .item .table table th { padding: 20px 10px; border-top: 1px solid #000; border-bottom: 1px solid #000; font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal; color: #000; } .term_detail_01 .content .item .table table td { border-bottom: 1px solid #e1e5ed; padding:10px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content .item .table table td.bold { font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content .item .table table td.line_left { border-left: 1px solid #e1e5ed; } .term_detail_01 .content .item .table table th~th, .term_detail_01 .content .item .table table td~td { border-left: 1px solid #e1e5ed; } .term_detail_01 .content .item .table table td .lv_mark { display: inline-block; font-size: 10px; padding: 5px 8px; border-radius: 10px;box-shadow: 2px 4px 10px 0 rgba(60, 67, 72, 0.16);font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .term_detail_01 .content .item .table table td .rainbow { background-image: linear-gradient(107deg, #ff7751 0%, #ac3bff 35%, #5cc2ff 68%, #62ff7c); color: #fff; } .term_detail_01 .content .item .table table td .redt { background-color: #ff3c3c; color: #fff;} .term_detail_01 .content .item .table table td .pink { background-color: #ff6d92; color: #fff; } .term_detail_01 .content .item .table table td .orange { background-color: #ff6833; color: #fff; } .term_detail_01 .content .item .table table td .purple { background-color: #8900fd; color: #fff; } .term_detail_01 .content .item .table table td .blue { background-color: #1a9cff; color: #fff; } .term_detail_01 .content .item .table table td .green { background-color: #16d91b; color: #fff; } .term_detail_01 .content .item .table table td .yellow { background-color: #fdc000; color: #fff; } .term_detail_01 .content .item .table table td .white { background-color: #fff; color: #abb4c4; } .term_detail_01 .content .item .table.centered td, .term_detail_01 .content .item .table.centered th { text-align: center; } .term_detail_01 .content .item .point_info { } .term_detail_01 .content .item .point_info .line { padding: 20px 0; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; } .term_detail_01 .content .item .point_info .line~.line { border-top: 1px solid #e1e5ed; } .term_detail_01 .content .item .point_info .icon { width: 100px; height: 100px; } .term_detail_01 .content .item .point_info .icon img { } .term_detail_01 .content .item .point_info .ment { width: calc(100% - 100px); } .term_detail_01 .content .item .point_info .ment .tit { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content .item .point_info .ment .desc { margin-top: 10px; } .term_detail_01 .content .item .point_info .ment .desc ul { } .term_detail_01 .content .item .point_info .ment .desc ul li { position: relative; padding-left: 14px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .term_detail_01 .content .item .point_info .ment .desc ul li:before { content: '・'; position: absolute; top: 0; left: 0; } .term_detail_01 .content .item .point_info .ment .desc ul li~li { margin-top: 10px; } .introduce { } .introduce .content { } .introduce .content .title { padding: 40px 20px; font-size: 24px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.42;letter-spacing: normal;color: #000; } .introduce .content .textual { padding: 0 20px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .prd_list_02 .list { padding: 0 20px; } .prd_list_02 .list ul { } .prd_list_02 .list ul li { display: flex; width: 100%; justify-content: space-between; align-items: start; padding: 10px 0 24px; border-bottom: 1px solid #e1e5ed; height: 176px; } .prd_list_02 .list ul li~li { margin-top: 10px; } .prd_list_02 .list ul li .thumb { width: 106px; height: 106px; } .prd_list_02 .list ul li .info { width: calc(100% - 106px); padding: 6px; height: 100%; position: relative; } .prd_list_02 .list ul li .info .prd_tit { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .prd_list_02 .list ul li .info .sub { margin-top: 2px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; white-space: nowrap; width: 100%; text-overflow: ellipsis; overflow: hidden; } .prd_list_02 .list ul li .info .option { margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff5039; } .prd_list_02 .horizon_scroll_tab~.list { margin-top: 20px;} .prd_list_02 .horizon_scroll_tab { padding: 20px 0; overflow-x: scroll; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .prd_list_02 .horizon_scroll_tab::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera*/ } .prd_list_02 .horizon_scroll_tab ul { display: flex; white-space: nowrap; padding: 0 20px; width: fit-content; } .prd_list_02 .horizon_scroll_tab ul li { font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;padding: 16px 20px 14px; border-radius: 30px;box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .prd_list_02 .horizon_scroll_tab ul li~li { margin-left: 10px; } .prd_list_02 .horizon_scroll_tab ul li.active { background-color: #000; color: #fff; } .prd_list_02 .list ul li .info .button { margin-top: 26px; text-align: right; } .prd_list_02 .list ul li .info .button button { padding: 15px 14px; border-radius: 21px; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; } .prd_list_02 .list ul li .info .fixed_bottom { column-gap: 10px; padding: 0 6px; display: flex; position: absolute; bottom: 0; width: 100%; justify-content: end; align-items: center; } .prd_list_02 .list ul li .info .fixed_bottom button { padding: 15px 14px; border-radius: 21px; font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; } .prd_list_02 .list ul li .info .fixed_bottom .d_day { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #ff5039; } button.join_wating { border: solid 1px #d4d8df;background-color: #fff; color: #b9c1d2; } button.join_do { background-color: #4fc7fe; color: #fff; } button.join_done { border: solid 1px #000; color: #000; } /* 009 마이페이지 끝 et03 20221114 */ /* 장바구니 시작 2022.11.03 et03 */ .cart.app { padding-bottom: 120px; background-image: linear-gradient(to bottom, #fff 40%, #f7f5f5); } .cart.app input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .cart.app .cart_list { padding-top: 60px; } .cart.app .cart_list .total:after { content: ""; position: absolute; bottom: 0; width: calc(100% - 40px); left: 20px; height: 2px; background-color: #000; } .cart.app .cart_list .total { position: relative; padding: 16px 20px 16px 18px; display: flex; justify-content: space-between; align-items: center; } .cart.app .cart_list .total .checkbox { position: relative; } .cart.app .cart_list .total .checkbox label { height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;color: #000; background-image: url(/resources/img/btn-checkbox-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px; } .cart.app .cart_list .total .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-02-small-2-sel@3x.png); } .cart.app .cart_list .total .checkbox label font { font-family: 'Pretendard', sans-serif; } .cart.app .cart_list .total .choosen_del_btn { height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; background-image: url(/resources/img/btn-delete-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px; } .cart.app .cart_list .list { padding: 20px; } .cart.app .cart_list .list ul { } .cart.app .cart_list .list ul li { position: relative; border-radius: 20px; box-shadow: 0 4px 10px 0 rgba(60, 67, 72, 0.26);background-color: #fff; } .cart.app .cart_list .list ul li~li { margin-top: 20px; } .cart.app .cart_list .list ul li.cantsell { opacity: .4;} .cart.app .cart_list .list ul li.cantsell .card_top .checkbox label { background-image: url(/resources/img/btn-checkbox-02-small-4-null@3x.png); } .cart.app .cart_list .list ul li .card_top { padding: 14px 14px 10px; display: flex; justify-content: space-between; align-items: center; } .cart.app .cart_list .list ul li .card_top .checkbox { position: relative; } .cart.app .cart_list .list ul li .card_top .checkbox label { height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;color: #000; background-image: url(/resources/img/btn-checkbox-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px; } .cart.app .cart_list .list ul li .card_top .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-02-small-2-sel@3x.png); } .cart.app .cart_list .list ul li .card_top .card_del_btn { height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; background-image: url(/resources/img/btn-delete-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px; } .cart.app .cart_list .list ul li .card_content { padding-bottom: 12px; display: flex; justify-content: space-between; align-items: center; } .cart.app .cart_list .list ul li .card_content .thumb { position: relative; width: 106px; height: 106px; display: flex; justify-content: center; align-items: center; } .cart.app .cart_list .list ul li .card_content .thumb img { } .cart.app .cart_list .list ul li .card_content .thumb .soldout { padding: 6px 10px 5px; white-space: nowrap; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);border-radius: 12px; background-color: rgba(255,68,68,.8);font-family: 'Pretendard', sans-serif; font-size: 10px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; color: #fff; } .cart.app .cart_list .list ul li .card_content .info { width: calc(100% - 106px); margin-left: 6px; } .cart.app .cart_list .list ul li .card_content .info .brand_name { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .cart.app .cart_list .list ul li .card_content .info .prd_name {margin-top: 2px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .cart.app .cart_list .list ul li .card_content .info .price { margin-top: 8px; display: flex; justify-content: start; align-items: center; } .cart.app .cart_list .list ul li .card_content .info .price .sell_pri { font-family: 'Pretendard', sans-serif; font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44; } .cart.app .cart_list .list ul li .card_content .info .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-family: 'Pretendard', sans-serif; font-size: 10px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #cad4e1; } .cart.app .cart_list .list ul li .card_content .info .price .ment { font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44; } .cart.app .cart_list .list ul li .card_content .info .opt { margin-top: 18px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .cart.app .cart_list .list ul li .not_sell_now { white-space: nowrap; position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #fff; padding: 9px 20px;border-radius: 15px; background-color: rgba(0, 0, 0, 0.6);} .cart.app .cart_list .sum { margin-top: 20px; position: relative; padding: 26px 20px; } .cart.app .cart_list .sum::before { position: absolute; content: ''; width: calc(100% - 40px); top:0; left: 20px; height: 2px; background-color: #000; } .cart.app .cart_list .sum .line { display: flex; width: 100%; justify-content: space-between; align-items: center; } .cart.app .cart_list .sum .line~.line { margin-top: 22px; } .cart.app .cart_list .sum .line .item { font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .cart.app .cart_list .sum .line .value { font-size: 24px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #f44; } .cart.app .cart_list .sum .noti { padding:0; margin-top: 26px; width: 100%; display: flex; justify-content: start; align-items: start; } .cart.app .cart_list .sum .noti .icon { width: 26px; height: 26px; } .cart.app .cart_list .sum .noti .ment { margin-top: 1px; font-size: 10px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #000; } /* 장바구니 끝 2022.11.03 et03 */ /* 011_주문 시작 2022.11.04 et03 */ .order.app { padding: 60px 0 120px; height: 100%; } .order.app .deli_addr_info { margin: 0 20px; } .order.app .deli_addr_info .title { padding: 29px 0; display: flex; justify-content: space-between; align-items: center; } .order.app .deli_addr_info .title .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .order.app .deli_addr_info .title button { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .order.app .deli_addr_info .deli_addr { padding: 10px 0 30px; } .order.app .deli_addr_info .deli_addr .user_info { display: flex; justify-content: start; align-items: center; } .order.app .deli_addr_info .deli_addr .user_info .user_name { position: relative; font-size: 14px;padding-right: 10px; margin-right: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .deli_addr_info .deli_addr .user_info .user_name:after { content: ''; position: absolute; right: 0px; width: 1px;height: 18px;background-color: #d4d8df; } .order.app .deli_addr_info .deli_addr .user_info .deli_mark { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44; } .order.app .deli_addr_info .deli_addr .user_addr { margin-top: 18px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .order.app .deli_addr_info .deli_addr .user_tel { font-family: 'Pretendard', sans-serif; margin-top: 16px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .deli_addr_info .select { padding-bottom: 40px; } .order.app .deli_addr_info .select button { text-align: left; font-size: 14px; width: 100%;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;padding: 12px 14px 12px 24px;border-radius: 25px;border: solid 1px #e1e5ed;background-color: #fff;background-image: url(/resources/img/btn-select-04-option-1-nor@3x.png);background-size: 26px 26px;background-repeat: no-repeat;background-position: right 14px center;color: #000; } .order.app .pickup_prd_list { margin: 0 20px; border-top: 2px solid #000; } .order.app .pickup_prd_list .title { padding: 29px 0; display: flex; justify-content: space-between; align-items: center; } .order.app .pickup_prd_list .title .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .order.app .pickup_prd_list .title .select { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .order.app .pickup_prd_list .list { } .order.app .pickup_prd_list .list ul { } .order.app .pickup_prd_list .list ul li { margin-top: 10px; padding-bottom: 30px; border-bottom: 1px solid #e1e5ed; } .order.app .pickup_prd_list .list ul li:last-child { border-bottom: 0; } .order.app .pickup_prd_list .list ul li .prd_box { padding:10px 0; display: flex; justify-content: space-between; align-items: center; } .order.app .pickup_prd_list .list ul li .prd_box .thumb { display: flex; justify-content: center; align-items: center; width: 106px; height: 106px; object-fit: contain; } .order.app .pickup_prd_list .list ul li .prd_box .thumb img { } .order.app .pickup_prd_list .list ul li .prd_box .info { width: calc(100% - 106px); padding: 10px 0 12px 6px; } .order.app .pickup_prd_list .list ul li .prd_box .info .top { display: flex; justify-content: space-between; align-items: center; } .order.app .pickup_prd_list .list ul li .prd_box .info .top .brand { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .pickup_prd_list .list ul li .prd_box .info .top .deli_type { font-size: 12px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .order.app .pickup_prd_list .list ul li .prd_box .info .prd_name { margin-top: 2px; font-size: 12px; font-weight: 300; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; color: #000; } .order.app .pickup_prd_list .list ul li .prd_box .info .price { margin-top: 8px; display: flex; justify-content: start; align-items: center; } .order.app .pickup_prd_list .list ul li .prd_box .info .price .sell_pri { font-family: 'Pretendard', sans-serif; font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44; } .order.app .pickup_prd_list .list ul li .prd_box .info .price .ori_pri { text-decoration: line-through; margin-left: 2px; font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.2;letter-spacing: normal;color: #cad4e1; } .order.app .pickup_prd_list .list ul li .prd_box .info .option { margin-top: 16px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #f44; } .order.app .pickup_prd_list .list ul li .coupon_box { margin-top: 30px; } .order.app .pickup_prd_list .list ul li .coupon_box button { text-align: left; font-size: 14px; width: 100%;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;padding: 12px 14px 12px 24px;border-radius: 25px;border: solid 1px #e1e5ed;background-color: #fff;background-image: url(/resources/img/btn-select-04-option-1-nor@3x.png);background-size: 26px 26px;background-repeat: no-repeat;background-position: right 14px center;color: #000; } .order.app .pickup_prd_list .list ul li .coupon_box button.coupon_nothing { background-image: none; opacity: .4; } .order.app .payment_info { margin: 0 20px; border-top: 2px solid #000; } .order.app .payment_info .sum { margin-top: 40px; border-radius: 20px;border: solid 1px #e1e5ed;background-color: #fff } .order.app .payment_info .sum .top { border-bottom: solid 1px #e1e5ed; padding: 30px 0; } .order.app .payment_info .sum .line {padding: 0 20px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .order.app .payment_info .sum .line~.line { margin-top: 14px; } .order.app .payment_info .sum .top .item {font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .payment_info .sum .top .value { font-family: 'Pretendard', sans-serif; font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .order.app .payment_info .sum .bottom { padding: 30px 0; } .order.app .payment_info .sum .bottom .item { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .order.app .payment_info .sum .bottom .value { font-family: 'Pretendard', sans-serif; font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #f44; } .order.app .payment_info .mypoint { margin-top: 20px; padding: 30px 20px;border-radius: 20px;background-color: #f3f5fa; } .order.app .payment_info .mypoint .line { padding: 0 20px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .order.app .payment_info .mypoint .item { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .order.app .payment_info .mypoint .value { font-family: 'Neue Einstellung', sans-serif; font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #f44; } .order.app .payment_info .noti { padding:0; margin-top: 20px; width: 100%; display: flex; justify-content: center; align-items: center; } .order.app .payment_info .noti img { } .order.app .payment_info .noti span { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #f44; } .order.app .destination { padding: 10px 20px 0; } .order.app .destination .list { } .order.app .destination .list ul { } .order.app .destination .list ul li~li { margin-top: 20px;} .order.app .destination .list ul li { border-radius: 20px; border: solid 1px #e1e5ed; background-color: #fff; } .order.app .destination .list ul li .header { padding: 14px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .order.app .destination .list ul li .header .checkbox { position: relative; } .order.app .destination .list ul li .header .checkbox input[type=checkbox] { display: none; width: 0; height: 0; position: absolute; top:0; left: 0; } .order.app .destination .list ul li .header .checkbox label { height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;color: #000; background-image: url(/resources/img/btn-checkbox-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px; } .order.app .destination .list ul li .header .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-02-small-2-sel@3x.png); } .order.app .destination .list ul li .header .del_btn {height: 26px; font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 26px;letter-spacing: normal;text-align: right;color: #000; background-image: url(/resources/img/btn-delete-02-small-1-nor@3x.png); background-position: left center; background-size: 26px 26px; background-repeat: no-repeat; padding-left: 30px;} .order.app .destination .list ul li .content { padding: 10px 20px 20px; } .order.app .destination .list ul li .content .deli_mark { height: auto; display: inline-block; padding-bottom: 3px; border-bottom: 1px solid #000; font-size: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .destination .list ul li .content .user_name { margin-top: 16px; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .destination .list ul li .content .deli_addr { margin-top: 10px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .order.app .destination .list ul li .content .deli_tel { margin-top: 10px; font-family: 'Pretendard', sans-serif; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .order.app .destination .list ul li .content .button { margin-top: 20px; text-align: right; } .order.app .destination .list ul li .content .button button { padding: 16px 20px;border-radius: 30px;background-color: #000;font-size: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #fff;} .order.app .destination > .button { margin-top: 30px; } .order.app .destination > .button button { display: flex; justify-content: center; align-items: center; width: 100%; border: solid 1px #e1e5ed; padding: 11px 30px;border-radius: 30px;background-color: #fff; font-size: 16px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .order.app .destination .list ul li.basic_dest { border: solid 1px #000; } .order.app .destination .list ul li.basic_dest .header { display: none;} .order.app .destination .list ul li.basic_dest .content { padding: 20px;} .order.app .destination .list ul li.basic_dest .content .deli_mark { color: #ff4536; border-bottom: 1px solid #ff4536; } .order.app .destination .add_destination { margin-top: 40px; display: none; } .order.app .destination .add_destination .tit { margin-bottom: 20px; font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .order.app .destination .add_destination .card { padding: 30px 20px 20px;border-radius: 20px;border: solid 1px #000;background-color: #fff; } .order.app .destination .add_destination .card .line { position: relative;} .order.app .destination .add_destination .card .line~.line { margin-top: 30px;} .order.app .destination .add_destination .card label { margin-bottom: 10px; font-size: 10px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .destination .add_destination .card input { height: auto; border:0; padding:0; border-radius: 0; border-bottom: 1px solid #e1e5ed; padding: 8px 0 13px; font-size: 14px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.14;letter-spacing: normal;color: #000;} .order.app .destination .add_destination .card input::placeholder { color: #cad4e1; } .order.app .destination .add_destination .card input:focus { border-color: #4fc7fe; } .order.app .destination .add_destination .card .input~.input { margin-top: 16px; } .order.app .destination .add_destination .card .button { margin-top: 40px; width:100%; display: flex; justify-content: end; align-items: center; column-gap: 10px; } .order.app .destination .add_destination .card .button button { padding: 16px 20px;border-radius: 30px; font-size: 10px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right; } .order.app .destination .add_destination .card .button .cancel_btn { color: #000; background-color: #fff; } .order.app .destination .add_destination .card .button .add_btn { background-color: #000; color: #fff; } .order.app .destination .add_destination .card .input { position: relative;} .order.app .destination .add_destination .card .input .addr_btn { border: 0; padding: 0; font-size: 0; background-color: transparent; position: absolute; right:0; top:0; width: 32px; height: 32px; background-image: url(/resources/img/btn-input-search-z-02-bk-1-nor@3x.png); background-size: cover; background-repeat: no-repeat; background-position: center center; } .order.app .destination .add_destination .card .del_input_btn { position: absolute; top: 20px; right: 0; width: 32px; height: 32px; background-image: url(/resources/img/btn-input-del-nor@3x.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } .order.app .destination .add_destination .card input[name^="addr"] + .del_input_btn { top: 0; } .order.app .destination .add_destination .card input[name="addr1"] + .del_input_btn { display: none; } .del_input_btn { position: absolute; top: 20px; right: 0; width: 32px; height: 32px; background-image: url(/resources/img/btn-input-del-nor@3x.png); background-repeat: no-repeat; background-size: cover; background-position: center center; } @media all and (max-width: 375px) { .order.app .pickup_reg_done .ment{ margin-top: 30px !important;} } .order.app .pickup_reg_done { font-family: 'Pretendard'; } .order.app .pickup_reg_done .ment { margin-top: 77px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: center; color: #000; } .order.app .pickup_reg_done .ment .user { font-family: 'Pretendard'; font-weight: 900; font-size: 16px;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: center;color: #000; } .order.app .pickup_reg_done .mystat { margin-top: 30px; padding: 0 20px; } .order.app .pickup_reg_done .mystat .case { height: 116px; display: flex; width: 100%; justify-content: space-between; align-items: center; padding: 20px; border-radius: 20px; border: solid 1px #e1e5ed; background-color: #fff; } .order.app .pickup_reg_done .mystat .case > div { text-align: left; position: relative; height: 100%; } .remain_point { width: 52%;} .remain_pickup { width: calc(47% - 30px); margin-left: 30px; } .order.app .pickup_reg_done .mystat .case .divider { width: 1px; height: 72px; background-color: #e1e5ed; } .order.app .pickup_reg_done .mystat .case .tit { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .order.app .pickup_reg_done .mystat .case .value { position: absolute; bottom: 0; left: 0px; font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #ff5039; } .order.app .pickup_reg_done .desc { margin-top: 24px; padding: 0 20px; } .order.app .pickup_reg_done .desc ul { word-break: keep-all;} .order.app .pickup_reg_done .desc ul li { position: relative; padding-left: 10px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .order.app .pickup_reg_done .desc ul li~li { margin-top: 10px; } .order.app .pickup_reg_done .desc ul li:before { content: '•'; position: absolute; top: 0px; left: 0; } .order.app .ord_detail { position: absolute; width: 100%; height: calc(100% - 60px); overflow-y: scroll; } .order.app .ord_detail .top_head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 30px 20px; } .order.app .ord_detail .top_head .tit { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .ord_detail .top_head .value { margin-top: 4px; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list { } .order.app .ord_detail .detail_list .list_head { position: relative; padding: 23px 20px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .list_head:after { content: ''; position: absolute; bottom:0; left: 20px; width: calc(100% - 40px); height: 2px; background-color: #000; } .order.app .ord_detail .detail_list .section_list { margin-top: 10px; background-color: #f4f7fd; } .order.app .ord_detail .detail_list .section_list .section { background-color: #fff; padding-top: 10px; } .order.app .ord_detail .detail_list .section_list .section~.section { margin-top: 10px; } .order.app .ord_detail .detail_list .section_list .section .head { padding: 29px 20px; display: flex; justify-content: space-between; align-items: center; width: 100%; } .order.app .ord_detail .detail_list .section_list .section .head .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .section .head button { padding-bottom: 3px; border-bottom: 1px solid #2d2d2d;; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .order.app .ord_detail .detail_list .section_list .section .head .ment { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .order.app .ord_detail .detail_list .section_list .section .list { padding: 0 20px; } .order.app .ord_detail .detail_list .section_list .section .list ul { } .order.app .ord_detail .detail_list .section_list .section .list ul li { padding: 20px 0 30px; width: 100%; display: flex; justify-content: space-between; align-items: start; } .order.app .ord_detail .detail_list .section_list .section .list ul li~li { border-top: 1px solid #e1e5ed; } .order.app .ord_detail .detail_list .section_list .section .list ul li .thumb { width: 106px; height: 106px; overflow: hidden; } .order.app .ord_detail .detail_list .section_list .section .list ul li .thumb img { object-fit: contain; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info { position: relative; width: calc(100% - 106px); padding: 10px 0 0 6px; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .prd_tit { font-size: 12px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000;} .order.app .ord_detail .detail_list .section_list .section .list ul li .info .status { position: absolute; top: 10px; right: 0; font-size: 10px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .status.shipping { color: #0fdf8b; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .status.done { color: #000; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .status.cancel { color: #ff5039; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .status.preparing { color: #4fc7fe; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .sub { margin-top: 2px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .option { margin-top: 8px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #ff5039; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .ship_type { margin-top: 8px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price { margin-top: 30px; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price .line { width: 100%; display: flex; justify-content: space-between; align-items: center; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price .line~.line { margin-top: 2px; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price .line .item { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price .line .value { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: right;color: #000; } .order.app .ord_detail .detail_list .section_list .section .list ul li .info .price .line.sum .value { font-size: 12px; font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: right;color: #ff5039; } .order.app .ord_detail .detail_list .section_list .info_section { margin-top: 10px; padding: 20px;background-color: #fff; } .order.app .ord_detail .detail_list .section_list .info_section > div { border-radius: 20px; border: solid 1px #e1e5ed;background-color: #fff; } .order.app .ord_detail .detail_list .section_list .info_section > div~div { margin-top: 16px; } .order.app .ord_detail .detail_list .section_list .info_section > div .top { padding: 24px 20px 30px; border-bottom: 1px solid #e1e5ed; } .order.app .ord_detail .detail_list .section_list .info_section > div .top .tit { margin-bottom: 30px; display: inline-block; font-size: 18px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; padding-bottom: 3px; border-bottom: 3px solid #000; } .order.app .ord_detail .detail_list .section_list .info_section > div .line { width: 100%; display: flex; justify-content: space-between; align-items: start; } .order.app .ord_detail .detail_list .section_list .info_section > div .line~.line { margin-top: 10px; } .order.app .ord_detail .detail_list .section_list .info_section > div .top .line .item { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .info_section > div .top .line .value { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;text-align: right;color: #000; } .order.app .ord_detail .detail_list .section_list .info_section > div .bottom { padding: 30px 20px; } .order.app .ord_detail .detail_list .section_list .info_section .ord_info .bottom .line .item { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .info_section .ord_info .bottom .line .value { font-size: 24px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #ff5039; } .order.app .ord_detail .detail_list .section_list .info_section .ship_info .bottom .line .item { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;color: #000; } .order.app .ord_detail .detail_list .section_list .info_section .ship_info .bottom .line .value { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal;text-align: right;color: #000; } /* 011_주문 끝 2022.11.04 et03 */ /* 012_이벤트 시작 2022.11.24 et03 */ /*.event.app { padding-top: 60px; padding-bottom: 60px; height: auto; } 2023.05.08.도수홍님 요청 이벤트 상세에서 하단 GNB 메뉴제*/ .event.app { padding-top: 60px; height: auto; } .event.app img { width: 100%; height: 100%; object-fit: cover;} .moving_tab { padding: 10px 20px; } .moving_tab ul { position: relative; display: flex; height: 66px; justify-content: space-between; align-items: center; width: 100%; padding: 8px 10px; border-radius: 33px; background-color: #f3f5fa; } .moving_tab ul .wht_back { transition: .2s all; left: 10px; z-index: 0; position: absolute; width: calc(50% - 10px); height: 50px; border-radius: 30px; box-shadow: 0 2px 4px 0 rgba(58, 65, 79, 0.1);background-color: #fff; } .moving_tab ul .wht_back.right { transition: .2s all; left: 50%; } .moving_tab ul li { z-index: 2; width: 50%; padding: 0 20px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .moving_tab ul li a { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #8992a3; } .moving_tab ul li.active { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .moving_tab ul li.active a { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .tab_contents.contents_02 { display: none; } .event.app .list { } .event.app .list ul { } .event.app .list ul li { margin-top: 20px; } .event.app .list ul li .thumb { position: relative; display: flex; width: 100%; /*height: 200px;*/ overflow: hidden; } .event.app .list ul li .thumb img { object-fit: cover; width: 100%; height: 100%; } .event.app .list ul li .thumb .ended_event { display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0.6) ; font-size: 24px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } .event.app .list ul li .info { padding: 20px 20px 30px; } .event.app .list ul li .info .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.22;letter-spacing: normal;color: #2d2d2d; } .event.app .list ul li .info .date { margin-top: 10px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #2d2d2d; } .event.app .reply_input { padding: 20px 0 0; } .event.app .reply_input .header { padding: 0 20px; width: 100%; } .event.app .reply_input .header .profile { display: flex; justify-content: flex-start; align-items: center; column-gap: 10px; } .event.app .reply_input .header .profile .icon { width: 50px; display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 25px; overflow: hidden; } .event.app .reply_input .header .profile .icon img { object-fit: cover; } .event.app .reply_input .header .profile .info { width: calc(100% - 60px); } .event.app .reply_input .header .profile .info .name {font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .event.app .reply_input .header .profile .info .line { margin-top: 8px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .event.app .reply_input .header .profile .info .line .date { font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .event.app .reply_input .header .profile .info .line .txt_length { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .event.app .reply_input .textarea { padding: 0 20px 40px; margin-top: 20px; position: relative; } .event.app .reply_input .textarea textarea { resize: none; width: 100%; height: 160px; color: #000; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;padding: 24px 24px; border-radius: 20px; background-color: #fff; } .event.app .reply_input .textarea textarea::placeholder { font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #cad4e1; } .event.app .reply_input .textarea .button { margin-top: 30px; } .event.app .reply_input .textarea .button button { width: 100%; padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; background-color: #4fc7fe; } .event.app .reply_input .textarea .button button:disabled { color: rgba(255, 255,255,.4); } .event.app .reply_list { } .event.app .reply_list ul { padding-bottom: 80px; } .event.app .reply_list ul li { margin-top: 20px; position: relative; } .event.app .reply_list ul li:after { content: ''; position: absolute; bottom:0; left: 20px; width: calc(100% - 40px); height: 1px; background-color: #e1e5ed; } .event.app .reply_list ul li .top { padding: 10px 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .event.app .reply_list ul li .top .user_info { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .event.app .reply_list ul li .top .user_info .icon { width: 50px; display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 25px; overflow: hidden; } .event.app .reply_list ul li .top .user_info .icon img { object-fit: contain; } .event.app .reply_list ul li .top .user_info .info { } .event.app .reply_list ul li .top .user_info .info .nick { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .event.app .reply_list ul li .top .user_info .info .date { margin-top: 6px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .event.app .reply_list ul li .top .botton { display: flex; justify-content: end; align-items: center; column-gap: 10px; } .event.app .reply_list ul li .top .botton button { font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .event.app .reply_list ul li .content { padding: 0px 20px 20px 80px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000;} .slide_bottom { width: 100%; position: relative; margin-top: -30px; padding: 40px 0; background-color: #fff; border-top-left-radius: 30px; border-top-right-radius: 30px; } .slide_bottom .header { padding: 0 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .slide_bottom .header .tit { font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_bottom .header .txt_length { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .slide_bottom .textarea { padding: 0 20px 40px; margin-top: 20px; position: relative; } .slide_bottom .textarea textarea { resize: none; width: 100%; height: 160px; color: #000; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;padding: 24px 24px; border-radius: 20px; border: solid 1px #e1e5ed; background-color: #fff; } .slide_bottom .textarea:after { content: ''; position: absolute; bottom:0; left: 20px; width: calc(100% - 40px); height: 1px; background-color: #e1e5ed; } .slide_bottom .textarea textarea::placeholder { font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #cad4e1; } .slide_bottom .textarea .button { margin-top: 30px; } .slide_bottom .textarea .button button { width: 100%; padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; background-color: #4fc7fe; } .slide_bottom .textarea .button button:disabled { color: rgba(255, 255,255,.4); } .slide_bottom .reply_list { } .slide_bottom .reply_list ul { } .slide_bottom .reply_list ul li { margin-top: 20px; position: relative; } .slide_bottom .reply_list ul li:after { content: ''; position: absolute; bottom:0; left: 20px; width: calc(100% - 40px); height: 1px; background-color: #e1e5ed; } .slide_bottom .reply_list ul li .top { padding: 10px 20px; display: flex; width: 100%; justify-content: space-between; align-items: center; } .slide_bottom .reply_list ul li .top .user_info { display: flex; justify-content: start; align-items: center; column-gap: 10px; } .slide_bottom .reply_list ul li .top .user_info .icon { width: 50px; display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 25px; overflow: hidden; } .slide_bottom .reply_list ul li .top .user_info .icon img { object-fit: contain; } .slide_bottom .reply_list ul li .top .user_info .info { } .slide_bottom .reply_list ul li .top .user_info .info .nick { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_bottom .reply_list ul li .top .user_info .info .date { margin-top: 6px; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #abb4c4; } .slide_bottom .reply_list ul li .top .button { display: flex; justify-content: end; align-items: center; column-gap: 10px; } .slide_bottom .reply_list ul li .top .button button { font-size: 12px; font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .slide_bottom .reply_list ul li .top .txt_length { display: none; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .slide_bottom .reply_list ul li.modi_rep .top .txt_length { display: block; } .slide_bottom .reply_list ul li.modi_rep .top .button { display: none; } .slide_bottom .reply_list ul li .content { padding: 0px 20px 20px 80px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000;} .slide_bottom .reply_list ul li .content textarea { resize: none; height: 150px; white-space:normal; width: 100%; padding: 14px; border-radius: 20px; border: solid 1px #000; background-color: #fff; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_bottom .reply_list ul li .content textarea:focus { border: solid 1px #4fc7fe; } .slide_bottom .reply_list ul li .content textarea:disabled { padding: 0; border: 0; border-radius: 0; overflow: unset; height: fit-content; } .slide_bottom .reply_list ul li .content button.modi_done_btn { margin-top: 10px; width: 100%; padding: 14px 30px;border-radius: 30px;font-size: 14px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; background-color: #4fc7fe; } .slide_bottom .reply_list ul li .content textarea:disabled + button.modi_done_btn { display: none; } .slide_bottom .event_status { width: 100%; padding: 0 20px;} .slide_bottom .event_status button { width: 100%; padding: 22px 30px;border-radius: 30px;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; background-color: #4fc7fe; } .slide_bottom .event_status button:disabled { color: rgba(255, 255,255,.4); } .slide_bottom .event_status button.end_event { color: rgba(255, 255,255,.4); } /* 012_이벤트 끝 2022.11.24 et03 */ .scrollY { overflow-y: scroll !important; } .pointon {pointer-events: auto !important; } /* 하단 픽스트 메뉴 시작 */ .bottom_fixed_menu { padding: 0 25px; z-index: 100; position: fixed; bottom:0; left: 0; width:100%; height: 52px; box-shadow: 0 -2px 6px 0 rgba(0, 0, 0, 0.06); background-color: #fff; } .bottom_fixed_menu ul { display: flex; justify-content: center; align-items: center; column-gap: 8px; height: 100%; } .bottom_fixed_menu ul li { width: 100%; height: 100%; } .bottom_fixed_menu ul li a { display: block; text-align: center; height: 100%; } .bottom_fixed_menu ul li a .icon { display: flex; justify-content: center; align-items: center; margin: 2px auto 2px; width: 32px; height: 32px; overflow: hidden; } .bottom_fixed_menu ul li a .icon .nor { display: block; } .bottom_fixed_menu ul li a .icon .sel { display: none; } .bottom_fixed_menu ul li a .icon .userthumb { width: 25px; height: 25px; overflow: hidden; border-radius: 50%; border: solid 1px #b9c1d2; } .bottom_fixed_menu ul li a .icon .userthumb img { width: 100%; height: 100%; object-fit: cover; } .bottom_fixed_menu ul li.active a .icon .nor { display: none; } .bottom_fixed_menu ul li.active a .icon .sel { display: block; } .bottom_fixed_menu ul li.active a .icon .userthumb { border: solid 1.5px #000; } .bottom_fixed_menu ul li a .menu { font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: center;color: #b9c1d2; } .bottom_fixed_menu ul li.active a .menu { font-family: 'Pretendard', sans-serif; font-size: 12px; font-weight: 900;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;text-align: center;color: #000; } /* 하단 픽스트 메뉴 끝 */ /* 하단 픽스드 버튼 시작 */ .bottom_fixed_solid_btn { position: fixed; bottom: 0; width:100%; left: 0; height: 56px; } .bottom_fixed_solid_btn button { height: 100%; width: 100%; padding: 22px 0 16px; box-shadow: 0 -2px 14px 0 rgba(0, 0, 0, 0.1); background-color: #4fc7fe; font-size: 18px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;} .bottom_fixed_solid_btn button:disabled { color: rgba( 255, 255, 255, .2); } /* 하단 픽스드 버튼 끝 */ /* 노티 및 주의 문구 시작 */ .noti {font-size: 12px; padding-left: 24px; margin-top: 6px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #8992a3;} .wrong { display: none; text-align: left; margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal; color: #ff6a5b; } .correct { display: none; text-align: left; margin-top: 6px; padding: 0 24px; font-size: 12px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal; color: #1a9cff; } /* 노티 및 주의 문구 끝 */ /* 토스트 */ .toast { display: none; position: fixed; top: 10px; left: 0; padding:0 20px; width: 100%; } .toast .inner { position: absolute; display: flex; align-items: center; justify-content: center; width: calc(100% - 40px); border-radius: 10px; background-color: #000; min-height: 70px; } .toast .inner .ment { font-size: 14px; font-weight: bold;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } /* 딤팝업 */ .dim_popup { display: none; position: fixed; top:0; left:0; right: 0; bottom: -2px; z-index: 1001; } .dim_popup .dim { position: absolute; top:0; left:0; right: 0; bottom: -2px; z-index: 1; opacity: 0.7; background-color: #000; } .dim_popup .popup { z-index: 2; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: #fff; width: calc(100% - 40px); padding: 30px; border-radius: 40px; height: fit-content; } .dim_popup .popup .pop_head { margin-bottom: 36px; position: relative; } .dim_popup .popup .pop_head .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_head .close_btn { width: 40px; position: absolute; top: -10px; right: -10px; height: 40px; } .dim_popup .popup .pop_body { font-size: 16px; font-weight: normal; font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;text-align: center;color: #000; } .dim_popup .popup .pop_foot { margin-top: 40px; display: flex; justify-content: end; column-gap: 10px; } .dim_popup .popup .pop_foot button { padding: 18px 30px; border-radius: 30px; width: auto; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .dim_popup .popup .pop_foot button.gradient_red_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .dim_popup .popup .pop_foot button.solid_white_back {font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; padding: 22px 20px; border-radius: 30px; background:#fff;} .dim_popup .popup .pop_body { } .dim_popup .popup .pop_body .content { padding: 10px 0; } .dim_popup .popup .pop_body .content .line { display: flex; justify-content: start; align-items: flex-start; } .dim_popup .popup .pop_body .content .line~.line { margin-top: 20px; } .dim_popup .popup .pop_body .content .line .item { width: 120px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal; text-align: left; color: #000; } .dim_popup .popup .pop_body .content .line .value { width: calc(100% - 120px); font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.29;letter-spacing: normal; text-align: left; color: #000; } .dim_popup .popup .pop_body .prd_buy_box { } .dim_popup .popup .pop_body .prd_buy_box .select_box { border-top-left-radius: 25px; border-top-right-radius: 25px; border: solid 1px #1a9cff; padding: 15px 24px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal; text-align: left; color: #000;background-image: url(/resources/img/btn-select-04-option-1-nor@3x.png); background-position: right 13px center; background-repeat: no-repeat; background-size: 26px 26px;} .dim_popup .popup .pop_body .prd_buy_box .option_box { max-height: 154px; overflow-y: scroll; border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; border: solid 1px #1a9cff; border-top:0; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul { margin-top: 10px; margin-bottom: 10px; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li { text-align: left; padding: 10px 24px; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.choosen { font-weight: bold; color: #f44; background-color: #f8fafc; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.soldout { opacity: 0.2; text-decoration: line-through; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.soldout .prd_name:after { content: '(품절)'; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon { padding: 10px 24px } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .space_between { display: flex; align-items: center; justify-content: space-between; width: 100%;} .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .line { } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .line~.line { margin-top: 4px; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .line .prd_name { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .line .discount { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon .line .date_range { font-family: 'Pretendard', sans-serif; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;text-align: right;color: #000; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon.active { background-color: #f8fafc; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon.active .line .prd_name { color: #f44;font-weight: bold; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon.active .line .discount { color: #f44;font-weight: bold; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li.coupon.active .line .date_range { color: #f44;font-weight: bold;} .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .prd_name { font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .info_foot { margin-top: 6px; width: 100%; display: flex; justify-content: space-between; align-items: center; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .info_foot .price { display: flex; justify-content: start; align-items: center; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .info_foot .price .sell_pri { font-family: 'Pretendard', sans-serif;font-size: 12px; font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .info_foot .price .ori_pri { text-decoration: line-through; margin-left: 4px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.4;letter-spacing: normal;color: #cad4e1; } .dim_popup .popup .pop_body .prd_buy_box .option_box ul li .info_foot .discount { font-family: 'Pretendard', sans-serif; font-size: 12px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.17;letter-spacing: normal;text-align: right;color: #f44; } .dim_popup.lclub_history_pop .popup { border-radius: 40px; padding: 0;} .dim_popup.lclub_history_pop .popup .pop_head { margin-bottom: 0; padding: 20px 20px 20px 30px; display: flex; width: 100%; align-items: center; justify-content: space-between;} .dim_popup.lclub_history_pop .popup .pop_head .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.5;letter-spacing: normal;color: #000; } .dim_popup.lclub_history_pop .pop_head .close_btn { position: static; } .dim_popup .popup .pop_body .scroll { height: 240px; overflow-y: scroll; margin-bottom: 20px; } .dim_popup .popup .pop_body .scroll ul { } .dim_popup .popup .pop_body .scroll ul li { padding: 10px 30px; text-align: left; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .dim_popup .popup .pop_body .scroll ul li:hover { font-weight: bold; background-color: #f3f5fa; } .dim_popup.lclub_cre_pop { } .dim_popup.lclub_cre_pop .popup {} .dim_popup.lclub_cre_pop .popup .pop_head { padding-bottom: 29px ; margin-bottom: 0px; } .dim_popup.lclub_cre_pop .popup .pop_head .close_btn { top: -20px; } .dim_popup.lclub_cre_pop .popup .pop_head .profile { margin-top: 10px; text-align: center; } .dim_popup.lclub_cre_pop .popup .pop_head .profile .thumb { align-items: center; margin: 0 auto; display: flex; border-radius: 30px; overflow: hidden; width: 70px; height: 70px; border: solid 2px #f0f4fa; box-shadow: 0 2px 6px 0 rgba(60, 67, 72, 0.26); } .dim_popup.lclub_cre_pop .popup .pop_head .profile .thumb img { width:100%;object-fit: cover; } .dim_popup.lclub_cre_pop .popup .pop_head .profile .info { margin-top: 12px; } .dim_popup.lclub_cre_pop .popup .pop_head .profile .info .cre_name { font-size: 20px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; } .dim_popup.lclub_cre_pop .popup .pop_head .profile .info .cre_detail { margin-top: 8px; font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #b9c1d2; } .dim_popup.lclub_cre_pop .popup .pop_body { } .dim_popup.lclub_cre_pop .popup .pop_body .section { border-top: 1px solid #e1e5ed; padding-top: 30px; } .dim_popup.lclub_cre_pop .popup .pop_body .section~.section { margin-top: 20px; } .dim_popup.lclub_cre_pop .popup .pop_body .section .head { width: 100%; display: flex; justify-content: space-between; align-items: center; } .dim_popup.lclub_cre_pop .popup .pop_body .section .head .tit { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .dim_popup.lclub_cre_pop .popup .pop_body .section .head .sub { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list { margin-top: 12px; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul { } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li { padding: 8px 0; width: 100%; display: flex; justify-content: start; column-gap: 14px; align-items: center; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li .thumb { width: 54px; height: 54px; border-radius: 24px; overflow: hidden; border: solid 2px #f0f4fa; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li .thumb img { object-fit: cover; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li .info { text-align: left; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li .info .tit { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .dim_popup.lclub_cre_pop .popup .pop_body .section .emb_list ul li .info .desc { margin-top: 4px; font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1.33;letter-spacing: normal;color: #abb4c4; } .dim_popup.lclub_cre_pop .popup .pop_body .section .channel_detail { margin-bottom: 20px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; text-align: left; margin-top: 20px; } .dim_popup.act_sort_pop .popup { padding: 0; overflow: hidden; } .dim_popup.act_sort_pop .popup .pop_head { padding: 28px 30px; margin: 0; } .dim_popup.act_sort_pop .popup .pop_head .close_btn { top: 20px; right: 20px; } .dim_popup.act_sort_pop .popup .pop_body .mission_list { padding-bottom: 20px; } .dim_popup.act_sort_pop .popup .pop_body .mission_list ul { max-height: 240px; overflow-y: scroll; } .dim_popup.act_sort_pop .popup .pop_body .mission_list ul li { text-overflow: ellipsis; overflow: hidden; white-space: pre; padding: 10px 30px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal; text-align: left; color: #000; } .dim_popup.act_sort_pop .popup .pop_body .mission_list ul li:hover { background-color: #f3f5fa; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } /* 슬라이드팝업 */ .slide_popup { display: none; position: fixed; top:0; left:0; right: 0; bottom: -2px; z-index: 1000; } .slide_popup .dim { position: absolute; top:0; left:0; right: 0; bottom: -2px; z-index: 1; opacity: 0.7; background-color: #000; } .slide_popup .popup { z-index: 2; position: absolute; bottom: -100vh; width: 100%; height: calc(100% - 50px); background-color: #fff; border-top-left-radius: 10px; border-top-right-radius: 10px; } .slide_popup.display .popup { bottom: -2px; } .slide_popup .popup .pop_head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 10px 12px 10px 20px; } .slide_popup .popup .pop_head .tit { font-size: 18px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.11;letter-spacing: normal;color: #000; } .slide_popup .popup .pop_head button { } .slide_popup .popup .pop_body { height: calc(100% - 154px); } .slide_popup .popup .pop_foot { position: absolute; bottom: -2px; width: 100%; } .slide_popup .popup .pop_foot button { width: 100%; padding: 20px 30px 52px; font-size: 18px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center; } .app.slide_up { position: fixed; top: 0; left: 0; bottom: -2px; right: 0;transition: .3s transform; border-radius: 15px; overflow: hidden; transform-origin: 50% 0%; transform: scale(0.95, .95); background-color: #fff; } /* 정렬기준 팝업 시작 */ .slide_popup.sort_pop { } .slide_popup.sort_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.sort_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.sort_pop .popup .pop_body { } .slide_popup.sort_pop .popup .pop_body .item { padding: 12px 30px 74px; } .slide_popup.sort_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.sort_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.sort_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.sort_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.sort_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.sort_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #4fc7fe; } .slide_popup.sort_pop .popup .pop_foot { } /* 정렬기준 팝업 끝 */ /* 브랜드선택 팝업 시작 */ .slide_popup.brand_pop { } .slide_popup.brand_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.brand_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.brand_pop .popup .pop_body { } .slide_popup.brand_pop .popup .pop_body .item { padding: 12px 30px 74px; } .slide_popup.brand_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.brand_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.brand_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.brand_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.brand_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.brand_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #4fc7fe; } .slide_popup.brand_pop .popup .pop_foot { } .slide_popup.brand_pop .popup .pop_body .item .radio_group .radio label:active { color: #fff; background-color: #4fc7fe; } /* 브랜드선택 팝업 끝 */ /* 정렬기준 팝업 시작 */ .slide_popup.option_pop { } .slide_popup.option_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.option_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.option_pop .popup .pop_body { } .slide_popup.option_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.option_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.option_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.option_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.option_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.option_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.option_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.option_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #000; } .slide_popup.option_pop .popup .pop_foot { position: static; padding: 80px 22px 34px; display: flex; justify-content: end; align-items: center; } .slide_popup.option_pop .popup .pop_foot .gradient_red_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .slide_popup.option_pop .popup .pop_foot .solid_white_back {font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; padding: 22px 30px; border-radius: 30px; background:#fff;} .slide_popup.option_pop .popup .pop_foot button { width: auto; } /* 정렬기준 팝업 끝 */ /* lclub 정렬기준 팝업 시작 */ .slide_popup.lclub_opt_pop { } .slide_popup.lclub_opt_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_opt_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_opt_pop .popup .pop_body { } .slide_popup.lclub_opt_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_opt_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.lclub_opt_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_opt_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.lclub_opt_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.lclub_opt_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.lclub_opt_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.lclub_opt_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #000; } .slide_popup.lclub_opt_pop .popup .pop_foot { position: static; height: 40px; } /* lclub 정렬기준 팝업 끝 */ /* lclub 필터 팝업 시작 */ .slide_popup.lclub_filter_pop { } .slide_popup.lclub_filter_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_filter_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_filter_pop .popup .pop_body { } .slide_popup.lclub_filter_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_filter_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.lclub_filter_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_filter_pop .popup .pop_body .item .small_tit { margin-top: 28px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_popup.lclub_filter_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.lclub_filter_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.lclub_filter_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.lclub_filter_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.lclub_filter_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #000; } .slide_popup.lclub_filter_pop .popup .pop_foot { position: static; padding: 50px 20px 0px; display: flex; justify-content: end; align-items: center; } .slide_popup.lclub_filter_pop .popup .pop_foot .gradient_red_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .slide_popup.lclub_filter_pop .popup .pop_foot .solid_white_back {font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; padding: 22px 30px; border-radius: 30px; background:#fff;} .slide_popup.lclub_filter_pop .popup .pop_foot button { width: auto; } /* lclub 필터 팝업 끝 */ /* lclub 댓글쓰기 팝업 시작 */ .slide_popup.lclub_reply_pop { } .slide_popup.lclub_reply_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_reply_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_reply_pop .popup .pop_body { } .slide_popup.lclub_reply_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_reply_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_reply_pop .popup .pop_body .item .textarea { margin-top: 20px; } .slide_popup.lclub_reply_pop .popup .pop_body .item .textarea textarea { resize: none; width: 100%; height: 222px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1.57;letter-spacing: normal;color: #000;padding: 16px 20px; border-radius: 20px; border: solid 1px #b9c1d2; background-color: #fff; } .slide_popup.lclub_reply_pop .popup .pop_foot { position: static; padding: 30px 20px 0px; display: flex; justify-content: end; align-items: center; } .slide_popup.lclub_reply_pop .popup .pop_foot .gradient_m_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .slide_popup.lclub_reply_pop .popup .pop_foot button { width: 100%; } /* lclub 댓글쓰기 팝업 끝 */ /* lclub 카테 팝업 시작 */ .slide_popup.lclub_cate_pop { } .slide_popup.lclub_cate_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_cate_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_cate_pop .popup .pop_body { } .slide_popup.lclub_cate_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_cate_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.lclub_cate_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_cate_pop .popup .pop_body .item .checkbox_group { margin-top: 18px; width: 100%; } .slide_popup.lclub_cate_pop .popup .pop_body .item .checkbox_group .checkbox { position: relative; display: block; padding: 12px 0; } .slide_popup.lclub_cate_pop .popup .pop_body .item .checkbox_group .checkbox label { height: 28px; width: 100%; background-image: url(/resources/img/btn-checkbox-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: 2px center; padding-left: 38px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 28px;letter-spacing: normal;color: #2d2d2d; } .slide_popup.lclub_cate_pop .popup .pop_body .item .checkbox_group .checkbox input[type=checkbox] { display: none; position: absolute; width: 0; height: 0;border: 0; background: none; } .slide_popup.lclub_cate_pop .popup .pop_body .item .checkbox_group .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-sel@3x.png); } .slide_popup.lclub_cate_pop .popup .pop_foot { position: static; padding: 40px 20px 4px; display: flex; justify-content: end; align-items: center; } .slide_popup.lclub_cate_pop .popup .pop_foot button { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } /* lclub 카테 팝업 끝 */ /* lclub_collect_filter_pop 팝업 시작 */ .slide_popup.lclub_collect_filter_pop { } .slide_popup.lclub_collect_filter_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_collect_filter_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_collect_filter_pop .popup .pop_body { } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .small_tit { margin-top: 28px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.lclub_collect_filter_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #000; } .slide_popup.lclub_collect_filter_pop .popup .pop_foot { position: static; padding: 50px 20px 0px; display: flex; justify-content: end; align-items: center; } .slide_popup.lclub_collect_filter_pop .popup .pop_foot .gradient_red_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .slide_popup.lclub_collect_filter_pop .popup .pop_foot .solid_white_back {font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; padding: 22px 30px; border-radius: 30px; background:#fff;} .slide_popup.lclub_collect_filter_pop .popup .pop_foot button { width: auto; } /* lclub_collect_filter_pop 팝업 끝 */ /* lclub_collect_sort_pop 팝업 시작 */ .slide_popup.lclub_collect_sort_pop { } .slide_popup.lclub_collect_sort_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.lclub_collect_sort_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.lclub_collect_sort_pop .popup .pop_body { } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item { padding: 12px 30px 0; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item~.item { margin-top: 40px; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .tit { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .small_tit { margin-top: 28px; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .radio_group { gap: 12px 10px; margin-top: 18px; width: 100%; display: flex; justify-content: start; align-items: start; flex-wrap: wrap; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .radio_group .radio { position: relative; display: inline-block; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .radio_group .radio input[type=radio] { display: none; width: 0; height: 0; top:0; left: 0; position: absolute; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .radio_group .radio label { padding: 15px 14px;border-radius: 21px;background-color: #f3f5fa;font-size: 12px;font-weight: 300;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #8992a3; } .slide_popup.lclub_collect_sort_pop .popup .pop_body .item .radio_group .radio input[type=radio]:checked + label { color: #fff; background-color: #000; } .slide_popup.lclub_collect_sort_pop .popup .pop_foot { position: static; padding: 50px 20px 0px; display: flex; justify-content: end; align-items: center; } .slide_popup.lclub_collect_sort_pop .popup .pop_foot .gradient_red_back { font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 30px; border-radius: 30px; background-color: #4fc7fe; } .slide_popup.lclub_collect_sort_pop .popup .pop_foot .solid_white_back {font-size: 16px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #000; padding: 22px 30px; border-radius: 30px; background:#fff;} .slide_popup.lclub_collect_sort_pop .popup .pop_foot button { width: auto; } /* lclub_collect_sort_pop 팝업 끝 */ /* 구매 팝업 시작 */ .slide_popup.buy_pop { } .slide_popup.buy_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.buy_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.buy_pop .popup .pop_body { padding: 0 20px; } .slide_popup.buy_pop .popup .pop_body .select { } .slide_popup.buy_pop .popup .pop_body .select button.choose_prd_btn { width: 100%; background-image: url(/resources/img/btn-select-04-option-1-nor@3x.png); background-size: 26px 26px; background-position: right 14px center; background-repeat: no-repeat; font-size: 14px; font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal; text-align: left; color: #000; padding: 12px 14px 12px 24px; border-radius: 25px; border: solid 1px #e1e5ed; } .slide_popup.buy_pop .popup .pop_body .pick_prd { margin-top: 10px; max-height: 60vh; overflow-y: scroll; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul { } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li { position: relative; padding: 10px 24px; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li~li::before { content: ''; width: calc(100% - 48px); position: absolute; top:-1px; height: 1px; left: 24px; background-color: #e1e5ed; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .prd_name { font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .prd_price { font-family: 'Pretendard', sans-serif; margin-top: 2px; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #000; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .del_btn { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .price { margin-top: 4px; display: flex; justify-content: start; align-items: center; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .price .sell_pri { font-family: 'Pretendard', sans-serif; margin-top: 2px; font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;color: #000; } .slide_popup.buy_pop .popup .pop_body .pick_prd ul li .price .ori_pri { text-decoration: line-through; margin-left: 8px; font-family: 'Pretendard', sans-serif;font-size: 10px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;color: #cad4e1; } .slide_popup.buy_pop .popup .pop_foot { position: static; padding: 20px; column-gap: 10px; display: flex; justify-content: center; align-items: center; } .slide_popup.buy_pop .popup .pop_foot .solid_black_back { width: 100%; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 20px;border-radius: 30px;background-color: #000;} .slide_popup.buy_pop .popup .pop_foot .solid_cyan_back { width: 100%; font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; padding: 22px 20px;border-radius: 30px;background-color: #4fc7fe;} .slide_popup.buy_pop .popup .pop_foot button { width: auto; } /* 구매 팝업 끝 */ /* 요청사항 팝업 시작 */ .slide_popup.request_pop { } .slide_popup.request_pop .popup { height: auto; border-top-left-radius: 30px; border-top-right-radius: 30px } .slide_popup.request_pop .popup .pop_head { padding:0; justify-content: center; } .slide_popup.request_pop .popup .pop_body { padding: 0 0px; height: auto; } .slide_popup.request_pop .popup .pop_body .request_opt { } .slide_popup.request_pop .popup .pop_body .request_opt button { text-align: left; width: 100%; background-color: #fff; padding: 15px 30px; font-size: 16px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.request_pop .popup .pop_body .request_opt button:hover, .slide_popup.request_pop .popup .pop_body .request_opt button:focus { font-size: 16px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #f44;background-color: #f8fafc; } .slide_popup.request_pop .popup .pop_body .direct_write { padding: 0 30px; display: none; } .slide_popup.request_pop .popup .pop_body .direct_write .tit { font-size: 14px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.request_pop .popup .pop_body .direct_write input[type=text] { padding: 10px 0;border:0; border-radius: 0; font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal; color:#000 } .slide_popup.request_pop .popup .pop_body .direct_write input[type=text]::placeholder { font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #cad4e1; } .slide_popup.request_pop .popup .pop_body .direct_write button { width: 100%; padding: 22px 30px; border-radius: 30px; font-size: 16px;font-weight: 800;background-color: #4fc7fe;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;} .slide_popup.request_pop .popup .pop_foot { height: 40px; position: relative; } /* 요청사항 팝업 끝 */ /* full_popup 20221205 시작 */ .full_popup { background-color: #fff; display: none; overflow: scroll; position: fixed; top:0; left: 0; bottom:0; right: 0; z-index: 1002; } /* full_popup 20221205 끝 */ /* 소멸포인트 슬라이드 팝업 시작 */ .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .head { display: flex; position: relative; padding: 26px 20px 20px; width: 100%; justify-content: space-between; align-items: center; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .head:after { content: ''; position: absolute; width: calc(100% - 40px); height: 2px; background-color: #000; left: 20px; bottom: 0; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .head .item { font-size: 12px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;color: #000; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .list { height: 400px; overflow-y: scroll; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .list ul { padding: 0 20px; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .list ul li { padding: 24px 0 26px; display: flex; width: 100%; justify-content: space-between; align-items: center; border-bottom: 1px solid #e1e5ed; } .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .list ul li .value { font-size: 14px; font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.43;letter-spacing: normal;color: #ff5039;} .slide_popup.forfeited_pop .popup .pop_body .forfeited_point .list ul li .date { font-family: Pretendard;font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #000; } /* 소멸포인트 슬라이드 팝업 끝 */ /* 커버이미지 */ .cover_img { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; } .cover_img img { width: 100%; height: 100%; object-fit: cover; } /* 탈퇴버튼 */ .deactivate { padding: 10px 20px; text-align: right; font-size: 12px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: right;color: #2d2d2d; } .deactivate a { padding-bottom: 3px; border-bottom: 1px solid #2d2d2d; } .deactivate_button { position: relative; margin-top: 40px; padding: 30px 20px; } .deactivate_button:before { content: ''; width: calc(100% - 40px); height: 1px; background-color: #000; position: absolute; top: 0; left: 20px; } .deactivate_button .checkbox { } .deactivate_button .checkbox label { height: 28px; background-image: url(/resources/img/btn-checkbox-nor@3x.png); background-size: 28px 28px; background-repeat: no-repeat; background-position: 3px center; padding-left: 40px; font-size: 14px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: 28px;letter-spacing: normal;color: #2d2d2d; } .deactivate_button .checkbox input[type=checkbox] { display: none; position: absolute; width: 0; height: 0;border: 0; background: none; } .deactivate_button .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-sel@3x.png); } .deactivate_button .button { margin-top: 50px; } .deactivate_button .button button { padding: 22px 0; width: 100%; border-radius: 30px;background-color: #4fc7fe; font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff; } /* 주소창 팝업 */ .addr_pop { display:none;border:1px solid;width:100%;height:100% !important;position:fixed; top:0; left: 0; bottom: 0; right: 0; z-index: 1003; } .addr_pop .dim { position: absolute; inset: 0; background-color: rgba( 0, 0,0, .7); } /* 이미지 크랍 */ .photo_box {} .photo_box .contents { margin-top: 100px; padding: 20px; } .photo_box .upload_btn { display: flex; justify-content: space-between; align-items: center; column-gap: 10px; width:100%;} .photo_box .upload_btn #photoBtn { display:none; position: absolute; width: 0; height: 0; } .photo_box .upload_btn .upload { width: 100%; } .photo_box .upload_btn .upload label {display: block; padding: 20px 0; border-radius: 30px; background-color: #4fc7fe;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;} .photo_box .upload_btn a { width: 100%; display: block; padding: 20px 0; background-color: #fff;font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-align: center; color: #000;} .photo_box .photo_them {position:relative;margin-top:20px;width:100%;height:250px;background:#eee;} .photo_box .them_img, .photo_box .result_box{position:absolute;top:0;left:0;width:100%;height:100%;} .photo_box .result_box{background:#fff;} .photo_box .them_img img, .photo_box .result_box img{display:block;margin:0 auto;height:100%;} .photo_box #complete{ margin-top: 30px; width: 100%; display: block; padding: 20px 30px; border-radius: 30px;background-color: #4fc7fe;font-size: 16px;font-weight: 800;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: normal;text-align: center;color: #fff;} .login_set .input_group .checkbox label{ background-image: url(/resources/img/btn-checkbox-2-nor@3x.png); background-size: 26px 26px; background-repeat: no-repeat; background-position: 2px center; padding-left: 36px; font-size: 12px; font-weight: 500; font-stretch: normal; font-style: normal; line-height: 26px; letter-spacing: normal; color: #2d2d2d; } .login_set .input_group .checkbox input[type=checkbox]:checked + label { background-image: url(/resources/img/btn-checkbox-2-sel@3x.png); color: #2d2d2d;} /* 에러페이지 2023.02.27 */ .error { position: absolute; top: 48%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 80%; } .error .img { } .error .img img { } .error .ment { margin-top: 14px; } .error .ment .tit { font-size: 24px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: 1.19;letter-spacing: -0.64px;text-align: center;color: #333; } .error .ment .sub { margin-top: 8px; font-size: 14px;font-weight: normal;font-stretch: normal;font-style: normal;line-height: 1.19;letter-spacing: -0.32px;text-align: center;color: #000; } /* 토스트 */ #snackbar { visibility: hidden; box-sizing: border-box; height: 100vh; border-radius: 2px; width:100%; padding:0 20px; position: fixed; z-index: 20000; justify-content: center; align-items: center; display: flex; top:0;} #snackbar .in_message_bg{ padding: 12px 20px; font-size: 13px; width:100%; font-weight: 400; line-height: 16.9px;text-align:left; background-color: #000; color: #fff; opacity: 0.8; border-radius: 10px; } #snackbar.show { visibility: visible; -webkit-animation: fadein 0.4s, fadeout 0.4s 3.6s; animation: fadein 0.4s, fadeout 0.4s 3.6s; } @-webkit-keyframes fadein { from { opacity: 0;} to { opacity: 0.86;} } @keyframes fadein { from { opacity: 0;} to { opacity: 0.86;} } @-webkit-keyframes fadeout { from {opacity: 0.86;} to {opacity: 0;} } @keyframes fadeout { from { opacity: 0.86;} to { opacity: 0;} } /* 둘러보기 */ .explorer {height: 18px; margin-top: 50px; font-size: 14px; line-height: 14px; position: relative;} .explorer_btn {color:#16d91b; display: block; position: absolute; right: 30px; } .explorer_btn span { height: 14px; line-height: 14px; font-size: 14px; font-weight: bold; margin-right: 10px; vertical-align: top;} .explorer_btn .ex_arrow{display: inline-block; height: 14px; width: 14px; background-image: url(/resources/img/BTN_FORWARD_04_MID_WHT_1_NOR@3x.png);background-size: cover; background-repeat: no-repeat ; background-position:center center;} .explorer_btn:active span {color:#ff6633 ;} .explorer_btn:active .ex_arrow{background-image: url(/resources/img/BTN_FORWARD_04_MID_WHT_2_SEL_@3x.png);} /* 레코멘드 포인트란?수정 230405*/ .term_detail_01 .content .item .point_info .ment .desc .exlist { padding-left: 10px;} .term_detail_01 .content .item .point_info .ment .desc .exlist h3{ font-weight: normal; margin-top: 10px;} .term_detail_01 .content .item .point_info .ment .desc .exlist li:before {content:'' !important;} .term_detail_01 .content .item .point_info .ment .desc .exlist li:nth-child(1)::before {content:'*' !important; left: -2px !important;} .term_detail_01 .content .item .point_info .ment .desc .exlist li:nth-child(2)::before {content:'①' !important; left: -5px !important;} .term_detail_01 .content .item .point_info .ment .desc .exlist li:nth-child(3)::before {content:'②' !important; left: -5px !important; } .term_detail_01 .content .item .point_info .ment .desc .exlist li:nth-child(4)::before {content:'③' !important; left: -5px !important;} .maker_none ol li:last-child::marker{color:#fff} .n_hashtag th,td {text-align: center;} .term_detail_01 .content .item .n_hashtag th{padding:10px 0 !important;} .break_keep div li {word-break:keep-all} .category.app .main_scroll .main_bar .prd_list_section2 .list ul li a .thumb {overflow:visible !important;} .search.app .search_result.prd_list_section2 .list ul li a .thumb {overflow:visible !important;} .category.app .prd_list_section2 .list ul li a .thumb {overflow:visible !important;} /* 이벤트 리뉴얼 230831 */ /* 이벤트 리뉴얼 230831 */ .event.app .event_lclub {padding: 30px 30px 0; margin-bottom: 16px;} .event.app .event_lclub img{display: block;} .event.app .event_cate{padding: 0 30px;} .event.app .event_cate .event_cate_list li{margin-bottom: 16px;} .event.app .event_cate .event_cate_list li:last-child{margin-bottom: 112px;} .event.app .event_cate .event_cate_list li:nth-child(1) a{background-color:#D9E6FF;} .event.app .event_cate .event_cate_list li:nth-child(2) a{background-color:#EBDCFF;} .event.app .event_cate .event_cate_list li:nth-child(3) a{background-color:#FEEFCF;} .event.app .event_cate .event_cate_list li:nth-child(4) a{background-color:#FFDDD9;} .event.app .event_cate .event_cate_list li a{height: 96px; width: 100%; border-radius: 20px; padding:16px; display: flex; justify-content: space-between;} .event.app .event_cate .event_cate_list li a .list_icon img{height: auto;width: auto; object-fit: cover;} .event.app .event_cate .event_cate_list li a div:nth-child(1){width: 210px; margin-top: 2.5px;} .event.app .event_cate .event_cate_list li a div span{width: 100%; display: block;} .event.app .event_cate .event_cate_list li a div span:nth-child(1){font-size: 16px; font-weight: 700; line-height: 20.8px; color: #000; margin-bottom: 6px; } .event.app .event_cate .event_cate_list li a div span:nth-child(2){font-size: 12px; font-weight: 400px; line-height: 15.6px; color: #555;} .event.app .event_thumb{padding:30px 20px 0; } .event.app .event_thumb li{ margin-bottom: 32px; } .event.app .event_thumb li.open{transition: all 0.2s linear;} .event.app .event_thumb li:last-child{margin-bottom: 100px;} .event.app .event_thumb li .thumb_wrap{ display: block; box-shadow: 0px 4px 10px 0px rgba(60, 67, 72, 0.26); box-sizing: border-box;} .event.app .event_thumb li .thumb_wrap{ position: relative; height: 408px; color: #fff; border-radius: 20px; overflow: hidden; width: 100%; } .event.app .event_thumb li .thumb_wrap > div {position: absolute;} .event.app .event_thumb li .thumb_wrap .thumb_bg{ height: 100%; width: 100%; transition: all 0.2s linear; } .event.app .event_thumb li .thumb_wrap .gra_bg{ height: 100%; width: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.00) 50%, rgba(0, 0, 0, 0.25) 100%);} .event.app .event_thumb li .thumb_wrap .thumb_text{ width: 100%; height: 100%; padding: 16px 20px; font-size: 14px; font-weight:500; line-height: 130%; } .event.app .event_thumb li .thumb_wrap .thumb_text .wrap {position: relative; height: 100%;} .event.app .event_thumb li .thumb_wrap .thumb_text .wrap > div{position: absolute; width: 100%;} .event.app .event_thumb li .thumb_wrap .thumb_text .wrap div:nth-child(2){ line-height: 150%; bottom: 0; background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.30) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .event.app .event_thumb li .thumb_wrap .thumb_text .contents{ transition: all 0.4s; transform-origin : 0 100%; overflow: hidden; word-break: keep-all; max-height:64px; height: fit-content; white-space: normal; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .event.app .event_thumb .open:active .thumb_wrap .thumb_text .contents{ transition: all 0.4s; max-height: 350px; -webkit-line-clamp:none; display: block; } .event.app .event_thumb li .thumb_wrap .thumb_text .title{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 700; line-height: 150%; margin-bottom: 4px; height: 100%; } .event.app .event_thumb .open:active .thumb_wrap .thumb_text .wrap div:nth-child(2){ background: linear-gradient(180deg, #FFF 0%, #FFF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;} .event.app .event_thumb li .thumb_wrap .thumb_text span{width: 100%; display: block;} .event.app .event_thumb li .thumb_wrap .thumb_text span.date{font-size: 24px; font-weight: 700; margin-top: 4px; line-height: 130%;} .event.app .event_thumb li.close .thumb_wrap .thumb_bg{background-color: #000;} .event.app .event_thumb li.close .thumb_wrap .thumb_bg img{opacity: 0.45; } /* .event.app .event_thumb li.close .thumb_wrap .thumb_text .wrap div:nth-child(2){opacity: 0.4;} */ .event.app .event_thumb .open:active .thumb_wrap .thumb_bg img{filter: blur(5px); -webkit-filter: blur(5px);} .event.app .event_thumb .open:active{padding:4px;} .event.app .event_thumb .open:active .thumb_wrap{box-shadow:none; } .event.app .event_thumb .close .thumb_wrap{box-shadow:none; } /* foru 포유 230907 */ .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn { padding: 40px 20px 0px; overflow: hidden; overflow-x: auto; -ms-overflow-style: none; } .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn::-webkit-scrollbar{ display:none; } .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn ul li{width:auto;} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn ul li:last-child a{ margin-right: 20px;} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn ul {display: flex; align-items:normal; gap: 10px; white-space: nowrap;} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn ul li a.active{background: var(--grayscale-black, #000); color: var(--grayscale-white, #FFF);border: 1px solid var(--grayscale-black, #000);} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .category_btn ul li a{ display: block; padding: 11px 16px; border-radius: 40px; border: 1px solid var(--grayscale-gray-450, #E1E5ED); background: var(--grayscale-white, #FFF); color: var(--grayscale-black, #000); text-align: center; font-size: 14px; font-weight: 700; line-height: 100%; /* 14px */ } .main.app.new.foru .scroll_case .main_scroll .main_bar .prd_list_section .header {padding: 30px 20px 14px;} .main.app.foru .prd_list_section .header .prd_count {top:34px;} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .header .tit{line-height: 130%;} .main.app.foru .scroll_case .main_scroll .main_bar .prd_list_section .header .tit span{color: var(--le-commend-green-4, #08DF61);} .main.app .scroll_case .main_scroll .main_bar .category_btn .header .tit{} header .option .icon .userthumb{width: 24px; height: 24px;border-radius: 24px; overflow: hidden; border: 1px solid #B9C1D2; } header .option .icon .userthumb img{width: 100%; height: 100%; object-fit: cover; display: block;} /* 나의 L.club */ .like.app .my_lclub_list .list .tit {width: calc(100% - 70px); } .like.app .my_lclub_list .list .tit > div{overflow: hidden; color: var(--grayscale-black, #000);text-overflow: ellipsis; white-space: nowrap;} .like.app .brd_list_01 .icon .public{ color: #0FDF8B; border: 1px solid #0FDF8B; border-radius: 300px;padding:5px 10px; font-size: 12px; font-weight: 400; line-height: 150%;} .like.app .brd_list_01 .icon .private{ color: #FF3C3C; border: 1px solid #FF3C3C; border-radius: 300px;padding:5px 10px; font-size: 12px; font-weight: 400; line-height: 150%;} /* 미션 제출후 로딩 바 */ .dot-carousel { position: relative; left: -9999px; width: 14px; height: 14px; border-radius: 24px; background-color: #00DD59; color: #00DD59; box-shadow: 9969px 0 0 0 #00DD59, 9999px 0 0 0 #00DD59, 10029px 0 0 0 #00DD59; animation: dot-carousel 2s infinite linear; } @keyframes dot-carousel { 0% { box-shadow: 9969px 0 0 -1px #00DD59, 9999px 0 0 1px #00DD59, 10029px 0 0 -1px #00DD59; } 50% { box-shadow: 10029px 0 0 -1px #00DD59, 9969px 0 0 -1px #00DD59, 9999px 0 0 1px #00DD59; } 100% { box-shadow: 9999px 0 0 1px #00DD59, 10029px 0 0 -1px #00DD59, 9969px 0 0 -1px #00DD59; } } .dot_ani_wrap { display: flex; justify-content: center; align-items: center; position: relative; margin: 0 -5%; overflow: hidden; padding: 1px 0; } /* 202401 메인 컨텐츠 변경 */ .main.app .scroll_case .main_scroll .main_bar .magazine_section .header { margin-bottom: 16px; } .position_re {position: relative;} .main.app .scroll_case .main_scroll .main_bar .magazine_section .slide_brand .swiper-slide .thumb {position: absolute; width: 100%; } .magazine_section .position_re{display: block;} .magazine_section .position_re .text_deco {position: absolute; width: 100%; text-align: center; color: #000; font-size: 10px; font-weight: 700; line-height: 130%; /* 13px */ } .main.app .scroll_case .main_scroll .main_bar .magazine_section .slide_brand .swiper-slide .thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: center center;} .magazine_section .text_deco .deco_top{display: flex; width: 100%; justify-content: space-between; padding: 16px 28px;} .magazine_section .position_re .text_deco .deco_top div:first-child{text-align: left;} .magazine_section .position_re .text_deco .deco_top div:last-child{text-align: right;} .deco_middle svg.l_logo_w{display: none;} .magazine_section .position_re .text_deco.deco_w{ color: #fff;} .magazine_section .position_re .deco_middle {margin: 28px 0 48px;} .magazine_section .position_re .text_deco.deco_w .deco_middle svg.l_logo_w{display: inline;} .magazine_section .position_re .text_deco.deco_w .deco_middle svg.l_logo_b{display: none;} .magazine_section .position_re .deco_bottom{ white-space: break-spaces; display: flex; word-break: keep-all; word-wrap: break-word; -webkit-line-clamp: 3; flex-direction: column; justify-content: center; flex: 1 0 0; align-self: stretch; font-size: 24px; font-style: normal; font-weight: 700; line-height: 130%; overflow: hidden; padding: 0 28px; } .magazine_section .position_re:active .thumb img{opacity: 90%;} .main.app .scroll_case .main_scroll .main_bar .magazine_section .slide_brand .swiper-slide{box-shadow: none; } .magazine_section .magazine li {box-shadow: none; } .magazine_section .magazine li .thumb {position: absolute; height: 473px;} .magazine_section .magazine {display: flex; align-items: center; flex-direction: column;} .magazine_section .magazine li .thumb img{width: 100%; height: 100%; object-fit: cover; object-position: center center;} .magazine_section .magazine li{width: 100%; height: 473px; max-width: 400px;} .magazine_section .magazine li .deco_bottom{height: 194px; padding: 0 28px;} .magazine_section > .title {display: flex; align-items: center; flex-direction: column;} .magazine_section > .title .tit {max-width: 400px; width: 100%;} .slider_tab{ width: 100%;} .slider_tab ul {display: flex; overflow: hidden; overflow-x: auto; width:100%; padding: 16px 0px; align-items: center; -ms-overflow-style: none; /* 인터넷 익스플로러 */ scrollbar-width: none; } .slider_tab ul::-webkit-scrollbar{ display:none; } .slider_tab ul li{width: auto; margin-right: 16px;} .slider_tab ul li:first-child{margin-left: 16px;} .slider_tab ul li {display: flex; background: var(--Grayscale-Gray100, #ECECEC); width: 56px; height: 56px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; border-radius: 48px;} .slider_tab ul li span{ display: block; width: 56px; white-space: break-spaces; word-break: keep-all; word-wrap: break-word; text-align: center; font-family: Pretendard; font-size: 14px; font-style: normal; font-weight: 700; line-height: 120%; /* 16.8px */ } .slider_tab ul li.is_on{ background: var(--Success, #00DD59); color: var(--le-commend-black, #000);} .laround_section{height: 600px;} .tab_contents div.desc{ height: 42px; display: flex; margin: 16px 64px; justify-content: center; align-items: center; gap: 48px; align-self: stretch; color: var(--le-commend-black, #000); text-align: center; font-size: 16px; font-style: normal; font-weight: 700; line-height: 130%; /* 20.8px */ } .tab_contents{display: none; } .tab_contents.is_on{display: block;} .tab_contents ul{ display: flex; padding: 16px 30px; flex-direction: column; align-items: center; gap: 10px; align-self: stretch; } .tab_contents ul li{width: 100%;} .tab_contents ul li a { display: block; width: 100%; height: 160px; overflow: hidden; border-radius: 12px; position: relative; } .tab_contents li.new .tab_new_dim{display:block;} .tab_contents ul li a > *{position: absolute; width: 100%; height: 100%; } .tab_contents ul li a img{object-fit: cover; object-position: center center;} .tab_contents ul li a .tab_new_dim{display: none;} .tab_contents ul li a .tab_dim{background: linear-gradient(180deg, rgba(0, 0, 0, 0.20) 0.31%, rgba(0, 0, 0, 0.02) 99.7%);} .tab_contents ul li a .tab_new_dim > div{position: relative; width: 100%; height: 100%;} .tab_contents ul li a .tab_new_dim .new_b{position: absolute; right: 16px; top: 12px; color: var(--le-commend-black, #000); text-align: right; text-overflow: ellipsis; font-size: 14px; font-style: normal; font-weight: 700; line-height: 130%;} .tab_contents ul li a .tab_c_text{ display: flex; padding: 16px 80px 32px 16px; flex-direction: column; align-items: flex-start; gap: 10px; align-self: stretch; } .tab_contents ul li a .tab_c_text .t_top{ color: var(--Grayscale-White, #FFF); font-size: 12px; font-weight: 500; line-height: 130%; padding: 2px 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(2px); } .tab_contents ul li a .tab_c_text .t_middle{ width: 100%; height: 100%; word-break: keep-all; word-wrap: break-word; white-space: break-spaces; overflow: hidden; color: var(--Grayscale-White, #FFF); font-size: 20px; font-style: normal; font-weight: 700; line-height: 130%; /* 26px */ } .main.app .pick_rec .list_box .list ul li~li