.story-content {width:100%;max-width:1380px;margin:80px auto 0;} .text-story {padding:var(--spacing-16);} .tag-story {display:inline-block;padding:2px 6px;color:#047F9D;line-height:20px;background:#EBF5F7;border-radius:8px;font-size:var(--fs-16);font-weight:var(--fw--500);vertical-align:middle;} .txt-story {font-size:var(--fs-18);font-weight:var(--fw--600);line-height:var(--lh-24);color:#111;margin-top:var(--spacing-8);overflow: hidden;text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;} .pop-story .title { display:flex;align-items:center;gap:var(--spacing-12, 12px); } .storydtl-wrap { padding-bottom:var(--spacing-24, 24px); } .storydtl-wrap .swiper-wrapper { padding-top:50px;padding-bottom:50px; } .storydtl-swiper {position:relative;margin:0 calc(var(--spacing-40, 40px) * -1); } .storydtl-swiper .sample-img { display:block;width:100%;padding-bottom:100%;overflow:hidden;position:relative;border-radius:var(--border-radius-24, 24px); } .storydtl-swiper .sample-img img {position:absolute;left:50%;top:50%;width:100%;height:auto;display:block;object-fit:cover;object-position:center;transform:translate(-50%, -50%);} .storydtl-swiper .swiper-slide {display:flex;/*width:540px;height:540px;*/align-items:center;justify-content:center; } .storydtl-swiper .swiper-slide-active .sample-img { transform:scale(1.18518); } .story-wrap { width:100%; } .story-wrap ul { display:grid;grid-template-columns:repeat(4, 1fr);gap: 24px;} .story-wrap ul > li {border-radius:24px;background:#fff;padding:var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-16, 16px);} .story-wrap ul > li a { display:block;overflow:hidden;width:100%;height:100%;padding:var(--spacing-8, 8px) var(--spacing-8, 8px) var(--spacing-16, 16px);border-radius:var(--border-radius-24, 24px);background: var(--color-set-bg-white, #FFF); } .story-wrap ul > li a .img-wrap { position:relative;overflow:hidden;width:100%;padding-bottom:71.062%;border-radius:var(--border-radius-20, 20px); } .story-wrap ul > li a .img-wrap:before { content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.08);z-index: 1; } .story-wrap ul > li a .img-wrap img { position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;object-fit:cover;} .story-wrap ul > li a .text-wrap {margin-top:var(--spacing-12, 12px);padding:0;} .title-wrap.title-story {flex-direction:column;padding-bottom:0;} .title-story .sub-tab-wrap .tabs {padding:56px 0 0;} .icolist-manager {padding:var(--spacing-40, 40px) 0;margin:0 auto;width:1072px;} .icolist-manager > ul {display:flex;padding:0;flex-wrap:wrap;gap:var(--spacing-8, 8px);} .icolist-manager > ul > li {display:flex;position: relative;min-width:100px;min-height:48px;padding: calc(var(--spacing-2) - 1px) 0;height: 100%;border: 1px solid var(--color-set-line-gray100);border-radius: 100px;background-color: var(--color-set-bg-white);font-size: var(--fs-14); font-weight: var(--fw--400);line-height: var(--lh-20);color: var(--color-set-text-secondary);align-items:center;flex-shrink:0;} .icolist-manager > ul > li > a {display:flex;text-align:center;flex:1;align-items:center;justify-content:center;flex-direction:column;} .icolist-manager > ul > li > a span {display:block;color:var(--color-set-text-tertiary, #6F6F6E);font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px);} .icolist-manager > ul > li > a strong {display:block;color:var(--color-set-text-primary, #111);font-size:var(--fs-15);line-height:var(--lh-20, 20px);letter-spacing:var(--ls-02, -0.2px);} .icolist-manager > ul > li.on {border: 1px solid #DEE1E5;background-color: var(--color-set-brand-black, #111);} .icolist-manager > ul > li.on > a span {color:var(--color-set-text-quaternary, #BCBCBB);} .icolist-manager > ul > li.on > a strong {color:var(--color-set-text-inverse, #fff);} .wrap_manager_review {position:relative;margin:80px auto 0;width:830px;padding-bottom:0;} .wrap-reviewst {position:absolute;right:0;top:60px;margin-bottom:24px;} .wrap-reviewst > span {display:block;color:var(--color-set-text-tertiary, #6F6F6E);font-size:var(--fs-15);line-height:var(--lh-20, 20px);letter-spacing:var(--ls-02, -0.2px);} .wrap-reviewst > strong {font-size:var(--fs-22, 22px);line-height:var(--lh-30, 30px);letter-spacing:var(--ls-05, -0.5px);} .wrap-reviewst > strong + span { margin-top:var(--spacing-4, 4px); } .wrap_manager_review_inner { position:relative;padding-right:378px;padding-top:60px;min-height:400px; } .wrap-reviewimg {position:absolute;bottom:0;right:94px;width:284px;height:400px;} .wrap-reviewimg > img {height:100%;object-fit:cover;} .wrap-reviewst > div {float:right;margin-top:60px;} .tit_manager_review {font-size:var(--fs-15);line-height:var(--lh-20);letter-spacing:var(--ls-02);color:var(--color-set-brand-red);} .stit_manager_review {font-size:var(--fs-15);line-height:var(--lh-20);letter-spacing:var(--ls-02);color:var(--color-set-text-secondary);} .txt_manager_review {margin:var(--spacing-12) 0 0;font-size:var(--fs-32);line-height:var(--lh-44, 44px);color:var(--color-set-bg-gray900);font-weight:var(--fw--600);} .wrap-bagelist { display:flex;line-height:1;gap:var(--spacing-4, 4px);flex-wrap:wrap; } .wrap-bagelist .bage_basic { padding:0 6px 0 7px;line-height:var(--lh-24, 24px); } .wrap_manager_review .box_gray {padding:0;margin-top:32px;} .wrap_manager_review .list-bullet > li { font-size:var(--fs-15, 15px);line-height:var(--lh-20, 20px);letter-spacing:var(--ls-02, -0.2px);} .wrap_manager_review .list-bullet > li:before { top:9px; } .wrap_manager_review .list-bullet > li + li { margin-top:var(--spacing-8, 8px); } .review-manager-normal, .review-manager-gold { margin-bottom:0; } .review-manager-normal .list-bullet, .review-manager-gold .list-bullet { display:flex;flex-direction:column;flex-wrap:wrap;height:128px;align-content:space-between; } .review-manager-normal .list-bullet > li, .review-manager-gold .list-bullet > li { display:flex;padding-left:0;align-items:center;gap:var(--spacing-4, 4px);color:var(--color-set-text-secondary, #40403F); } .review-manager-normal .list-bullet > li + li, .review-manager-gold .list-bullet > li + li { margin-top:0; } .review-manager-normal .list-bullet > li:before, .review-manager-gold .list-bullet > li:before { position:static;width:32px;height:32px;border-radius:0;background:url(/kr/bestshop/images/renewal/icon/star.svg) } .review-manager-normal .list-bullet > li.star:before, .review-manager-gold .list-bullet > li.star:before { background-image:url(/kr/bestshop/images/renewal/icon/star.svg); } .review-manager-normal .list-bullet > li.thumbs:before, .review-manager-gold .list-bullet > li.thumbs:before { background-image:url(/kr/bestshop/images/renewal/icon/thumbs.svg); } .review-manager-normal .list-bullet > li.heart:before, .review-manager-gold .list-bullet > li.heart:before { background-image:url(/kr/bestshop/images/renewal/icon/heart.svg); } .review-manager-normal .list-bullet > li.trophy:before, .review-manager-gold .list-bullet > li.trophy:before { background-image:url(/kr/bestshop/images/renewal/icon/trophy.svg); } .wrap-review {padding:80px 30px 40px;} .wrap-review > ul {display:flex;margin:0 auto;gap:24px;justify-content:center;} .wrap-review > ul > li {max-width:444px;height:fit-content;border-radius:24px;background:#fff;padding:var(--spacing-24);} .wrap-review > ul > li:nth-child(2) {margin-top:76px;} .wrap-review > ul > li > p {margin-top:var(--spacing-24);font-size:16px;font-weight:400;line-height:22px;letter-spacing:-0.2px;color:var(--color-set-text-secondary);} .wrap-review .wrap-reviewSt { margin-bottom:24px; } .wrap-reviewSt {display:flex;justify-content:space-between;} .wrap-reviewnm > span {display:inline-block;width:40px;height:40px;border-radius:50%;vertical-align:middle;overflow:hidden;} .wrap-reviewnm > span > img {width:100%;height:auto;object-fit:cover;} .wrap-reviewnm > strong {margin-left:5px;font-size:16px;color:#111;vertical-align:middle;} .wrap-reviewdt > span {line-height:40px;vertical-align:middle;color:var(--color-set-text-tertiary);font-size:var(--fs-14);} .wrap-reviewdt > span:first-child:after {content:'ㆍ';padding-left:2px;margin-right:4px;} .wrap-managertit {line-height:1;font-weight:var(--fw--500, 500);} .wrap-managertit > * { vertical-align:top; } .wrap-managertit > .bg_bar:after { display:none !important; } .wrap-managertit > .bg_bar:first-child:nth-last-child(2):after { display:block !important; } .wrap_manager_review_txt {margin-top:60px;} .btn-story {width:100%;max-width:767px;margin:80px auto 0;padding:var(--spacing-40, 40px) 22px;gap:var(--spacing-24, 24px);justify-content:center;} .btn-story > .btn { flex:0 1 350px; } .wrap_manager_best {margin-top:80px;} .wrap_manager_best > ul {display:grid;margin-bottom:75px;gap:75px 24px;grid-template-columns:repeat(4, 1fr);grid-template-columns:repeat(auto-fill, minmax(min(299px, 100%), 1fr)); } .wrap_manager_best > ul:first-child {margin-bottom:75px;} .wrap_manager_best > ul:last-child { margin-bottom:0; } .wrap_manager_best > ul > li { overflow:hidden;padding-top:20px; } .manager_best_box {position:relative;display:block;min-height:204px;padding:15px 178px 15px 20px;border-radius:24px;background:linear-gradient(180deg, #F0F3F7 0%, #E9F1F8 100%);} .manager_best_box:hover, .manager_best_box:focus {background:linear-gradient(180deg, #F0F3F7 0%, #E9F1F8 100%);} .best_gold {background:linear-gradient(180deg, rgba(241, 234, 221, 0.80) 0%, rgba(191, 173, 143, 0.80) 100%);} .best_gold:hover, .best_gold:focus {background:linear-gradient(180deg, rgba(241, 234, 221, 0.80) 0%, rgba(191, 173, 143, 0.80) 100%);} .manager_best_box > p {display:-webkit-box;min-height:92px;font-size:15px;font-weight:500;line-height:20px;color:#40403F;/*background:url(/kr/bestshop/images/renewal/icon/ico-comment.svg) no-repeat left top;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtMTAuMTA2IDMuOTQxLTQuMTEyIDQuMWE2LjUyIDYuNTIgMCAwIDEgNS41NzcgMS45NDQgNy4xIDcuMSAwIDAgMC0xLjYwNCA0LjUwNmMwIDEuNzA5LjYwMiAzLjI3NyAxLjYwNSA0LjUwN2E2LjUyIDYuNTIgMCAwIDEtNC43MDkgMi4wMDNjLTMuNjA2IDAtNi41MjktMi45MTQtNi41MjktNi41MSAwLTEuNjk0LjY1LTMuMjM3IDEuNzE0LTQuMzk1bC0uMDAyLS4wMDIuMDY3LS4wNjVxLjEyOS0uMTM3LjI2Ny0uMjY3TDkuMTYyIDN6IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii4xMiIvPjxwYXRoIGQ9Im0yMC4zODIgMy45NDEtNC4xMTIgNC4xcS40MjctLjA1OS44Ny0uMDZjMy42MDUgMCA2LjUyOCAyLjkxNSA2LjUyOCA2LjUxIDAgMy41OTYtMi45MjMgNi41MS02LjUyOSA2LjUxcy02LjUyOS0yLjkxNC02LjUyOS02LjUxYzAtMS42OTQuNjUtMy4yMzcgMS43MTQtNC4zOTVsLS4wMDItLjAwMi4wNjctLjA2NXEuMTI5LS4xMzcuMjY3LS4yNjdMMTkuNDM4IDN6IiBmaWxsPSIjMDAwIiBmaWxsLW9wYWNpdHk9Ii4xMiIvPjwvc3ZnPg==) no-repeat left top;padding-top:32px;letter-spacing:var(--ls-02, -0.2px);overflow:hidden;line-clamp:3;-webkit-line-clamp:3;-webkit-box-orient: vertical;} .manager_best_box > div {margin-top:30px;} .manager_best_box > div > strong {display:block;font-size:24px;line-height:32px;color:#111;} .manager_best_box > div > span { display:block;margin-top:var(--spacing-2, 2px);font-size:12px;line-height:16px;color:#111;} .manager_best_box > span {display:flex;position:absolute;bottom:0;right:18px;width:160px;height:224px;text-align:center;align-items:flex-end;justify-content:center;} .manager_best_box > span > img {max-width:100%;/*height:100%;*/max-height:100%;width:auto;object-fit:cover;filter:drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.24));} .quesiton-list {border-bottom:1px solid var(--color-set-line-gray50);padding:0 0 24px;margin-bottom:24px;} .quesiton-list > h4 {position:relative;display:flex;gap:8px;align-items:center;font-size:16px;line-height:22px;font-weight:600;margin-bottom:12px;} .quesiton-list > h4 .mark { position:relative; } .quesiton-list > h4 .mark:before { display:inline-block;content:"Q";border-radius:50%;width:32px;height:32px;background:#EBF5F7;text-align:center;line-height:32px;vertical-align:middle;color:#047F9D;font-size:18px;font-weight:600;flex-shrink:0; } .quesiton-list > p {font-size:14px;line-height:20px;color:#444;} .quesiton-list:first-child { margin-top:var(--spacing-32, 32px); } .quesiton-list:last-child { margin-bottom:var(--spacing-32, 32px); } .mangerlist-swiper {padding:0;margin:var(--spacing-32, 32px) calc(var(--spacing-20, 20px) * -1) var(--sapcing-8, 8px); } .mangerlist-swiper .swiper { padding:0 var(--spacing-20, 20px); } .mangerlist-swiper .swiper-slide { width:306px;height:230px; } .mangerlist-swiper .swiper-slide .sample-img { display:block;overflow:hidden;position:relative;width:100%;height:100%;border-radius:var(--border-radius-16, 16px); } .mangerlist-swiper .swiper-slide .sample-img img { position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%, -50%); } .bg-manager-normal {backdrop-filter: blur(12px);background: rgba(205, 218, 230, 0.80);} .bg-manager-gold {backdrop-filter: blur(12px);background: rgba(205, 191, 167, 0.80);} .bg-manager-normal .list-bullet > li, .bg-manager-gold .list-bullet > li {color:#40403F;} .bestshop-intro-kv.type-2 {max-width:1388px;margin:0px auto;} .video-wrap {position:relative;width: 100%;height:100%;} .video-wrap video { position: absolute;width: 100%;min-width: 100%;height: auto;min-height: 100%;top: 50%;left: 0;transform: translateY(-50%);} .bestshop-intro-kv.type-2 .video-wrap .kv-video {object-fit: cover;} #space-bg {display: flex;position:absolute;top:0;left: 0;justify-content: center;align-items: center;overflow: hidden;width: 100%;max-width: 1380px;height: 300px;position: relative;border-radius: 8px;} #space-bg .curtain {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} #space-bg .curtain.anime.left {animation: 1.1s ease-in 0s 1 normal both running curtainLeft;} #space-bg .curtain.anime.right {animation: 1.1s ease-in 0s 1 normal both running curtainRight;} #space-bg .curtain.left {transform: translateX(-31%);} #space-bg .curtain.right {transform: translateX(31%);} @keyframes curtainLeft { 0% { transform: translateX(-31%); } 100% { transform: translateX(-68%); } } @keyframes curtainRight { 0% { transform: translateX(31%); } 100% { transform: translateX(68%); } } #space-bg .curtain.anime.left { animation: 1.1s ease-in 0s 1 normal both running curtainLeft; } .bestshop-intro-kv.type-2 .video-controller-wrap {position:absolute;bottom:25px;left:32px;z-index:2;} .bestshop-intro-kv.type-2 .video-controller {width:48px;height:48px;/*background:url(/kr/bestshop/images/renewal/icon/btn_mvplay.svg) no-repeat center;*/background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48ZyBkYXRhLW5hbWU9IuyCrOqwge2YlSA0NCIgZmlsbD0icmdiYSgwLDAsMCwwLjMpIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iMjQiIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSI0NiIgaGVpZ2h0PSI0NiIgcng9IjIzIiBmaWxsPSJub25lIi8+PC9nPjxwYXRoIGRhdGEtbmFtZT0i64uk6rCB7ZiVIDEiIGQ9Ik0zMC45IDIyLjI1N2EyIDIgMCAwIDEgMCAzLjQ4NmwtOS45MjEgNS41OEEyIDIgMCAwIDEgMTggMjkuNThWMTguNDJhMiAyIDAgMCAxIDIuOTgxLTEuNzQzWiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) no-repeat center;background-size: auto 100%;} .bestshop-intro-kv.type-2 .video-controller.is-playing {/*background:url(/kr/bestshop/images/renewal/icon/btn_mvpause.svg) no-repeat center;*/background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4Ij48ZyBkYXRhLW5hbWU9IuyCrOqwge2YlSA0NCIgZmlsbD0icmdiYSgwLDAsMCwwLjMpIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiI+PHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjQ4IiByeD0iMjQiIHN0cm9rZT0ibm9uZSIvPjxyZWN0IHg9IjEiIHk9IjEiIHdpZHRoPSI0NiIgaGVpZ2h0PSI0NiIgcng9IjIzIiBmaWxsPSJub25lIi8+PC9nPjxnIGRhdGEtbmFtZT0i6re466O5IDE5ODMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIwLjA5MSAxNikiIGZpbGw9IiNmZmYiPjxyZWN0IGRhdGEtbmFtZT0i7IKs6rCB7ZiVIDI3MDA2IiB3aWR0aD0iMyIgaGVpZ2h0PSIxNiIgcng9IjEuNSIvPjxyZWN0IGRhdGEtbmFtZT0i7IKs6rCB7ZiVIDI3MDA3IiB3aWR0aD0iMyIgaGVpZ2h0PSIxNiIgcng9IjEuNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNikiLz48L2c+PC9zdmc+) no-repeat center;background-size:auto 100%;} /* 베스트샵 소개 - 브랜드 소개 */ .scroll-event .content { padding:0; } .scroll-event-content .section { position:relative;text-align:center;padding:0 var(--spacing-20, 20px); } .scroll-event-content .section > h4 { font-size:var(--fs-40, 40px);font-weight:var(--fw--600, 600);line-height:var(--lh-48, 48px);letter-spacing:var(--ls-05, -0.5px); } .scroll-event-content .section > p { margin-top:var(--fs-32, 32px);font-size:var(--fs-24, 24px);line-height:var(--lh-32, 32px);letter-spacing:var(--ls-05, -0.5px);color:var(--color-set-text-secondary, #40403F); } .scroll-event-content .section.intro-1 { padding:354px 0 0;position:relative; } .scroll-event-content .section.intro-1 .brand-copy-wrap { position:absolute;left:0;top:60px;width:100%;padding:60px 20px;z-index:2;text-align:center; } .scroll-event-content .section.intro-1 .brand-copy-inner { position:relative;width:100%;max-width:1122px;margin:0 auto;text-align:left; } .scroll-event-content .section.intro-1 .brand-copy-base > div, .scroll-event-content .section.intro-1 .brand-copy-over > div { display:flex;margin:0;color:var(--color-set-text-primary, #111);font-size:60px;line-height:72px;letter-spacing:var(--ls-05, -0.5px); } .scroll-event-content .section.intro-1 .brand-copy-base > div p, .scroll-event-content .section.intro-1 .brand-copy-over > div p { display:inline-flex;vertical-align:top;width:100%;max-width:324px;justify-content:flex-end; } .scroll-event-content .section.intro-1 .brand-copy-base > div p:last-child, .scroll-event-content .section.intro-1 .brand-copy-over > div p:last-child { max-width:392px;justify-content:flex-start; } .scroll-event-content .section.intro-1 .brand-copy-base > div .point { font-weight:var(--fw--700, 700);color:var(--color-set-text-inverse, #fff);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#000; } .scroll-event-content .section.intro-1 .brand-copy-base > div + div, .scroll-event-content .section.intro-1 .brand-copy-over > div + div { margin-top:31px; } .scroll-event-content .section.intro-1 .brand-copy-base > div span, .scroll-event-content .section.intro-1 .brand-copy-over > div span { display:inline-block;position:relative;opacity:0;vertical-align:top; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line { display:inline-flex;padding:0 var(--spacing-24, 24px);flex:1;align-items:center; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line:after { content:'';display:block;width:0;height:4px;background-color:var(--color-set-bg-gray900, #111);transition:all 0.15s ease; } .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line:after { background-color:var(--color-set-bg-white, #fff); } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line.active:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line.active:after { width:100%; } .scroll-event-content .section.intro-1 .brand-copy-over { position:absolute;left:0;top:0;width:100%;clip-path:inset(100% 0 0 0);pointer-events:none; } .scroll-event-content .section.intro-1 .brand-copy-over > div { color:#fff; } .scroll-event-content .section.intro-1 .brand-copy-over > div .point { font-weight:var(--fw--700, 700);color:var(--color-set-text-primary, #111);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:var(--color-set-text-inverse, #fff); } .scroll-event-content .section.intro-1 .brand-copy-base strong, .scroll-event-content .section.intro-1 .brand-copy-over strong { font-weight:var(--fw--700, 700); } .scroll-event-content .section.intro-1 .img-wrap { position:relative;color:#fff;z-index:1; } .scroll-event-content .section.intro-1 .img-wrap img { margin:0 auto; } /* .scroll-event-content .section.intro-1 .img-wrap:before { content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.30);z-index:2; } */ .scroll-event-content .section.intro-2 { padding-top:180px; } .scroll-event-content .section.intro-2:before { content:'';position:absolute;left:0;top:0;bottom:209px;width:100%;background-color:#F3F5F7;z-index:-1; } .scroll-event-content .section.intro-2 .img { overflow:hidden;width:713px;height:310px;margin:64px auto 0;border-radius:var(--border-radius-24, 24px); } .scroll-event-content .section.intro-3 { margin-top:180px; } .scroll-event-content .section.intro-3 .grid { margin-top:-78px;} .scroll-event-content .grid { max-width:1880px;margin:0 auto; } .scroll-event-content .grid .grid-item { overflow:hidden;position:relative;margin-bottom:var(--spacing-24, 24px);width:100%;max-width:214px;height:240px; } .scroll-event-content .grid .grid-item img { position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%, -50%);border-radius:var(--border-radius-24, 24px); } .scroll-event-content .grid .grid-item.grid-item--height2 { height:314px; } .scroll-event-content .grid .grid-item.grid-item--height3 { height:533px; } .scroll-event-content .grid .grid-item.empty1, .scroll-event-content .grid .grid-item.empty6 { height:58px; } .scroll-event-content .grid .grid-item.empty2, .scroll-event-content .grid .grid-item.empty5 { height:103px; } .scroll-event-content .grid .grid-item.empty3, .scroll-event-content .grid .grid-item.empty4 { height:214px; } /* 베스트샵 소개 - 브랜드 소개 0729 ver */ .brand-new-intro { padding:0 var(--spacing-40, 40px);text-align:center; } .brand-new-intro .visual-area { position:relative;height:500px;margin:0 calc(var(--spacing-40, 40px) * -1); } .brand-new-intro .visual-area img { position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;object-fit:none; } .brand-new-intro .flag { display:inline-block;margin-bottom:26px;padding:0 24px;min-height:42px;background-color:#000;border-radius:var(--border-radius-full, 1000px);font-size:var(--fs-16, 16px);font-weight:var(--fw--500, 500);line-height:var(--lh-42, 42px);color:var(--color-set-text-inverse, #fff);letter-spacing:4.8px;text-transform:uppercase;vertical-align:top; } .brand-new-intro .flag.bg-green { background-color:#109547; } .brand-new-intro .tit { font-size:var(--fs-40, 40px);line-height:var(--lh-52, 52px);font-weight:300;letter-spacing:-1.2px; } .brand-new-intro .tit strong { font-weight:var(--fw--700, 700); } .brand-new-intro .desc { margin-top:18px;font-size:21px;line-height:27px;font-weight:300; } .brand-new-intro .desc strong { font-weight:var(--fw--700, 700); } .brand-new-intro .img { overflow:hidden;position:relative;margin:60px auto 0;width:100%;max-width:920px;border-radius:40px; } .brand-new-intro .img img { position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;object-fit:cover; } .brand-new-intro .img.img-type01 { height:442px; } .brand-new-intro .img.img-type02 img { position:static;transform:none; } .brand-new-intro .img.img-type03 { height:480px; } .brand-new-intro .img.img-type04 { height:340px; } .brand-new-intro .img-wrap { display:flex;margin:60px calc(var(--spacing-40, 40px) * -1) 0 ;align-items:stretch;justify-content:center;gap:var(--spacing-16, 16px); } .brand-new-intro .img-wrap > div { overflow:hidden;position:relative;width:100%;max-width:632px;height:340px;border-radius:40px; } .brand-new-intro .img-wrap > div img { position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;object-fit:cover; } .brand-new-intro .img-marquee { margin:60px calc(var(--spacing-40, 40px) * -1) 0; } .brand-new-intro .img-marquee > div { overflow:hidden;padding:42px 0; } .brand-new-intro .img-marquee > div + div { display:none;margin-top:var(--spacin-40, 40px); } .brand-new-intro .img-marquee img { max-height:202px; } .brand-new-intro .img-marquee .marquee-track { display:flex;width:max-content;will-change:transform; } .brand-new-intro .img-marquee .marquee-track img { display:block;flex:none;max-width:none; } .brand-new-intro .title-area { padding:162px 0 167px; } .brand-new-intro .vertical-line { position:relative; } .brand-new-intro .vertical-line:before, .brand-new-intro .vertical-line:after { content:'';display:block;margin:0 auto;width:1px;height:86px;background-color:#333; } .brand-new-intro .vertical-line:before { margin-bottom:60px; } .brand-new-intro .vertical-line:after { margin-top:60px; } .brand-new-intro .section .article { padding:50px 0 85px; } .brand-new-intro .section .article + .article { margin-top:50px; } .brand-new-intro .section .article.compact01 { padding-bottom:0; } .brand-new-intro .section .article.compact02 { padding-top:30px;padding-bottom:30px; } .esg-list { margin:60px calc(var(--spacing-40, 40px) * -1) 0;text-align:center; } .esg-list ul { display:flex;width:100%;max-width:1280px;margin:0 auto;font-size:21px;line-height:27px;font-weight:300;letter-spacing:-0.21px;align-items:flex-start;justify-content:space-between;gap:var(--spacing-16, 16px); } .esg-list ul > li img { width:100%;max-width:380px; } .esg-list ul > li strong { display:block;margin-top:var(--spacing-24, 24px);font-weight:var(--fw--700, 700); } .esg-list ul > li p { margin-top:var(--spacing-8, 8px); } .brand-new-intro .brand-logo { display:flex;margin-top:50px;padding:26px 0 30px;padding-bottom:150px;min-height:84px;align-items:center;justify-content:center; } /* 베스트샵 소개 - 구매절차 */ .procedure-wrap { width:100%;max-width:818px;margin:0 auto; } .procedure-wrap .highlight { font-weight:var(--fw--600, 600);color:var(--color-set-text-primary, #111) !important; } .procedure-wrap > ol > li { position:relative;padding-left:56px;padding-bottom:60px; } .procedure-wrap > ol > li:before { content:'';display:flex;position:absolute;left:0;top:0;min-width:44px;height:44px;border-radius:50%;background:#FFEAEA;color:var(--color-set-brand-red, #FC312E);font-size:var(--fs-28, 28px);font-weight:var(--fw--500, 500);line-height:var(--lh-38, 38px);letter-spacing:var(--ls-05, -0.5px);text-align:center;align-items:center;justify-content:center;z-index:2; } .procedure-wrap > ol > li:after { content:'';position:absolute;left:22px;top:0;width:1px;height:calc(100% - 20px);background-color:var(--color-set-line-gray100, #D6D6D5);z-index:1; } .procedure-wrap > ol > li:nth-child(1):before { content:'01'; } .procedure-wrap > ol > li:nth-child(2):before { content:'02'; } .procedure-wrap > ol > li:nth-child(3):before { content:'03'; } .procedure-wrap > ol > li:nth-child(4):before { content:'04'; } .procedure-wrap > ol > li:nth-child(5):before { content:'05'; } .procedure-wrap > ol > li:last-child { padding-bottom:0; } .procedure-wrap > ol > li:last-child:after { display:none; } .procedure-wrap .procedure-item { flex:1 1 calc(468px - 30px); } .procedure-wrap .procedure-item .tit { display:block;font-size:var(--fs-32, 32px);font-weight:var(--fw--600, 600);line-height:var(--lh-44, 44px);letter-spacing:var(--ls-05, -0.5px);margin-bottom:var(--spacing-12, 12px); } .procedure-wrap .procedure-item p { font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);color:var(--color-set-text-tertiary, #6F6F6E); } .procedure-wrap .procedure-content { margin-top:var(--spacing-24, 24px); } .procedure-wrap .procedure-content ul { display:flex;gap:var(--spacing-16, 16px);flex-wrap:wrap; display:grid;grid-template-columns:repeat(auto-fill, minmax(min(243px, 100%), 1fr)); } .procedure-wrap .procedure-content ul li { flex:1; } .procedure-wrap .procedure-content ul li a { display:flex;position:relative;overflow:hidden;padding:calc(var(--spacing-16, 16px) - 1px);border:1px solid var(--color-set-line-gray100, #D6D6D5);border-radius:var(--border-radius-24, 24px);align-items:center;flex-wrap:wrap; } .procedure-wrap .procedure-content ul li a strong { display:flex;font-size:var(--fs-18, 18px);font-weight:var(--fw--600, 600);line-height:var(--lh-24, 24px);letter-spacing:var(--ls-03, -0.3px);flex:1;align-items:center; } .procedure-wrap .procedure-content ul li a strong:before { content:'';display:block;width:24px;height:24px;margin-right:var(--spacing-4, 4px);background-repeat:no-repeat;background-position:center center;background-size:100%; } .procedure-wrap .procedure-content ul li a p { margin-top:var(--spacing-12, 12px);flex:1 1 100%;font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);color:var(--color-set-text-secondary, #40403F);word-break:break-all; } .procedure-wrap .procedure-content ul li a span { display:inline-flex;font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);align-items:center;gap:var(--spacing-2, 2px); } .procedure-wrap .procedure-content ul li a span:after { content:'';display:block;width:12px;height:12px;/*background:url(/kr/bestshop/images/renewal/icon/arrow_right_12x12.svg) no-repeat center center;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC41IDkgMy0zLTMtMyIgc3Ryb2tlPSIjMTExIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+PC9zdmc+) no-repeat center center; } .procedure-wrap .procedure-content ul li.cate01 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate01.png); } .procedure-wrap .procedure-content ul li.cate02 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate03.png); } .procedure-wrap .procedure-content ul li.cate03 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate04.png); } .procedure-wrap .procedure-content ul li.cate04 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate06.png); } .procedure-wrap .procedure-content ul li.cate05 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate07.png); } .procedure-wrap .procedure-content ul li.cate06 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate08.png); } .procedure-wrap .procedure-content ul li.cate07 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate07.png); } .procedure-wrap .procedure-content ul li.cate08 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate09.png); } .procedure-wrap .procedure-content ul li.cate09 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate10.png); } .procedure-wrap .procedure-content ul li.cate10 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate11.png); } .procedure-wrap .procedure-content ul li.cate11 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate05.png); } .procedure-wrap .procedure-content ul li.cate12 a strong:before { background-image:url(/kr/bestshop/images/renewal/common/cate12.png); } /* 베스트샵 소개 - 구매절차 effect (초기 상태는 CSS, 스크립트는 .is-visible 만 추가) */ .procedure-wrap > ol > li { opacity:0.001;transform:translateY(40px);transition:opacity .6s ease-out, transform .6s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0) translateY(40px);will-change:opacity; } .procedure-wrap > ol > li.is-visible { opacity:1;transform:none; } .ico-new {position:absolute;right:16px;top:16px;width:100px;height:100px;background:url(/kr/bestshop/images/renewal/icon/new_100x100.svg) no-repeat center center;background-size:100%;} .list-story > ul {display:grid;grid-template-columns: repeat(4, 1fr);gap:24px;} .story-content .list-wrap ul > li a {border-radius:0px;padding:0;} .story-content .list-wrap ul > li a .img-wrap { padding-bottom:74.924%; } .story-content .list-wrap ul > li a .text-wrap { margin-top:var(--spacing-12, 12px);padding:var(--spacing-8, 8px) var(--spacing-16, 16px) var(--spacing-16, 16px); } .story-content .list-wrap ul > li a .tag {margin:0px;} .story-content .list-wrap.ratio-1-1 ul > li a .img-wrap { padding-bottom:100%; } .story-content .list-wrap.ratio-1-1 ul > li a .text-wrap { padding:var(--spacing-10, 10px) var(--spacing-16, 16px) var(--spacing-12, 12px); } .story-content .list-wrap.ratio-1-1 ul > li a .txt-story { letter-spacing:var(--ls-03, -0.3px); } .story-content .list-wrap .btn-group { padding-bottom:0; } @media screen and (max-width:1682px) { .scroll-event-content .grid .grid-item.empty6 { display:none; } } @media screen and (max-width:1443px) { .scroll-event-content .section.intro-3 .grid { margin-top:48px;} .scroll-event-content .grid .grid-item.empty5 { display:none; } /* .story-content {width:auto;margin:0 10px;padding:24px 0px 40px;} */ } @media screen and (max-width:1205px) { /* 베스트샵 소개 - 브랜드 소개 */ .scroll-event-content .section > h4 { font-size:var(--fs-36, 36px);line-height:var(--lh-44, 44px); } .scroll-event-content .section > p { font-size:var(--fs-24, 24px);line-height:var(--lh-32, 32px);letter-spacing:var(--ls-05, -0.5px); } .scroll-event-content .section.intro-1 { padding-top:306px; } .scroll-event-content .section.intro-1 .brand-copy-inner { max-width:754px; } .scroll-event-content .section.intro-1 .brand-copy-base > div, .scroll-event-content .section.intro-1 .brand-copy-over > div { font-size:var(--fs-40, 40px);line-height:48px; } .scroll-event-content .section.intro-1 .brand-copy-base > div p, .scroll-event-content .section.intro-1 .brand-copy-over > div p { max-width:215px; } .scroll-event-content .section.intro-1 .brand-copy-base > div p:last-child, .scroll-event-content .section.intro-1 .brand-copy-over > div p:last-child { max-width:262px; } .scroll-event-content .section.intro-1 .brand-copy-base > div .point, .scroll-event-content .section.intro-1 .brand-copy-over > div .point { -webkit-text-stroke-width:1.5px; } .scroll-event-content .section.intro-1 .brand-copy-base > div + div, .scroll-event-content .section.intro-1 .brand-copy-over > div + div { margin-top:var(--spacing-30, 30px); } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line:after { height:3px; } .scroll-event-content .grid .grid-item.empty4 { display:none; } .icolist-manager {width:auto;} } @media screen and (max-width:1024px) { .wrap_manager_best > ul {grid-template-columns: repeat(3, 1fr);} .wrap-review {padding:80px auto;} } @media screen and (max-width:1023px) { /* 베스트샵 소개 - 브랜드 소개 */ .scroll-event-content .section > h4 { font-size:var(--fs-32, 32px);line-height:var(--lh-44, 44px); } .scroll-event-content .section > p { font-size:var(--fs-22, 22px);line-height:var(--lh-30, 30px); } .scroll-event-content .section.intro-1 { padding-top:298px; } .scroll-event-content .section.intro-1 .brand-copy-inner { max-width:627px; } .scroll-event-content .section.intro-1 .brand-copy-base > div, .scroll-event-content .section.intro-1 .brand-copy-over > div { font-size:var(--fs-32, 32px);line-height:var(--lh-44, 44px); } .scroll-event-content .section.intro-1 .brand-copy-base > div p, .scroll-event-content .section.intro-1 .brand-copy-over > div p { max-width:172px; } .scroll-event-content .section.intro-1 .brand-copy-base > div p:last-child, .scroll-event-content .section.intro-1 .brand-copy-over > div p:last-child { max-width:208px; } .scroll-event-content .section.intro-1 .brand-copy-base > div .point, .scroll-event-content .section.intro-1 .brand-copy-over > div .point { -webkit-text-stroke-width:1.2px; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line:after { height:2px; } .scroll-event-content .grid .grid-item { max-width:23.384%; } /* 베스트샵 소개 - 브랜드 소개 0729 ver */ .brand-new-intro { padding:0 var(--spacing-20, 20px); } .brand-new-intro .visual-area { margin:0 calc(var(--spacing-20, 20px) * -1); } .brand-new-intro .img.img-type01 { padding-bottom:54.672%;height:auto; } .brand-new-intro .img.img-type02 img { position:static;transform:none; } .brand-new-intro .img.img-type03 { padding-bottom:72.392%;height:auto; } .brand-new-intro .img.img-type04 { padding-bottom:40.249%;height:auto; } .brand-new-intro .img-wrap { display:block;margin:60px calc(var(--spacing-20, 20px) * -1) 0; } .brand-new-intro .img-wrap > div { width:auto;max-width:none;height:auto;margin-left:16.668%;padding-bottom:44.272%;border-radius:var(--border-radius-full, 1000px);border-top-right-radius:0;border-bottom-right-radius:0; } .brand-new-intro .img-wrap > div + div { margin-top:var(--spacing-16, 16px); } .brand-new-intro .img-wrap > div img { position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;height:100%;object-fit:cover; } .brand-new-intro .img-wrap > div:first-child { margin-left:0;margin-right:16.668%;border-radius:var(--border-radius-full, 1000px);border-top-left-radius:0;border-bottom-left-radius:0; } .brand-new-intro .img-marquee { margin:60px calc(var(--spacing-20, 20px) * -1) 0; } .esg-list { margin:60px 0 0; } .esg-list ul { display:block; } .esg-list ul > li + li { margin-top:var(--spacing-16, 16px); } .manager_best_box {border-radius:16px;padding:144px 0 0;background:linear-gradient(180deg, #F0F3F7 0%, var(--05-Pastel-Blue, #E9F1F8) 100%);} .manager_best_box > p {display:none;} .manager_best_box > div {display:block;position:relative;margin:0;padding:6px 6px;text-align:center;border-radius:0 0 16px 16px;background:rgba(205, 218, 230, 0.70);backdrop-filter:blur(15px);z-index:2;} .manager_best_box > div > strong {font-size:20px;line-height:28px;letter-spacing:var(--ls-04, -0.4px);} .manager_best_box > div > span {font-size: 13px;font-weight:500;line-height:18px;} .best_gold { background:linear-gradient(180deg, #F3EDE3 0%, #E0D5C4 100%); } .best_gold.manager_best_box > div {background:rgba(205, 191, 167, 0.70); } .manager_best_box > span {display:flex;position:absolute;left:50%;bottom:42px;width:125px;height:176px;transform:translateX(-50%);align-items:flex-end;z-index:1;} .manager_best_box > span > img {width:100%;height:auto;} .wrap-review {padding:24px 20px;} .wrap-review > ul {width:100%;display: grid;grid-template-columns: repeat(2, auto);} .wrap-review > ul > li {max-width:100%;} .wrap-review > ul > li:nth-child(2) {margin-top:0;} .wrap-review p { font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px); } .wrap-reviewnm > span {width:32px;height:32px;} .wrap-reviewnm > strong {font-size:14px;} .wrap-reviewdt > span {line-height:32px;font-size:var(--fs-13);} .btn-story { margin-top:24px; } .btn-story > .btn { flex:1 1 50%; } .bestshop-intro-kv.type-2 .video-wrap .kv-video {object-fit:cover;} } @media screen and (max-width:870px) { .wrap_manager_review { width:100%; } } @media screen and (max-width:767px) { .story-content {margin:0px;padding-top:0;padding-bottom:0;} .text-story {padding:var(--spacing-12);} .tag-story {display:inline-block;padding:1px 4px 1px 5px;border-radius:var(--border-radius-6, 6px);font-size:var(--fs-12, 12px);line-height:var(--lh-16, 16px); } .txt-story {font-size:var(--fs-16);line-height:var(--lh-22);text-overflow:ellipsis;margin-top:var(--spacing-4);} .pop-story .title { gap:var(--spacing-4, 4px); } .storydtl-wrap { padding-top:12px;padding-bottom:12px; } .storydtl-wrap .swiper-wrapper { padding-top:5.715%;padding-bottom:5.715%; } .storydtl-swiper { margin:0 calc(var(--spacing-20, 20px) * -1); } .storydtl-swiper .swiper-slide-active .sample-img { transform:scale(1.14815); } .storydtl-swiper .swiper-button-next { right:8px; } .storydtl-swiper .swiper-button-prev { left:8px; } /* .storydtl-swiper .sample-img img {height:310px;} */ .story-wrap ul { grid-template-columns:repeat(2, 1fr);gap:12px;} .ico-new { right:4px;top:4px;width:60px;height:60px;} .story-content .list-wrap li a {padding:0 0 var(--spacing-12, 12px);} .story-content .list-wrap ul {gap:12px;} .story-content .list-wrap ul > li a .img-wrap {width:100%;height:auto;/*padding-bottom:75.15%;*/border-radius:var(--border-radius-16, 16px);} .story-content .list-wrap ul > li a .img-wrap:before {position:relative;} .story-content .list-wrap ul > li a .text-wrap {padding:0 var(--spacing-12, 12px) var(--spacing-12, 12px);} .story-content .list-wrap ul > li a .text-wrap > strong {font-size:14px;letter-spacing:0;} .story-content .list-wrap ul > li a .text-wrap .txt-story { letter-spacing:var(--ls-02, -0.2px); } .story-content .list-wrap ul > li a .text-wrap .date {margin-top:var(--spacing-12);} .story-content .list-wrap .btn-group { padding-top:var(--spacing-32, 32px); } .story-content .list-wrap.ratio-1-1 ul > li a .text-wrap { padding:0 var(--spacing-12, 12px) var(--spacing-20, 20px); } .title-story .sub-tab-wrap .tabs {margin:var(--spacing-16) 0;padding:var(--spacing-8) 0;} .pop-story {width:100%;} .icolist-manager { padding:var(--spacing-24, 24px) 0; } .icolist-manager > ul {display:grid;grid-template-columns:repeat(4, 1fr);grid-template-columns:repeat(auto-fill, minmax(min(80px, 100%), 1fr)); } .icolist-manager > ul > li {min-width:auto;min-height:40px;padding:calc(var(--spacing-2) - 1px) 0;flex-shrink:0;} .icolist-manager > ul > li > a span {font-size:var(--fs-11, 11px);line-height:var(--lh-14, 14px);} .icolist-manager > ul > li > a strong {font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px);letter-spacing:0;} .tit_manager_review {font-size:var(--fs-12);line-height:var(--lh-16);} .stit_manager_review {font-size:var(--fs-12);line-height:var(--lh-16);} .txt_manager_review {font-size:var(--fs-18);line-height:var(--lh-24);margin:var(--spacing-24, 24px) 0 0 0;letter-spacing:var(--ls-03, -0.3px);} .wrap-bagelist {margin:12px 0 0 0;} .wrap-bagelist .bage_basic { padding:0 4px 0 5px;line-height:var(--lh-18, 18px); } .wrap-reviewst {display:flex;position:relative;top:0;right:0;align-items:center;gap:var(--spacing-4, 4px);flex-wrap:wrap;} .wrap-reviewst {margin:var(--spacing-16, 16px) 0 0 0;float:none;} .wrap-reviewst > span {display:inline-block;font-size:var(--fs-13);line-height:var(--lh-18, 18px);letter-spacing:0;} .wrap-reviewst > strong {font-size:var(--fs-20, 20px);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-04, -0.4px);} .wrap-reviewst > strong + span { margin-top:0; } .wrap_manager_review .box_gray {margin:0 -183px 20px 0;padding:var(--spacing-12, 12px) var(--spacing-16, 16px);} /* MO: margin-top은 JS로 .wrap-reviewimg 하단 -24px에 맞춤 (li 개수 가변) */ .wrap_manager_review .box_gray.review-manager-normal, .wrap_manager_review .box_gray.review-manager-gold { position:relative; z-index:2; } .btn-story {width:auto;margin:40px 0px 16px;padding:0;gap:var(--spacing-8, 8px);} .btn-story .btn { height:var(--h48, 48px);font-size:var(--fs-16, 16px);line-height:var(--lh-22, 22px);letter-spacing:var(--ls-02, -0.2px); } .wrap_manager_review {margin:40px auto 0;} .wrap_manager_review_inner {position:relative;padding:0 183px 0 0;min-height:calc(44px + 240px);box-sizing:content-box;} .wrap_manager_review_txt {margin-top:30px;} .wrap_manager_review .list-bullet > li { font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px);letter-spacing:0;color:var(--color-set-text-secondary, #40403F); } .wrap_manager_review .list-bullet > li:before { top:8px; } .wrap_manager_review .list-bullet > li + li { margin-top:0; } .wrap-reviewimg {position:absolute;right:12px;top:44px;/*bottom:96px;*/width:171px;height:240px;} .wrap-reviewimg > img {max-width:100%;height:100%;object-fit:cover;} .wrap-review .wrap-reviewSt { margin-bottom: 16px; } .wrap-reviewSt { margin-bottom:16px; } .wrap_manager_best {margin-top:40px;} .wrap_manager_best > ul {grid-template-columns: repeat(2, 1fr);gap:38px 12px;} /* .wrap_manager_best > ul > li {margin-bottom:38px;} */ .wrap_manager_best > ul:first-child { margin-bottom:38px; display:flex;flex-wrap:wrap; } .wrap_manager_best > ul:first-child > li { flex:1 1 calc(50% - 6px); } .wrap_manager_best > ul:first-child > li:first-child:nth-last-child(3) { flex:1 1 100%; } .wrap_manager_best > ul:first-child > li:first-child {grid-column:1/span 2;} .wrap_manager_best > ul { margin-bottom:38px; } .wrap_manager_best > ul:last-child { margin-bottom:0; } .wrap_manager_best > ul > li { overflow:visible;padding-top:0; } .manager_best_box > span { width:125px;z-index:1; } .bestshop-intro-kv.type-2 {margin:0 -20px;} .video-wrap {margin:0 -20px;height:185px;width:100%;} .video-wrap .kv-video {width:100%;height:100%;object-fit:cover;} .pop-wrap .video-wrap { margin:0; } #space-bg {border-radius:0;height:185px;} .bestshop-intro-kv.type-2 .video-controller {width:21px;height:21px;} /* 베스트샵 소개 - 브랜드 소개 */ .scroll-event .content { padding-bottom:0; } .scroll-event-content .section > h4 { font-size:var(--fs-22, 22px);font-weight:var(--fw--700, 700);line-height:var(--lh-30, 30px);letter-spacing:var(--ls-05, -0.5px); } .scroll-event-content .section > p { margin-top:19px;font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);letter-spacing:0; } .scroll-event-content .section.intro-1 { margin-top:0;padding-top:0; } .scroll-event-content .section.intro-1 .mo-line.active:after { height:100%; } .scroll-event-content .section.intro-1 .scrollmagic-pin-spacer { position:static !important;padding:0 !important;min-height:0 !important;height:auto !important; } .scroll-event-content .section.intro-1 .brand-copy-wrap, .scroll-event-content .section.intro-1 .brand-copy-over { position:static !important;padding:31px 0 35px; } .scroll-event-content .section.intro-1 .brand-copy-base > div, .scroll-event-content .section.intro-1 .brand-copy-over > div { display:block;font-size:var(--fs-20, 20px);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-04, -0.4px);text-align:center; } .scroll-event-content .section.intro-1 .brand-copy-base > div p, .scroll-event-content .section.intro-1 .brand-copy-over > div p { display:flex;max-width:none !important;justify-content:center !important; } .scroll-event-content .section.intro-1 .brand-copy-base > div .point, .scroll-event-content .section.intro-1 .brand-copy-over > div .point { -webkit-text-stroke-width:0.6px; } .scroll-event-content .section.intro-1 .brand-copy-base > div + div, .scroll-event-content .section.intro-1 .brand-copy-over > div + div { margin-top:44px; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line { display:block;position:static;height:38px;padding:var(--spacing-4, 4px) 0; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line:after { content:'';display:block;margin:0 auto;width:2px;height:0;background-color:var(--color-set-line-gray900, #111);transition:all 0.2s ease; } .scroll-event-content .section.intro-1 .brand-copy-base > div span.mo-line.active:after, .scroll-event-content .section.intro-1 .brand-copy-over > div span.mo-line.active:after { content:'';width:2px;height:100%; } .scroll-event-content .section.intro-1 .brand-copy-over { display:none; } /* .scroll-event-content .section.intro-1 .img-wrap { padding-bottom:75.13%; } .scroll-event-content .section.intro-1 .img-wrap img { position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%, -50%); } */ .scroll-event-content .section.intro-2 { padding-top:80px; } .scroll-event-content .section.intro-2:before { /*bottom:221px;*/bottom:40.851%; } .scroll-event-content .section.intro-2 .img { position:relative;overflow:hidden;width:100%;padding-bottom:91.43%;/*height:320px;*/margin:var(--spacing-32, 32px) auto 0;border-radius:var(--border-radius-16, 16px); } .scroll-event-content .section.intro-2 .img img { position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%, -50%); } .scroll-event-content .section.intro-3 { margin-top:130px; } .scroll-event-content .grid .grid-item { margin-bottom:var(--spacing-12, 12px);width:100%;max-width:calc(50% - 8px);/*height:200px;*/height:auto;padding-bottom:57.143%; } .scroll-event-content .grid .grid-item img { position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform:translate(-50%, -50%);border-radius:var(--border-radius-24, 24px); } .scroll-event-content .grid .grid-item.grid-item--height2 { /*height:260px;*/height:auto;padding-bottom:74.29%; } .scroll-event-content .grid .grid-item.grid-item--height3 { /*height:360px;*/height:auto;padding-bottom:102.86%; } .scroll-event-content .grid .grid-item.empty1 { height:auto;padding-bottom:11.43%; } .scroll-event-content .grid .grid-item.empty2, .scroll-event-content .grid .grid-item.empty3, .scroll-event-content .grid .grid-item.empty4, .scroll-event-content .grid .grid-item.empty5, .scroll-event-content .grid .grid-item.empty6 { display:none; } .scroll-event-content .grid .grid-item.item02, .scroll-event-content .grid .grid-item.item06, .scroll-event-content .grid .grid-item.item08, .scroll-event-content .grid .grid-item.item10, .scroll-event-content .grid .grid-item.item12, .scroll-event-content .grid .grid-item.item14 { display:none; } .review-manager-normal {backdrop-filter:blur(20px);background:rgba(205, 218, 230, 0.70);} .review-manager-gold {backdrop-filter: blur(12px);background: rgba(205, 191, 167, 0.80);} .review-manager-normal .list-bullet, .review-manager-gold .list-bullet { /*height:96px;*/height:auto; } .review-manager-normal .list-bullet > li, .review-manager-gold .list-bullet > li { gap:0; } .review-manager-normal .list-bullet > li:before, .review-manager-gold .list-bullet > li:before { width:24px;height:24px;background-size:100%; } /* 베스트샵 소개 - 브랜드 소개 0729 ver */ .brand-new-intro .visual-area { padding-bottom:97.43%;height:auto; } .brand-new-intro .visual-area img { object-fit:cover; } .brand-new-intro .flag { font-size:var(--fs-14, 14px);letter-spacing:4.2px; } .brand-new-intro .tit { font-size:var(--fs-28, 28px);line-height:var(--lh-36, 36px);font-weight:300;letter-spacing:-0.84px; } .brand-new-intro .tit strong { display:block;font-size:var(--fs-32, 32px);line-height:var(--lh-42, 42px);letter-spacing:-0.96px; } .brand-new-intro .desc { margin-top:var(--spacing-10, 10px);font-size:var(--fs-20, 20px);line-height:var(--lh-30, 30px);letter-spacing:var(--ls-02, -0.2px); } .brand-new-intro .img { margin:40px calc(var(--spacing-20, 20px) * -1) 0;width:auto;border-radius:0; } .brand-new-intro .img.img-type01 { padding-bottom:70.86%; } .brand-new-intro .img.img-type03 { padding-bottom:71.43%; } .brand-new-intro .img.img-type04 { padding-bottom:59.147%; } .brand-new-intro .img-wrap { margin-top:30px; } .brand-new-intro .img-wrap > div { margin-left:8.975%;padding-bottom:42.568%; } .brand-new-intro .img-wrap > div + div { margin-top:var(--spacing-30, 30px); } .brand-new-intro .img-wrap > div:first-child { margin-left:0;margin-right:8.975%; } .brand-new-intro .img-marquee { margin-top:var(--spacing-40, 40px); } .brand-new-intro .img-marquee > div { padding:39px 0; } .brand-new-intro .img-marquee > div + div { display:block; } .brand-new-intro .title-area { padding:90px 0 95px; } .brand-new-intro .section .article { padding:50px 0 85px; } .brand-new-intro .section .article + .article { margin-top:0; } .brand-new-intro .section .article.compact01 { padding-bottom:85px; } .brand-new-intro .section .article.compact02 { padding-top:30px;padding-bottom:30px; } .esg-list ul > li + li { margin-top:var(--spacing-40, 40px); } .esg-list ul > li img { max-width:295px; } .esg-list ul > li strong { margin-top:var(--spacing-16, 16px); } .esg-list ul > li p { font-size:var(--fs-18, 18px);line-height:23px;letter-spacing:-0.18px; } .brand-new-intro .brand-logo { margin-top:0;padding:31px 0 45px;padding-bottom:100px;min-height:84px; } /* 베스트샵 소개 - 구매절차 */ .procedure-wrap { padding-top:24px; } .procedure-wrap > ol > li { padding-left:36px;padding-bottom:36px; } .procedure-wrap > ol > li:before { min-width:28px;height:28px;font-size:var(--fs-18, 18px);line-height:var(--lh-24, 24px);letter-spacing:var(--ls-03, -0.3px);} .procedure-wrap > ol > li:after { left:13px;height:calc(100% - 16px); } .procedure-wrap > ol > li:last-child { padding-bottom:0; } .procedure-wrap .procedure-item { flex:1 1 100%; } .procedure-wrap .procedure-item .tit { padding-left:0;font-size:var(--fs-20, 20px);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-04, -0.4px);margin-bottom:var(--spacing-4, 4px); } .procedure-wrap .procedure-item p { font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px); } .procedure-wrap .procedure-content { flex:1 1 100%; } .procedure-wrap .procedure-content ul { gap:var(--spacing-12, 12px);gap:0; } .procedure-wrap .procedure-content ul:after { content:'';display:block;flex:1 1 calc(50% - 6px);min-width:244px; } .procedure-wrap .procedure-content ul li { padding:var(--spacing-12, 12px) 0 0;flex:1 1 calc(50% - 6px);min-width:244px;max-width:none; } .procedure-wrap .procedure-content ul li a { padding:calc(var(--spacing-12, 12px) - 1px);border-radius:var(--border-radius-16, 16px); } .procedure-wrap .procedure-content ul li a strong { font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);letter-spacing:0; } .procedure-wrap .procedure-content ul li a p { margin-top:var(--spacing-8, 8px);font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px); } .procedure-wrap .procedure-content ul li a span { font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px); } .procedure-wrap .procedure-content ul li:first-child { padding-top:0; } .wrap-review > ul {display:flex;flex-direction:column;} #space-bg .curtain.left { transform: translateX(-26%); display: none; } #space-bg .curtain.right { transform: translateX(26%); display: none; } #space-bg .curtain.anime.left { animation-duration: 1.3s; } #space-bg .curtain.anime.right { animation-duration: 1.3s; } @keyframes curtainLeft { 0% { transform: translateX(-26%); } 100% { transform: translateX(-80%); } } @keyframes curtainRight { 0% { transform: translateX(26%); } 100% { transform: translateX(80%); } } .bestshop-best-manager .bestshop-intro-kv.type-2 .video-wrap .kv-video { top: 0; transform: translateY(0%); } } @media screen and (max-width:359px) { .review-manager-normal .list-bullet, .review-manager-gold .list-bullet { display:block;height:auto; } } /* ========================================================================== * 베스트샵 핫클립 — 공통 레이아웃 * ========================================================================== */ .story-hotclip-wrap .content {width:100%;max-width:100%;padding-bottom:0;margin:0 auto;} .story-hotclip-wrap .story-hotclip-content {background-color:var(--color-set-bg-white, #fff);} .story-hotclip-wrap .story-hotclip-inner {width:100%;max-width:1460px;margin:0 auto;padding:var(--spacing-40, 40px) var(--spacing-40, 40px) var(--spacing-80, 80px);box-sizing:border-box;} /* 상단 배너 */ .story-hotclip-wrap .banner-wrap {width:100%;height:300px;min-height:300px;background-color :var(--color-set-bg-gray25, #F3F5F7);padding: 0;} .story-hotclip-wrap .banner-wrap .banner-tit {display: flex;justify-content: center;align-items: center;text-align: center;height: 100%;font-size: var(--fs-32, 32px); font-weight: var(--fw--600, 600); line-height: var(--lh-44, 44px); letter-spacing: var(--ls-05, -0.5px);} .story-hotclip-wrap .banner-wrap img {width: 100%;height: 100%;max-width: none;object-fit: cover;object-position: center;vertical-align: top;} /* 탭 */ /* .story-hotclip-wrap .banner-wrap + .sub-tab-wrap {display:flex;justify-content:center;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .story-hotclip-wrap .banner-wrap + .sub-tab-wrap .tabs {padding:var(--spacing-32, 32px) 0;max-width:100%;} */ .story-hotclip-wrap .tab-sticky {display:flex;justify-content:center;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;} .story-hotclip-wrap .tab-sticky .tabs {padding:var(--spacing-40, 40px) 0;max-width:100%;} .story-hotclip-wrap .tab-sticky .tabs > li a {color: #111;} .story-hotclip-wrap .tab-sticky .tabs > li.on a {color: #fff;} /* 섹션 공통 */ .story-hotclip-wrap .section { position:relative; } .story-hotclip-wrap .section + .section {padding-top:var(--spacing-40, 40px);} .story-hotclip-wrap .section-title-wrap {display:inline-flex;overflow:hidden;width:100%;align-items:center;justify-content:space-between;padding: var(--spacing-8, 8px);margin: var(--spacing-16, 16px) 0;} .story-hotclip-wrap .section-title-wrap .text-btn { display:none; } .story-hotclip-wrap .section-title {margin:0;font-size:var(--fs-28, 28px);font-weight:var(--fw--700, 700);line-height:var(--lh-38, 38px);letter-spacing:var(--ls-05, -0.5px);color:var(--color-set-text-primary, #111);} .story-hotclip-wrap .link-more {display:inline-flex;align-items:center;gap:var(--spacing-4, 4px);font-size:var(--fs-14, 14px);font-weight:var(--fw--500, 500);line-height:var(--lh-20, 20px);color:var(--color-set-text-secondary, #40403F);text-decoration:none;white-space:nowrap;} .story-hotclip-wrap .link-more::after {content:'';display:block;width:12px;height:12px;/*background:url(/kr/bestshop/images/renewal/icon/arrow_right_12x12.svg) no-repeat center center / 12px 12px;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNC41IDkgMy0zLTMtMyIgc3Ryb2tlPSIjMTExIiBzdHJva2UtbGluZWNhcD0ic3F1YXJlIi8+PC9zdmc+) no-repeat center center / 12px 12px;} .story-hotclip-wrap .text-btn.gray.arrow:after {filter: unset;} .story-hotclip-wrap .section > .text-btn { position:absolute;right:8px;top:35px; } .story-hotclip-wrap .section + .section > .text-btn { top:75px; } /* 최신 동영상 — PC: video max 918×517 · 컨테이너 비율 축소 · desc만 스크롤 */ .story-hotclip-wrap .hotclip-latest-body {container-type:inline-size;display:flex;margin-top:var(--spacing-8, 8px);align-items:flex-start;gap:var(--spacing-40, 40px);--latest-video-w:min(918px, calc(918 / 1380 * 100%));} .story-hotclip-wrap .latest-video-link {display:block;position:relative;flex:0 1 auto;width:var(--latest-video-w);min-width:0;max-width:100%;aspect-ratio:918 / 517;text-decoration:none;} .story-hotclip-wrap .latest-video-link .clip-img.is-video {position:absolute;inset:0;padding-bottom:0;width:100%;height:100%;aspect-ratio:unset;} .story-hotclip-wrap .clip-img {display:block;overflow:hidden;position:relative;border-radius:var(--border-radius-16, 16px);background-color:var(--color-set-bg-gray25, #F3F5F7);} .story-hotclip-wrap .clip-img.is-video {padding-bottom:56.25%;} .story-hotclip-wrap .clip-img img {position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;} .story-hotclip-wrap .clip-img:before {content:'';position:absolute;left:0;top:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.20);z-index:1;} .story-hotclip-wrap .clip-img .btn-play {position:absolute;left:50%;top:50%;z-index:2;width:60px;height:60px;border-radius:50%;/*background:rgba(0, 0, 0, 0.5) url(/kr/bestshop/images/renewal/icon/live-play.svg) no-repeat center center / 60px 60px;*/background:rgba(0, 0, 0, 0.5) url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Zm9yZWlnbk9iamVjdCB4PSItNDAiIHk9Ii00MCIgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxNDAiPjxkaXYgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGh0bWwiIHN0eWxlPSJiYWNrZHJvcC1maWx0ZXI6Ymx1cigyMHB4KTtjbGlwLXBhdGg6dXJsKCNhKTtoZWlnaHQ6MTAwJTt3aWR0aDoxMDAlIi8+PC9mb3JlaWduT2JqZWN0PjxwYXRoIGRhdGEtZmlnbWEtYmctYmx1ci1yYWRpdXM9IjQwIiBkPSJNMCAzMEMwIDEzLjQzMiAxMy40MzIgMCAzMCAwYzE2LjU2OSAwIDMwIDEzLjQzMiAzMCAzMCAwIDE2LjU2OS0xMy40MzEgMzAtMzAgMzBDMTMuNDMyIDYwIDAgNDYuNTY5IDAgMzAiIGZpbGw9IiMwMDAiIGZpbGwtb3BhY2l0eT0iLjUiLz48cGF0aCBkPSJNMzguODc1IDI4LjM1NmEyIDIgMCAwIDEgMCAzLjI4OGwtMTAuNzM3IDcuNDMzYy0xLjMyNi45MTktMy4xMzgtLjAzLTMuMTM4LTEuNjQ0VjIyLjU2N2MwLTEuNjEzIDEuODEyLTIuNTYzIDMuMTM4LTEuNjQ0eiIgZmlsbD0iI2ZmZiIvPjxkZWZzPjxjbGlwUGF0aCBpZD0iYSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDAgNDApIj48cGF0aCBkPSJNMCAzMEMwIDEzLjQzMiAxMy40MzIgMCAzMCAwYzE2LjU2OSAwIDMwIDEzLjQzMiAzMCAzMCAwIDE2LjU2OS0xMy40MzEgMzAtMzAgMzBDMTMuNDMyIDYwIDAgNDYuNTY5IDAgMzAiLz48L2NsaXBQYXRoPjwvZGVmcz48L3N2Zz4=) no-repeat center center / 60px 60px;transform:translate(-50%, -50%);backdrop-filter:blur(20px);} .story-hotclip-wrap .latest-video-txt {display:flex;flex-direction:column;flex:1 1 0;min-width:0;max-height:calc(var(--latest-video-w) * 517 / 918);overflow:hidden;} .story-hotclip-wrap .latest-video-txt .tit {flex-shrink:0;display:-webkit-box;overflow:hidden;margin:0;font-size:var(--fs-28, 28px);font-weight:var(--fw--700, 700);line-height:var(--lh-38, 38px);letter-spacing:var(--ls-05, -0.5px);color:var(--color-set-text-primary, #111);white-space:normal;line-clamp: 2;-webkit-line-clamp: 2;-webkit-box-orient: vertical} .story-hotclip-wrap .latest-video-txt .desc {flex:1 1 auto;min-height:0;margin:var(--spacing-32, 32px) 0 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;font-size:var(--fs-20, 20px);font-weight:var(--fw--400, 400);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-04, -0.4px);color:var(--color-set-text-primary, #111);aspect-ratio: 422 / 408;} /* Shorts · 1분 퀵뷰 — 스와이퍼 (베스트샵핫클립_전체 · 라이브방송.html 베샵 핫클립 동일) */ .story-hotclip-wrap .live-hot-clip-swiper {position:relative;} .story-hotclip-wrap .live-hot-clip-list {margin:0;padding:0;list-style:none;} .story-hotclip-wrap .live-hot-clip-list a {display:block;text-decoration:none;} .story-hotclip-wrap .live-hot-clip-list .clip-img {padding-bottom:177.78%;} .story-hotclip-wrap .live-hot-clip-list .clip-tit {display:-webkit-box;overflow:hidden;margin-top:var(--spacing-16, 16px);font-size:var(--fs-18, 18px);font-weight:var(--fw--600, 600);line-height:var(--lh-24, 24px);color:var(--color-set-text-primary, #111);letter-spacing:var(--ls-03, -0.3px);line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;} .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-next, .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-prev {margin-top:-80px;} .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-next {right:-30px;} .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-prev {left:-30px;} /* 동영상 목록 — 가로형 그리드 (베스트샵핫클립_동영상 · PC 3단 · MO 1단) */ .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list {display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:var(--spacing-40, 40px) var(--spacing-24, 24px);margin:0;padding:0;list-style:none;} .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list a {display:block;text-decoration:none;} .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list .clip-img.is-video {padding-bottom:57%;} .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list .clip-tit {display:-webkit-box;overflow:hidden;margin-top:var(--spacing-16, 16px);font-size:var(--fs-18, 18px);font-weight:var(--fw--600, 600);line-height:var(--lh-24, 24px);letter-spacing:var(--ls-03, -0.3px);color:var(--color-set-text-primary, #111);line-clamp: 2;-webkit-line-clamp: 2;-webkit-box-orient: vertical;word-break: keep-all;} .story-hotclip-wrap.hotclip-video-page .hotclip-list-more {max-width:250px;margin:var(--spacing-40, 40px) auto 0;padding:0;} .story-hotclip-wrap.hotclip-video-page .btn-more-list {display:flex;width:100%;height:var(--h48, 48px);justify-content:center;align-items:center;gap:var(--spacing-4, 4px);} .story-hotclip-wrap.hotclip-video-page .btn-more-list::after {content:'';display:block;width:16px;height:16px;/*background:url(/kr/bestshop/images/renewal/icon/arrow_down_16x16.svg) no-repeat center center / 16px 16px;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAxMC41YS41LjUgMCAwIDAgLjM1My0uMTQ3bDQtNGEuNS41IDAgMCAwLS43MDctLjcwN0w4IDkuMjkzIDQuMzUzIDUuNjQ2YS41LjUgMCAxIDAtLjcwNy43MDdsNCA0IC4wNzcuMDYzQS41LjUgMCAwIDAgOCAxMC41IiBmaWxsPSIjMTExIi8+PC9zdmc+) no-repeat center center / 16px 16px;} /* Shorts 목록 — 세로형 그리드 (베스트샵핫클립_shorts · 스와이퍼 아님) */ .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list {display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:var(--spacing-40, 40px) var(--spacing-24, 24px);margin:0;padding:0;list-style:none;} .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list a {display:block;text-decoration:none;} .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list .clip-img {padding-bottom:177.78%;} .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list .clip-tit {display:-webkit-box;overflow:hidden;margin-top:var(--spacing-16, 16px);font-size:var(--fs-18, 18px);font-weight:var(--fw--600, 600);line-height:var(--lh-24, 24px);color:var(--color-set-text-primary, #111);line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;} .story-hotclip-wrap.hotclip-list-page .hotclip-list-more {max-width:250px;margin:var(--spacing-40, 40px) auto 0;padding:0;} .story-hotclip-wrap.hotclip-list-page .btn-more-list {display:flex;width:100%;height:var(--h48, 48px);justify-content:center;align-items:center;gap:var(--spacing-4, 4px);} .story-hotclip-wrap.hotclip-list-page .btn-more-list::after {content:'';display:block;width:16px;height:16px;/*background:url(/kr/bestshop/images/renewal/icon/arrow_down_16x16.svg) no-repeat center center / 16px 16px;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOCAxMC41YS41LjUgMCAwIDAgLjM1My0uMTQ3bDQtNGEuNS41IDAgMCAwLS43MDctLjcwN0w4IDkuMjkzIDQuMzUzIDUuNjQ2YS41LjUgMCAxIDAtLjcwNy43MDdsNCA0IC4wNzcuMDYzQS41LjUgMCAwIDAgOCAxMC41IiBmaWxsPSIjMTExIi8+PC9zdmc+) no-repeat center center / 16px 16px;} /* 섹션 더보기 (MO · 전체 탭) */ .story-hotclip-wrap .btn-more-section {display:flex;width:100%;height:var(--h48, 48px);justify-content:center;align-items:center;gap:var(--spacing-4, 4px);} .story-hotclip-wrap .btn-more-section::after {content:'';display:block;width:16px;height:16px;/*background:url(/kr/bestshop/images/renewal/icon/arrow_right_16x16.svg) no-repeat center center / 16px 16px;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNS45MiAxMy4xMzQtLjU4Ni0uNTQ3IDQuMDItNC4zNTMtNC4wMi00LjM2LjU4Ni0uNTQgNC41MiA0Ljl6IiBmaWxsPSIjMDAwIi8+PC9zdmc+) no-repeat center center / 16px 16px;} .story-hotclip-wrap .sub-tab-wrap .tabs > li a {white-space: nowrap;} @media screen and (max-width: 1230px) { .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list {grid-template-columns:repeat(4, 1fr);} /* 좁은 구간 prev/next가 영역 밖(-30px)으로 삐져나와 가로 스크롤 발생 → 숨김 */ /* .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-next, .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-prev {display:none;} */ } @media screen and (max-width: 1023px) { .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list {grid-template-columns:repeat(4, 1fr);} } @media screen and (max-width: 767px) { .story-hotclip-wrap .clip-img .btn-play {width: 48px;height: 48px;background-size: 48px 48px;} .story-hotclip-wrap .story-hotclip-inner {padding:0 var(--spacing-20, 20px) var(--spacing-40, 40px);} .story-hotclip-wrap .story-hotclip-inner:not(:has(.hotclip-latest)) {padding:var(--spacing-24, 24px) var(--spacing-20, 20px) var(--spacing-40, 40px);} .story-hotclip-wrap .banner-wrap {height: 185px; min-height:185px;} .story-hotclip-wrap .banner-wrap .banner-tit {justify-content:flex-start; align-items: center;text-align: left;height: 100%;font-size: var(--fs-18, 18px); font-weight: var(--fw--600, 600); line-height: var(--lh-24, 24px); letter-spacing: var(--ls-03, -0.3px);padding-left: var(--spacing-20);} .story-hotclip-wrap .banner-wrap + .sub-tab-wrap {justify-content:flex-start;padding:var(--spacing-16, 16px) var(--spacing-20, 20px);} .story-hotclip-wrap .banner-wrap + .sub-tab-wrap .tabs { width:auto;max-width:none;padding:var(--spacing-8, 8px) var(--spacing-20, 20px);} .story-hotclip-wrap .sub-tab-wrap .tabs {width:max-content;max-width:none;padding:0;white-space:nowrap;} .story-hotclip-wrap .latest-video-txt .desc {aspect-ratio: auto;} /* 탭*/ .story-hotclip-wrap .tab-sticky { grid-area: tabs;position: sticky;top: var(--h56, 56px);z-index: 6;width: 100%;min-width: 0;margin: 0;padding: 0;overflow: hidden;background-color: var(--color-set-bg-white, #fff); } .story-hotclip-wrap .tab-sticky .sub-tab-wrap {width: 100%;} .story-hotclip-wrap .tab-sticky .sub-tab-wrap .tabs {padding: 16px 20px; white-space: nowrap; margin: 8px 0; width: 100%;} /* MO 버튼 */ .story-hotclip-wrap .mo-only {display: block !important;padding-top: var(--spacing-32, 32px);} /* MO 배너 */ .story-hotclip-wrap .story-hotclip-hero {flex-direction:row;align-items:stretch;padding:var(--spacing-20, 20px);gap:var(--spacing-12, 12px);} .story-hotclip-wrap .story-hotclip-hero .hero-txt {flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;} .story-hotclip-wrap .story-hotclip-hero .hero-tit {font-size:var(--fs-20, 20px);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-03, -0.3px);} .story-hotclip-wrap .story-hotclip-hero .hero-desc {font-size:var(--fs-13, 13px);line-height:var(--lh-18, 18px);} .story-hotclip-wrap .story-hotclip-hero .hero-visual {flex:0 0 120px;border-radius:var(--border-radius-12, 12px);} .story-hotclip-wrap .section + .section {margin-top:0;padding-top: var(--spacing-40, 40px);} .story-hotclip-wrap .section-title {font-size:var(--fs-18, 18px);line-height:var(--lh-24, 24px);letter-spacing:var(--ls-03, -0.3px);} .story-hotclip-wrap .section-title-wrap {height: 40px;margin: var(--spacing-10, 10px) 0;padding: 0;} /* MO 최신 동영상 */ .story-hotclip-wrap .hotclip-latest-body {flex-direction:column;align-items:stretch;margin-top:0;gap:var(--spacing-12, 12px);--latest-video-w:100%;} .story-hotclip-wrap .latest-video-link {flex:none;width:100%;max-width:100%;aspect-ratio:unset;} .story-hotclip-wrap .latest-video-link .clip-img.is-video {position:relative;inset:auto;padding-bottom:56.25%;height:auto;width:100%;} .story-hotclip-wrap .latest-video-txt {flex:none;display:block;width:100%;max-height:none;overflow:visible;} .story-hotclip-wrap .latest-video-txt .tit {display:-webkit-box;overflow:hidden;font-size:var(--fs-20, 20px);font-weight:var(--fw--600, 600);line-height:var(--lh-28, 28px);letter-spacing:var(--ls-04, -0.4px);-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;} .story-hotclip-wrap .latest-video-txt .desc {flex:none;min-height:auto;max-height:260px;margin-top:var(--spacing-16, 16px);overflow:hidden;overflow-y:auto;font-size:var(--fs-14, 14px);line-height:var(--lh-20, 20px);} /* MO 스와이퍼 (전체 탭 Shorts · 1분 퀵뷰) */ .story-hotclip-wrap .live-hot-clip-swiper {margin:0 calc(var(--spacing-20, 20px) * -1);} .story-hotclip-wrap .live-hot-clip-swiper .swiper {padding:0 var(--spacing-20, 20px);} .story-hotclip-wrap .live-hot-clip-swiper .swiper-slide {width:140px;} .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-next, .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-prev { margin-top:-50px; } .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-next { right:8px; } .story-hotclip-wrap .live-hot-clip-swiper .swiper-button-prev { left:8px; } .story-hotclip-wrap .live-hot-clip-list .clip-tit {margin-top:var(--spacing-12, 12px);font-size:var(--fs-16, 16px);line-height:var(--lh-22, 22px);letter-spacing:var(--ls-02, -0.2px);} .story-hotclip-wrap .live-hot-clip-list .clip-img .btn-play {width:48px;height:48px;background-size:48px 48px;} /* MO 동영상 목록 — 1단 */ .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list {grid-template-columns:1fr;gap:var(--spacing-24, 24px);} .story-hotclip-wrap.hotclip-video-page .hot-clip-video-list .clip-tit {margin-top: var(--spacing-12, 12px);font-size: var(--fs-20, 20px);line-height: var(--lh-28, 28px);font-weight: var(--fw--600, 600);letter-spacing: var(--ls-04, -0.4px);word-break: break-all;} .story-hotclip-wrap.hotclip-video-page .hotclip-list-more {max-width:none;margin-top:var(--spacing-24, 24px);} /* MO Shorts 목록 그리드 — 2열 */ .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list {grid-template-columns:repeat(2, 1fr);gap:var(--spacing-24, 24px) var(--spacing-12, 12px);padding-bottom:var(--spacing-24, 24px);} .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list .clip-img .btn-play {width:48px;height:48px;background-size:48px 48px;} .story-hotclip-wrap.hotclip-list-page .hot-clip-grid-list .clip-tit {margin-top:var(--spacing-12, 12px);font-size:var(--fs-16, 16px);line-height:var(--lh-22, 22px);letter-spacing:var(--ls-02, -0.2px);word-break: break-all;} .story-hotclip-wrap.hotclip-list-page .hotclip-list-more {max-width:none;margin-top:var(--spacing-24, 24px);} } /* 1분 퀵뷰 상세 바텀시트 */ /* ============================================= 1분 퀵뷰 — 영상 풀스크린 팝업 + 인패널 해설 바텀시트 ============================================= */ /* --- 영상 팝업 풀스크린 --- */ #quickviewPopup.popup.video {height: 100%;min-height: 100% !important;max-height: 100% !important;max-width: 840px;padding: 0 ;border-radius: 0;background: #000;overflow: hidden;left: 50%;transform: translateX(-50%);} #quickviewPopup .pop-wrap {position: relative;height: 100%;background: #000;max-width: 100%;} #quickviewPopup .quickview-video-area {position: relative;height: 100%;} #quickviewPopup .video-wrap {display: flex;align-items: center;justify-content: center;height: 100%;} #quickviewPopup .video-wrap video {width: 100%;height: 100%;object-fit: contain;} /* 상단 툴바 — 해설 / 닫기 */ #quickviewPopup .quickview-toolbar {position: absolute;top: 0;right: 0;z-index: 2;display: flex;align-items: center;gap: 8px;padding: 16px;} #quickviewPopup .btn-open-caption {padding: 5px 16px;border: 1px solid #fff;border-radius: var(--border-radius-full, 1000px);background: rgba(0, 0, 0, 0.8);color: #fff;font-size: var(--fs-14, 14px);font-weight: var(--fw--500, 500);line-height: var(--lh-20, 20px);} #quickviewPopup .quickview-toolbar .btn-close { position:static;width: 32px;height: 32px;/*background: url(/kr/bestshop/images/renewal/icon/close_20x20.svg) no-repeat center center;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSA1IDEwIDEwbTAtMTBMNSAxNSIgc3Ryb2tlPSIjMTExIiBzdHJva2Utd2lkdGg9IjEuMiIvPjwvc3ZnPg==) no-repeat center center; filter: invert(1); background-size: 24px;} /* --- 인패널 해설 바텀시트 --- */ #quickviewPopup .quickview-caption-sheet {display: none;position: absolute;inset: 0;z-index: 3;} #quickviewPopup .quickview-caption-sheet.on {display: block;} #quickviewPopup .quickview-caption-dim {position: absolute;inset: 0;border: 0;padding: 0;background: rgba(0, 0, 0, 0.4);cursor: pointer;} #quickviewPopup .quickview-caption-sheet__panel {position: absolute;left: 0;bottom: 0;display: flex;flex-direction: column;width: 100%;max-height: 80vh;border-radius: var(--border-radius-16, 16px) var(--border-radius-16, 16px) 0 0;background: var(--color-set-bg-white, #fff);box-shadow: 0 -4px 28px rgba(0, 0, 0, 0.16);overflow: hidden;transform: translateY(100%);transition: transform 0.3s ease;} #quickviewPopup .quickview-caption-sheet.on .quickview-caption-sheet__panel {transform: translateY(0);} /* 헤더 — renewal bottom-sheet MO 패턴 */ #quickviewPopup .quickview-caption-sheet .popup-header {position: relative;flex-shrink: 0;display: flex;align-items: flex-start;min-height: var(--h56, 56px);margin-bottom: var(--spacing-10, 10px);padding: var(--spacing-12, 12px) var(--spacing-20, 20px);} #quickviewPopup .quickview-caption-sheet .popup-header::before {display:none;content: '';position: absolute;left: 50%;top: 16px;width: 40px;height: 4px;border-radius: var(--border-radius-full, 1000px);background:#8A8A89;transform: translateX(-50%);} #quickviewPopup .quickview-caption-sheet .popup-header .title {margin-top: 5px;padding-right: var(--spacing-32, 32px);font-size: var(--fs-16, 16px);font-weight: var(--fw--600, 600);line-height: var(--lh-22, 22px);letter-spacing: var(--ls-02, -0.2px);} #quickviewPopup .quickview-caption-sheet .popup-header .btn-close {position: absolute;top:var(--spacing-12, 12px);right: var(--spacing-20, 20px);margin: 0;width: 32px;height: 32px;/*background: url(/kr/bestshop/images/renewal/icon/close_20x20.svg) no-repeat center center;*/background:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJtNSA1IDEwIDEwbTAtMTBMNSAxNSIgc3Ryb2tlPSIjMTExIiBzdHJva2Utd2lkdGg9IjEuMiIvPjwvc3ZnPg==) no-repeat center center;} /* 본문 */ #quickviewPopup .quickview-caption-sheet .popup-container {flex: 1;min-height: 0;overflow-y: auto;padding: 0 var(--spacing-20, 20px) var(--spacing-28, 28px);} #quickviewPopup .quick-view-wrap {display: block;padding: var(--spacing-8, 8px) var(--spacing-12, 12px);border: 1px solid var(--color-set-text-primary, #111);border-radius: var(--border-radius-12, 12px);} #quickviewPopup .quick-view-wrap .txt {display: block;width: 100%;min-height: 120px;max-height: 40vh;padding: 0;border: 0;background: transparent;resize: none;overflow-y: auto;color: var(--color-set-text-primary, #111);font-size: var(--fs-14, 14px);font-weight: var(--fw--400, 400);line-height: var(--lh-20, 20px);} @media screen and (max-width: 767px) { #quickviewPopup.popup.video {width: 100vw;max-width: 100%;padding: 0;} #quickviewPopup .quickview-toolbar {padding: 12px;} #quickviewPopup .btn-open-caption {padding: 3px 12px 4px;font-size: var(--fs-12, 12px);line-height: 17px;} #quickviewPopup .quickview-caption-sheet .popup-header { padding: var(--spacing-28, 28px) var(--spacing-20, 20px) var(--spacing-12, 12px); } #quickviewPopup .quickview-caption-sheet .popup-header::before { display:block; } #quickviewPopup .quickview-caption-sheet .popup-header .btn-close {top: var(--spacing-28, 28px);} } /* 스토리 탭 영향 magin, padding 수정 */ .tab-sticky + .content:has(>.story-content) .story-content {margin:40px auto 0;} @media screen and (max-width: 767px) { .tab-sticky + .content:has(>.story-content) .story-content {margin:0;} }