@charset "EUC-KR";
/* °øÅë */
:root {
    --inner-width: 100%;
    --live-bg1 : #A7ABDA;
    --live-gra1: linear-gradient(180deg, #A7ABDA 0%, rgba(255, 255, 255, 0.90) 20%, rgba(241, 241, 249, 0.00) 40%);
    --live-bg2: #9DF6F6;
    --live-gra2: linear-gradient(180deg, #9DF6F6 0%, rgba(255, 255, 255, 0.90) 20%, rgba(231, 253, 253, 0.00) 40%);
    --spoqa-R: 'spoqa R';
    --spoqa-M: 'spoqa M';
    --spoqa-weight: normal;
}

/* pc¿¡¼­¸¸ ¾²ÀÌ´Â css */
.right_fix_menu {display: none;}
header {min-width: 1204px;}
header .nav_row .nav_menu {flex-shrink: 0;}

/* ÆäÀÌÁö css */
.wrapper, .contents, .live-showroom {width: 100%;}
.live-showroom {display: flex; flex-direction: column;}
.live-showroom *  {box-sizing: border-box; line-height: 1.5;}
.live-showroom h2, .live-showroom h3 {font-weight: normal;}

.live-showroom section {width: 100%; padding: 40px 0;}
.live-showroom section .inner {width:100%; max-width: var(--inner-width); margin: 0 auto; padding: 0 16px; height: 100%;}
.live-showroom .section-tit {margin-bottom: 20px; font-size: 20px; font-family: 'noto-B'; color: var(--co1A);}
.eye_open_FF {display: block; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_eye_open_24.svg") center / contain no-repeat;}
.prod-area :where(.total,.original,.discount) {letter-spacing: -0.6px;}
 
/* KV */
.live-showroom section.sc-intro {height: 120px; padding-bottom: 0;}
.sc-intro .title-wrap {display: flex; justify-content: center; align-items: center; padding-top: 2px;}
.sc-intro .title {position: relative;}
.sc-intro .title>img {width: 320px;}
.sc-intro .title::after {content: ''; position: absolute; left: 91px; top: 19px; display: block; width: 19px; height: 14px; background: url("//image5.compuzone.co.kr/img/images/compuzone_live/title-front.png") center / contain no-repeat;}
.sc-intro .tit-label {position: absolute; left: 103px; top: 17px; width: 92px; height: 39px; animation: label 2s ease-in-out infinite; transform-origin: left top;}
.sc-intro .tit-label>img {width: 100%; height: 100%;}

@keyframes label {
    0%, 100% {transform: rotate(0);}
    50% {transform: rotate(2deg);}
}

/* ÁøÇà ¿¹Á¤ ¶óÀ̺ê */
.live-showroom section.sc-upcoming {padding-top: 0;}
.upcoming-live {display: flex; flex-direction: column; gap: 12px;}
.upcoming-live>li {width: 100%;}
.upcoming-live .live-item {display: block; position: relative; width: 100%; height: 520px; border-radius: 10px; overflow: hidden;}

.upcoming-live .thumb-area {position: absolute; width: 100%; height: 100%;}
.upcoming-live .thumb-area>img {display: block; width: 100%; height: 100%; mix-blend-mode: luminosity; object-fit: cover;}
.upcoming-live .thumb-area::before, .upcoming-live .thumb-area::after {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.upcoming-live>li:nth-child(1) .thumb-area::before {background: var(--live-bg1);}
.upcoming-live>li:nth-child(1) .thumb-area::after {background: var(--live-gra1);}
.upcoming-live>li:nth-child(2) .thumb-area::before {background: var(--live-bg2);}
.upcoming-live>li:nth-child(2) .thumb-area::after {background: var(--live-gra2);}

.upcoming-live .text-area {position: relative; padding: 20px 16px 16px 16px; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center;}
.upcoming-live .date {font-family: 'noto-B'; font-size: 18px; color: var(--co1A);}
.upcoming-live .date br {display: none;}
.upcoming-live .live-title {display: flex; flex-direction: column; gap: 4px;}
.upcoming-live .live-title h3 {font-family: 'noto-M'; font-size: 16px; text-align: center;}
.upcoming-live .tag-wrap {display: flex; justify-content: center; gap: 8px; margin-top: 12px;}
.upcoming-live .tag-wrap > span {font-family: 'noto-M'; font-size: 14px; color: var(--co1C);}
.upcoming-live .prod-area {margin-top: auto;}
.upcoming-live .prod-box {display: flex; padding: 8px 12px; align-items: center; gap: 8px; width: 100%; background: var(--coFF); border-radius: 10px; overflow: hidden;}
.upcoming-live .prod-area .img-box {width: 60px; height: 60px; border-radius: 10px; background: var(--coF9); flex-shrink: 0;}
.upcoming-live .prod-area .img-box>img {width: 100%; height: 100%; mix-blend-mode: darken;}
.upcoming-live .prod-area .txt-box {display: flex; flex-direction: column; gap: 4px;}
.upcoming-live .prod-area .name {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; height: 42px; font-family: 'noto-R'; font-size: 14px;}
.upcoming-live .prod-area .price-wrap {display: flex; align-items: center; gap: 4px;}
.upcoming-live .prod-area .discount {display: block; font-family: var(--spoqa-M); font-weight: var(--spoqa-weight); font-size: 18px; word-break: keep-all;} 
.upcoming-live .prod-area .original {padding-left: 8px; font-family: var(--spoqa-R); font-size: 14px; text-decoration: line-through; word-break: keep-all;} 
.upcoming-live .prod-area .total {font-family: var(--spoqa-M); font-weight: var(--spoqa-weight); font-size: 18px; word-break: keep-all;}

.live-showroom .no-contents {width: 100%; height: 260px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 8px;}
.live-showroom .no-contents::before {content: ''; width: 48px; height: 48px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/D8D8D8/icon_line_exclamation_mark_circle_48.svg") center / contain no-repeat;}
.live-showroom .no-contents p {font-family: 'noto-R'; font-size: 14px;}

/* º£½ºÆ® ¶óÀ̺ê */
.sc-best {background: linear-gradient(90deg, #FFF 0%, #C1E1FA 50%, #FFF 100%);}
.live-showroom section.sc-best .inner {padding-right: 0;}
.best-live .swiper-slide {width: 140px;}
.best-live .swiper-slide:last-child {margin-right: 0 !important;}
.best-live .live-item {display: flex; flex-direction: column; gap: 8px;}
.best-live .thumb-box {position: relative; width: 100%; height: 210px; border-radius: 10px; overflow: hidden;}
.best-live .top-area {position: absolute; z-index: 1; width: 100%; height: 32px; display: flex; justify-content: space-between; align-items: flex-end; padding-right: 16px;}
.best-live .live-num {width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; color: var(--coFF); background: var(--co1C); border-radius: 2px; overflow: hidden; font-family: var(--spoqa-R); font-size: 14px;}
.best-live .live-time {margin-left: auto; padding: 12px 0 2px; font-family: var(--spoqa-R); font-size: 12px; color: var(--coFF); letter-spacing: -0.5px;}
.best-live .thumb-area {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.best-live .thumb-area>img {width: 100%; height: 100%; object-fit: cover;}
.best-live .thumb-area::before {content: ''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.2);}
.best-live .live-title {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; height: 42px; font-family: 'noto-R'; font-size: 14px; color: var(--co1A);}
.best-live .swiper-container {padding-right: 16px;}
.best-live .swiper-pagination-progressbar.swiper-pagination-horizontal {width: calc(100% - 16px); height: 2px; position: relative; margin-top: 32px; background: var(--coD8);}
.best-live .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {border-radius: 6px; background: var(--co1A);}

/* ¶óÀÌºê ´Ù½Ãº¸±â */
.live-showroom section.sc-replay .inner {padding-right: 0;}
.live-replay {display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 12px; margin-top: 12px; padding-right: 16px;}
.live-replay .live-item {display: flex; flex-direction: column; gap: 8px;}
.live-replay .thumb-box {position: relative; width: 100%; aspect-ratio: 158 / 236; border-radius: 10px; overflow: hidden;}
.live-replay .img-area {position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
.live-replay .img-area>img {width: 100%; height: 100%; object-fit: cover;}
.live-replay .top-area {position: absolute; z-index: 1; left: 0; top: 12px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
.live-replay .live-view {display: flex; align-items: center; gap: 4px; color: var(--coFF); font-family: var(--spoqa-R); font-size: 14px;}
.live-replay .live-time {margin-left: auto; font-family: var(--spoqa-R); font-size: 14px; color: var(--coFF); letter-spacing: -0.5px;}
.live-replay .prod-area {position: absolute; left: 0; bottom: 0; display: flex; justify-content: space-between; gap: 4px; width: 100%; padding: 8px; background: rgba(0,0,0,0.4); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);}
.live-replay .prod-area .img-box {width: 40px; height: 40px; border-radius: 5px; overflow: hidden; flex-shrink: 0;}
.live-replay .prod-area .img-box>img {width: 100%; height: 100%;}
.live-replay .prod-area .txt-box {display: flex; flex-direction: column; justify-content: center;}
.live-replay .prod-area .name {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; font-family: 'noto-R'; font-size: 12px;}
.live-replay .prod-area .price-wrap {display: flex; gap: 4px;}
.live-replay .prod-area .discount {font-size: 12px; font-family: var(--spoqa-M); font-weight: var(--spoqa-weight);}
.live-replay .prod-area .total {font-size: 12px; font-family: var(--spoqa-M); font-weight: var(--spoqa-weight); word-break: keep-all;}
.live-replay .live-title {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; height: 42px; font-family: 'noto-R'; font-size: 14px; color: var(--co1A);}
.chipbtn ul {gap: 0;}
.chipbtn ul li {width: fit-content;}
.chipbtn ul li a {width: max-content; height: 32px; padding: 0 12px; font-size: 12px; background: var(--coE8); color: var(--co94); border-color: var(--coE8); line-height: normal;}


@media screen and (min-width: 360px) {
    .live-replay .prod-area {gap: 12px;}
}

@media screen and (min-width: 782px) {
    .live-showroom section.sc-intro {height: 140px;}
    .sc-intro .title-wrap {padding-top: 8px;}
    .sc-intro .title>img {width: 384px;}
    .sc-intro .title::after {left: 111px; top: 23px;}
    .sc-intro .tit-label {width: 109px; height: 45px; left: 121px; top: 20px;}

    .upcoming-live {display: grid; grid-template-columns: repeat(2, 1fr);}
    .upcoming-live>li:has(.no-contents) {grid-column: span 2; max-width: 100%;}

    .best-live .swiper-slide {width: 160px;}
    .best-live .swiper-pagination-progressbar {background: var(--coFF);}
    .best-live .thumb-box {height: 240px;}

    .live-replay {grid-template-columns: repeat(3, minmax(242px, 1fr)); margin-top: 20px;}
    .chipbtn ul li a {height: 40px; font-size: 14px;}
}

@media screen and (min-width: 1024px) {
    .live-showroom section {padding: 80px 0;}
    .live-showroom section .inner {--inner-width: 1204px; padding: 0 40px;}
    .live-showroom .section-tit {margin-bottom: 30px; font-size: 28px;}

    .live-showroom section.sc-intro {height: 200px;}
    .sc-intro .title-wrap {padding-top: 5px;}
    .sc-intro .title>img {width: 448px;}
    .sc-intro .title::after {left: 128px; top: 27px; width: 24px;}
    .sc-intro .tit-label {width: 127px; height: 53px; left: 143px; top: 23px;}

    .upcoming-live {grid-template-columns: 1fr; gap: 20px; --live-gra1: linear-gradient(90deg, #FFF 0%, #F1F1F9 30%, #A7ABDA 100%); --live-gra2: linear-gradient(90deg, #FFF 0%, #E7FDFD 30%, #9DF6F6 100%);}
    .upcoming-live>li:has(.no-contents) {grid-column: auto;}
    .upcoming-live .live-item {display: flex; height: 280px;}
    .upcoming-live .thumb-area {position: relative; width: 200px; border-radius: 10px; overflow: hidden;}
    .upcoming-live .thumb-area>picture>img {object-position: 0 100%;}
    .upcoming-live .text-area {position: absolute; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: repeat(2, 1fr); grid-column-gap: 20px; padding: 0 36px 0 0;}
    .upcoming-live .date {grid-area: 1 / 1 / 3; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--coFF); font-size: 24px;}
    .upcoming-live .date br {display: block;}
    .upcoming-live .live-title {align-items: flex-start; padding: 48px 0 16px;}
    .upcoming-live .tag-wrap {margin-top: 8px;}
    .upcoming-live .prod-area {margin-top: 0; padding: 16px 0 48px; border-top: 1px solid var(--coFF);}
    .upcoming-live .prod-box {background: transparent; gap: 16px; padding: 0;}
    .upcoming-live .prod-area .img-box {width: 90px; height: 90px;}
    .upcoming-live .prod-area .txt-box {gap: 8px;}
    .upcoming-live>li:nth-child(1) .thumb-area::after, .upcoming-live>li:nth-child(2) .thumb-area::after {background: rgba(0,0,0,0.5)}
    .upcoming-live>li:nth-child(1) .live-item {background: var(--live-gra1);}
    .upcoming-live>li:nth-child(2) .live-item {background: var(--live-gra2);}
    
    .live-showroom .no-contents::before {width: 60px; height: 60px;}
    .live-showroom .no-contents p {font-style: 16px;}

    .live-showroom section.sc-best .inner {padding-right: 16px;}
    .best-live .swiper-container {padding-right: 0;}
    .best-live ul {display: grid; grid-template-columns: repeat(5, minmax(173px, 225px)); gap: 20px;}
    .best-live .swiper-slide {width: 100%;}
    .best-live .live-item {gap: 12px;}
    .best-live .thumb-box {height: auto; aspect-ratio: 93 / 139;}
    .best-live .live-time {font-size: 14px; padding-bottom: 0;}
    .best-live .live-title {height: 47px; font-size: 16px;}
    .best-live .swiper-pagination-progressbar {display: none;}

    .live-replay {grid-template-columns: repeat(4, minmax(221px, 1fr)); gap: 20px; margin-top: 20px;}
    .live-replay .live-item {gap: 12px;}
    .live-replay .top-area {top: 12px; padding: 0 16px;}
    .live-replay .prod-area {padding: 12px;}
    .live-replay .prod-area .img-box {width: 52px; height: 52px;}
    .live-replay .prod-area .name {font-size: 13px;}
    .live-replay .prod-area .txt-box {gap: 4px;}
    .live-replay .prod-area .price-wrap {gap: 12px;}
    .live-replay .prod-area .total, .live-replay .prod-area .discount {font-size: 14px;}
    .live-replay .live-title {height: 47px; font-size: 16px;}

    .chipbtn ul li a {padding: 0 16px; transition: all 0.2s;}
    .chipbtn ul li a:hover {background-color: var(--co1A); color: var(--coFF);}
    .eye_open_FF {width: 20px; height: 20px;}
}

@media screen and (min-width: 1280px) {
    .live-showroom section .inner {padding: 0;}

    .live-showroom section.sc-best .inner {padding-right: 0;}

    .upcoming-live {grid-template-columns: repeat(2, 1fr);}
    .upcoming-live>li:has(.no-contents) {grid-column: span 2;}
    .upcoming-live>li:only-child {grid-column: span 2;}
    .upcoming-live>li:only-child .live-title {padding-top: 48px;}
    .upcoming-live>li:only-child .prod-area {padding-bottom: 48px;}
    .upcoming-live>li:only-child .text-area {max-width: 100%;}
    .upcoming-live .live-title {align-items: flex-start; padding: 36px 0 16px;}
    .upcoming-live .live-title h3 {text-align: left;}
    .upcoming-live .text-area {max-width: 686px; padding: 0 24px 0 0;}
    .upcoming-live .prod-area {max-width: 686px; padding: 16px 0 36px;}
    .upcoming-live .prod-area .original {padding-left: 12px;}

    .live-replay {padding-right: 0;}
}