@charset "UTF-8"; :root { --font-family-sans-serif: "Cerebri Sans", "Noto Sans", sans-serif; --font-family-base: --font-family-sans-serif; --font-weight-base: 400; --line-height-base: 1.3; --color-bg: #fff; --color-primary: #03c75a; --color-secondary: #f5f5f5; --color-text: #222; --color-muted: #afafaf; --color-dark: #575757; --color-white: #fff; --color-black: #000; --color-gray: gray; --color-border: #e3e3e3; --color-border-2: #8a9298; --font-size: 14px; --font-size-sm: 12px; --max-width: 390px; --content-width: 390px; --h1-font-size: 24px; --h2-font-size: 22px; --h3-font-size: 20px; --h4-font-size: 18px; --h5-font-size: 16px; --h6-font-size: 14px; --btn-radius: 10px; --btn-padding: 13px; } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:after, blockquote:before, q:after, q:before { content: ""; content: none; } table { border-collapse: collapse; border-spacing: 0; } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: 5px; font-weight: 600; } .h1, h1 { font-size: var(--h1-font-size); } .h2, h2 { font-size: var(--h2-font-size); } .h3, h3 { font-size: var(--h3-font-size); } .h4, h4 { font-size: var(--h4-font-size); } .h5, h5 { font-size: var(--h5-font-size); } .h6, h6 { font-size: var(--h6-font-size); } .text-primary { color: var(--color-primary); } .border { border-width: 1px; border-color: var(--color-primary); border-style: solid; } body { margin: 0; padding: 0; background-color: var(--color-bg); font-family: var(--font-family-base); font-size: var(--font-size); font-weight: var(--font-weight-base); line-height: var(--line-height-base); color: var(--color-text); display: flex; justify-content: center; } button { border: none; cursor: pointer; background-color: transparent; padding: var(--btn-padding); border-radius: var(--btn-radius); color: var(--color-text); } small { font-size: var(--font-size-sm); } strong { font-weight: 600; } #wrapper { width: 100vw; max-width: var(--max-width); height: 100vh; align-items: center; display: flex; flex-direction: column; justify-content: center; } #content { text-align: center; width: 100%; max-width: 390px; } #content:not(.detail) { padding: 0 16px; } #content img { width: 100%; } #content aside { position: fixed; top: 0; bottom: 0; right: -100%; width: 245px; background: var(--color-white); box-shadow: -4px 0 5px 0 rgba(0, 0, 0, 0.05); z-index: 9999; transition: left 0.3s ease; overflow: scroll; } #content aside.show { right: calc((100% - 390px) / 2); } #content aside.hide { right: -100%; } #content aside a { display: block; text-decoration: none; color: inherit; } #content aside .close-button { position: absolute; top: 15px; right: 20px; width: 18px; height: 18px; } #content aside ul { margin-top: 48px; padding: 0 27px; } #content aside ul li { display: block; margin: 0; width: 100%; line-height: 37px; font-size: 13px; font-weight: 400; text-align: left; } #content aside ul li.on { font-weight: 700; } #content .topbar .cate-button img { height: 18px !important; } #content.index .info { word-break: keep-all; margin-bottom: 48px; } #content.index .info img { height: 58px; margin-bottom: 0; } #content.index .info img:has(~ span) { margin-bottom: 20px; } #content.index .info h1:has(~ span) { margin-bottom: 30px; } #content.index .info > span { display: inline-block; font-weight: 700; width: 100%; padding: 0 10px; } #content.index .info:has(+ .grade) { margin-bottom: 23px; } #content.index .grade { margin-bottom: 20px; width: 100%; } #content.index .grade ul { overflow: hidden; border-radius: 4px; background-color: var(--color-secondary); } #content.index .grade ul li { display: flex; justify-content: space-between; padding: 14px 16px; } #content.index .grade ul li:not(:last-child) { border-bottom: 2px solid var(--color-border); } #content.index .grade ul li small { color: var(--color-gray); font-weight: 700; } #content.index .grade ul li strong { color: var(--color-dark); } #content.index .grade ul li span { position: relative; } #content.index .grade ul li span.power:before { background-size: 311px 310px; background-position: -184px -146px; } #content.index .grade ul li span.big-power:before { background-size: 311px 310px; background-position: -291px -188px; } #content.index .grade ul li span.premium:before { background-size: 311px 310px; background-position: -207px -146px; } #content.index .grade ul li span.platinum:before { background-size: 311px 310px; background-position: -161px -146px; } #content.index .grade ul li span.good-service:before { background-size: 311px 310px; background-position: -4px -290px; width: 16px; height: 16px; } #content.index .grade ul li span:before { content: ""; position: absolute; top: -1px; right: 4px; bottom: 0; text-align: right; background-image: url(//common.uc-kg.net/resource/store_icon_svg.svg); width: 15px; height: 17px; } #content.index > button { font-size: var(--h4-font-size); font-weight: 700; width: 100%; margin-bottom: 0; color: var(--color-white); background-color: var(--color-primary); position: relative; } #content.index > button::after { content: ""; position: absolute; display: inline-block; width: 16px; height: 16px; top: calc(50% - 8px); background: url(//common.uc-kg.net/resource/arrow-white.png) no-repeat center center; background-size: 100%; margin-left: 1px; } #content.detail { width: 100%; height: 100vh; } #content.detail .topbar { display: flex; align-items: center; justify-content: space-between; overflow: hidden; width: 100%; height: 60px; padding: 10px; } #content.detail .topbar h4 { margin-bottom: 0; margin-left: 3px; color: var(--color-black); cursor: pointer; } #content.detail .topbar img { display: inline-block; width: auto; height: 28px; cursor: pointer; } #content.detail .topbar > img { margin-left: 3px; } #content.detail .topbar .cate-button > img { margin-right: 10px; } #content.detail swiper-container { width: 100%; font-size: 0; height: auto; overflow: hidden; transition: all 0.3s; } #content.detail swiper-container swiper-slide { text-align: center; } #content.detail swiper-container swiper-slide img { display: inline-block; width: 100%; height: auto; } #content.detail .review { position: relative; display: flex; flex-direction: column; margin: 16px 16px 13px; padding: 12px; border-radius: 4px; background-color: var(--color-secondary); text-align: left; cursor: pointer; } #content.detail .review img[alt="review-icon"] { width: 80px; margin-bottom: 3px; } #content.detail .review span { font-size: 13px; font-weight: 600; } #content.detail .review::after { content: ""; position: absolute; display: inline-block; width: 16px; height: 16px; top: calc(50% - 8px); right: 8px; background: url(//common.uc-kg.net/resource/arrow-black.png) no-repeat center center; background-size: 100%; margin-left: 1px; } #content.detail .description { text-align: left; margin: 0 16px; } #content.detail .description .shop-name { display: inline-block; font-size: 13px; font-weight: 700; margin-bottom: 6px; } #content.detail .description h3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 13px; } #content.detail .description .price { margin-bottom: 22px; } #content.detail .description .price:has(.sale-price) { margin-bottom: 18px; } #content.detail .description .price .sale-price { font-size: 15px; text-decoration: line-through; color: var(--color-gray); } #content.detail .description .price .default { display: flex; } #content.detail .description .price .default h3 { font-weight: 700; margin-bottom: 0; } #content.detail .description .price .default h3:first-child { margin-right: 5px; } #content.detail .description button { position: relative; border: 2px solid var(--color-gray); width: 100%; border-radius: 4px; text-align: left; font-size: 13px; font-weight: 600; padding: 12px 14px; margin-bottom: 6px; } #content.detail .description button::after { content: ""; position: absolute; display: inline-block; width: 16px; height: 16px; top: calc(50% - 8px); right: 8px; background: url(//common.uc-kg.net/resource/arrow-black.png) no-repeat center center; background-size: 100%; margin-left: 1px; } #content.detail .detail { padding: 16px 0 50px; } #content.detail .detail img { width: 100%; vertical-align: middle; } #content.detail .detail .se-module-image { width: 100% !important; } #content.detail .fixed-button { position: sticky; bottom: 0; left: 0; right: 0; display: block; top: auto; background-color: #fff; padding: 16px; z-index: 100; } #content.detail .fixed-button button { font-size: var(--h4-font-size); font-weight: 700; width: 100%; margin-bottom: 0; color: var(--color-white); background-color: var(--color-primary); } #content.list { padding: 0; width: 100%; height: 100vh; text-align: left; color: var(--color-black); } #content.list h4 { line-height: normal; } #content.list .logo { opacity: 1; padding: 2px 20px 20px; text-align: center; transition: opacity 0.3s ease-in-out; } #content.list .logo.hide { opacity: 0; } #content.list .logo img { width: auto; height: 30px; } #content.list .topbar { display: flex; align-items: center; justify-content: space-between; overflow: hidden; width: 100%; height: 48px; padding: 15px 20px; background: var(--color-white); background-color: rgba(255, 255, 255, 0); } #content.list .topbar.fixed { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 380px; z-index: 999; background-color: rgba(255, 255, 255, 1); } #content.list .topbar h4 { margin-bottom: 0; margin-left: 3px; color: var(--color-black); cursor: pointer; } #content.list .topbar img { display: inline-block; height: 26px; width: auto; cursor: pointer; } #content.list .topbar > :not(.cate-button) { opacity: 0; } #content.list .topbar.fixed > :not(.cate-button) { opacity: 1; transition: opacity 0.3s ease-in-out; } #content.list .product-list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; padding: 0 20px; } #content.list .item { display: block; width: calc(50% - 5px); margin: 0 0 28px 0; } #content.list .item .img { font-size: 0; } #content.list .item .description { margin-top: 10px; } #content.list .item .name { margin: 10px 0; font-size: 13px; font-weight: 400; } #content.list .item .name > div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; } #content.list .item .price { display: flex; font-size: 20px; } #content.list .item .price h5 { font-weight: 700; margin-bottom: 0; } #content.list .item .price h5.percent { color: #ff2150; } #content.list .item .price h5:first-child { margin-right: 10px; } #content.list .item .price h5 span { font-size: 11px; font-weight: 500; } #content.list .item.grid1 { position: relative; margin: 0 0 30px 0; padding-bottom: 28px; width: 100%; } #content.list .item.grid1::after { content: ""; display: block; position: absolute; bottom: 0; left: -20px; width: calc(100% + 40px); height: 1px; background: #eee; } #content.list .product-list.only .item.grid1::after { content: none; } #content.list .item.grid1 .img { position: relative; } #content.list .item.grid1 .name { margin: 20px 0 30px 0; } #content.list .item.grid1 .name > div { font-size: 18px; font-weight: 600; } #content.list .item.grid1 .name .sub { margin-top: 10px; font-size: 15px; font-weight: 400; color: var(--color-gray); } #content.list .item.grid1 .price h5 { font-size: 20px; } #content.list .item.grid1 .price h5 span { font-size: 15px; } #content.list .item.grid1 .img .percent { position: absolute; bottom: -10px; left: 20px; margin-bottom: 0; width: 65px; height: 65px; line-height: 65px; background: var(--color-black); text-align: center; color: var(--color-white); font-size: 27px; } #content.list .item.grid1 .img .percent span { font-size: 17px; font-weight: 500; } #content.list .more-button { padding: 0 20px 30px; } #content.list .more-button button { width: 100%; height: 45px; border: 1px solid #999; font-size: 13px; font-weight: 600; } #content.list .more-button button img { margin-top: -2px; margin-left: 5px; width: 8px; vertical-align: middle; } #content.list .more-button.move button { color: var(--color-primary); } #content.list .more-button.move button img { width: auto; height: 8px; } #content.progress img { width: 160px; } #content.progress.change img { width: auto; height: 74px; } #content.progress h4 { margin: 35px 0 10px 0; font-size: 16px; } #content.progress span { font-size: 13px; font-weight: 400; color: #838383; } #content.progress.img-cropped-type1 img { width: 200px; margin: -63px 0 -63px 0; } #content.progress.img-cropped-type2 img { width: 115px; margin: -31.84px 0 0 0; } #popup { text-align: center; position: absolute; z-index: 100; opacity: 0; transition: ease-in 0.3s; } #content:has(~ #popup) { display: none; } #popup img { width: auto; height: 74px; } #popup h4 { margin: 35px 0 10px 0; font-size: 16px; } #popup span { font-size: 13px; font-weight: 400; color: #838383; } #popup.review img { margin: -58px 0 -58px 0; width: 190px; height: auto; } #popup.buy img, #popup.option img { width: 160px; height: auto; } #popup.buy h4, #popup.option h4 { margin-top: 0; } @media screen and (max-width: 390px) { #content aside.show { right: 0; } } #content.detail .detail img {height: auto;}