/* 공통 사용 css */
:root {
    --inner-width: 1204px;
    --point-bg : #120626;
}

a:visited {color: inherit;}

/* flex */
.flex {display: flex;}
.justify-center {justify-content: center;}
.space-between {justify-content: space-between;}
.align-center {align-items: center;}
.flex-col {display: flex; flex-direction: column;}

/* grid */
.grid {display: grid;}
.col2 {grid-template-columns: repeat(2, 1fr);}
.col3 {grid-template-columns: repeat(3, 1fr);}
.col4 {grid-template-columns: repeat(4, 1fr);}

/* gap - spacing */
.gap4 {gap: 4px;}
.gap8 {gap: 8px;}
.gap10 {gap: 10px;}
.gap12 {gap: 12px;}
.gap16 {gap: 16px;}
.gap20 {gap: 20px;}

/* 텍스트 관련 */
.ellipsis {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1; word-break: break-all;}
.ellipsis.line2 {-webkit-line-clamp: 2;}
.ellipsis.line3 {-webkit-line-clamp: 3;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.del {text-decoration: line-through;}

/* 뱃지 관련 */
.my-recom .batF1 {background: var(--coFF);}

/* 그라데이션 박스 */
.my-recom .box {width: 100%; position: relative; border-radius: 10px;}
.my-recom .box::before { content: ''; position: absolute; inset: 0; border-radius: 10px; padding: 1px;  -webkit-mask:  linear-gradient(#fff 0 0) content-box,  linear-gradient(#fff 0 0); -webkit-mask-composite: xor;mask-composite: exclude; z-index: -1;}
.my-recom .box1 {padding: 24px; background: rgb(0, 0, 0,0.5); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);}
.my-recom .box1::before {background: linear-gradient(270deg, var(--co1C) 0%, var(--co84) 100%);}
.my-recom .box2 {height: 40px; background: var(--coFF); padding: 0 16px;}
.my-recom .box2::before {background: linear-gradient(90deg, var(--co1C) 0%, var(--co84) 100%); z-index: unset;}
.my-recom .box2 p {max-width: 480px;}

/* 아이콘 */
.c-icon24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/my_recom/icon1.png") center / contain no-repeat;}
.cate-search24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_category_search.svg") center / contain no-repeat;}
.search-chart24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_search_chart.svg") center / contain no-repeat;}
.monitor-chart24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_monitor_chart.svg") center / contain no-repeat;}
.hot24 {display: block; width: 24px; height: 24px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_badge_hot.svg") center / contain no-repeat;}

/* 컨텐츠 공통 */
header.scroll, .right_fix_menu, .top_fix_head {display: none;}
.wrapper {position: relative; min-width: var(--inner-width);}
.contents {position: relative; width: 100%; min-width: var(--inner-width);}
.my-recom * {letter-spacing: -0.4px; line-height: 1.5; box-sizing: border-box;}
.my-recom  {background: var(--point-bg);}
.my-recom .section {width: 100%; position: relative; overflow: hidden;}
.my-recom .section .inner {position: relative; width: var(--inner-width); margin: 0 auto; height: 100%; padding: 100px 0;}
.my-recom .section h3 {margin-bottom: 40px;}
.my-recom .pro_inner .probox .price_line p {margin-bottom: 0;}
.my-recom video {width: 100%; height: 100%; display: block;}
.cursor {cursor: pointer;}

/* 제품 이미지 박스 */
.my-recom .circle-img-box {width: 28px; height: 28px; background: var(--coF9); overflow: hidden; border-radius: 50%;}
.my-recom .circle-img-box img {width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply;}
.my-recom .img-box {position: relative; border-radius: 5px; overflow: hidden;}
.my-recom .img-box > img {width: 100%; height: 100%;}
.my-recom .img-box::after {content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.06)}
.page2 .section:nth-child(odd) .pro_inner .probox .img_box img{mix-blend-mode: normal;}

/*컨텐츠 bg */
.page2 .section:nth-child(even) {background: var(--coFF);}
.page2 .section:nth-child(odd) {background: #E8E6EB;}
.page2 .section:nth-child(odd)::before {content: ''; width: 2560px; height: 100%; background: url("//image5.compuzone.co.kr/img/images/my_recom/bg-obj.png") top center / cover no-repeat; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}

.page2 .section:nth-child(1) { clip-path: inset(0 calc((100% - var(--inner-width)) / 2) 0 calc((100% - var(--inner-width)) / 2)); -webkit-clip-path: inset(0 calc((100% - var(--inner-width)) / 2) 0 calc((100% - var(--inner-width)) / 2)); transition: all .6s ease;}
.page2 .section:nth-child(1).on {clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0);}

/* 비주얼 섹션 */
.my-recom .section.visual-sc {height: 100vh; background: var(--point-bg);}
.visual-sc .motion {width: auto; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%)  scale(0.6); animation: maincircleMove 1s ease-in both 0.8s;} 
@keyframes maincircleMove {
    0% {top: 80%; transform: translateX(-50%) scale(0.6);}
    100% {top: 0;transform: translateX(-50%) scale(1);}
}
.visual-sc .circle {--circle-size: 800px; width: var(--circle-size); height: var(--circle-size); position: absolute;animation: rotateAnim 6s infinite linear; transition: 900ms, background-color 1700ms; opacity: 0.4; filter: blur(18px);}
.visual-sc .circle1 {bottom: -450px; left: -400px;  background: radial-gradient(circle, rgba(186, 42, 231, 0.4) 0%, rgb(189 0 255 / 0.2) 80%, rgba(186, 42, 231, 1) 100%);}
.visual-sc .circle2 {top: -250px; right: -500px; background: radial-gradient(circle, rgba(116, 78, 254, 0.4) 0%, rgba(55, 0, 255, 0.4) 30%, rgba(55, 0, 255, 0.2) 55%, rgba(116, 78, 254, 0.1) 100%); }
@keyframes rotateAnim {
    0% {transform: rotate(0); border-radius: 30%;}
    50% { border-radius: 45%;}
    100% {transform: rotate(360deg); border-radius: 30%;}
}

.visual-sc .cont-wrap {width: 100%; gap: 60px; position: absolute; top: 230px; left: 50%; transform: translateX(-50%);}
.visual-sc .box a {position: absolute; top: 24px; right: 24px;}
.visual-sc .scroll {position: absolute; bottom: 40px;; left: 50%; transform: translate(-50%,0);}
.visual-sc .scroll i:first-child {animation: scrollMove2 1.4s infinite both;}
.visual-sc .scroll i:last-child {animation: scrollMove 1.4s infinite both;}
.visual-sc .swiper-container {width: 100%; mask-image: linear-gradient(90deg, transparent 0, #000 3%, #000 50%, #000 97%, transparent); margin-top: 6px;}
.visual-sc .swiper-container li {width: max-content; max-width: 218px; height: 40px; padding: 0 16px; display: flex; align-items: center; justify-content: center; border-radius: 20px; border: 1px solid var(--coD8);}
.visual-sc .swiper-container p {text-align: center;}
@keyframes scrollMove {
    0% {transform: translateY(-6px); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: translateY(0px); opacity: 0;}
}
@keyframes scrollMove2 {
    0% {transform: translateY(-12px); opacity: 1;}
    70% {opacity: 1;}
    100% {transform: translateY(12px);; opacity: 0;}
}

@media screen and (max-width:1600px) {
    .visual-sc .cont-wrap {top: 25vh;}
    .visual-sc .scroll { bottom: 4vh;}
}
@media screen and (max-width:1336px) {
    .visual-sc .cont-wrap {top: 20vh;}
    .visual-sc .scroll { bottom: 3.5vh;}
}

.speech_bubble { width: 288px; border: 1px solid var(--co3A); left: calc(50% + 154px); top: -48px; transform: translateX(-50%); right: unset; display: none;}
.speech_bubble p {letter-spacing: -0.85px;}
.speech_bubble::before {border-top: 7px solid var(--co3A); left: 50%; transform: translateX(-50%);}
.speech_bubble::after { left: 50%; transform: translateX(-50%);}
.box .exclamation20_D8:hover + .speech_bubble{display: block;}

/* 스와이퍼 공통 */
.basic-swiper {position: relative;}
.basic-swiper .swiper-button-prev.swiper_prev { top: 91px; left: -21px; opacity: 0;}
.basic-swiper .swiper-button-next.swiper_next { top: 91px; right: -21px; opacity: 0;}
.basic-swiper:hover .swiper-button-prev.swiper_prev, 
.basic-swiper:hover .swiper-button-next.swiper_next {opacity: 1;}
.basic-swiper .pro_inner .probox {width: 100%; max-width: 224px;}
.basic-swiper .swiper-button-prev.swiper_prev.center { top: calc(50% - 23px); transform: translateY(-50%);}
.basic-swiper .swiper-button-next.swiper_next.center { top: calc(50% - 23px); transform: translateY(-50%);}
.my-recom .swiper-op .swiper-pagination { font-size:0; display: flex; align-items: center; justify-content: center; gap:6px; position:unset; margin-top:40px; } 
.my-recom .swiper-op .swiper-pagination-bullet { width:8px; height:8px; background:var(--coD8); opacity:1; } 
.my-recom .swiper-op .swiper-pagination-bullet-active { background:var(--co1A); } 

/* 인기급상승 키워드 아코디언 */
.keyword-sc .accordion > ul > li  {width: 100%; height: 60px; padding: 0 30px; overflow: hidden; border-top: 1px solid var(--coD8); transition: all .3s;}
.keyword-sc .accordion > ul > li:last-child {border-bottom: 1px solid var(--coD8);}
.keyword-sc .accordion > ul > li > a {width: 100%; height: 60px;}
.keyword-sc .accordion .img_box {height: 212px;}
.keyword-sc .accordion .pro_inner .probox .img_box img {mix-blend-mode: normal;}
.keyword-sc .accordion ul > li.on {height: 472px; border-top: 1px solid var(--co1A); background: var(--coF9);}
.keyword-sc .accordion  li.on .ranking span {font-weight: bold;}
.keyword-sc .accordion li.on .down24_6C {transform: rotate(180deg);}
.keyword-sc .accordion li.on .basic-swiper  {height: 412px;}

.keyword-sc .accordion .swiper-button-prev.swiper_prev,
.keyword-sc .accordion .swiper-button-next.swiper_next  { top: 85px;}

/* 직접 사용해본 구매자가 추천해요 */
.review-sc .grid li {width: 100%; padding: 16px 20px; border: 1px solid var(--coD8); border-radius: 10px; background: var(--coFF);}
.review-sc .img-box {width: 102px; flex-shrink: 0;}
.review-sc .info-box {height: 50px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--coF9); border-radius: 5px;}
.review-sc .info-box span {flex-shrink: 0;}
.review-sc .ellipsis.line3 {width: 432px;}

/* 최근 잘나가는 인기 아이템 & 딜러고객님을 위한 파격할인 */
.num-badge {width: 32px; height: 32px; position: absolute; top: 0; left: 0; background: var(--co1A); color: var(--coFF); display: flex; align-items: center; justify-content: center;} 
.hot-item-sc .grid li, .dealer-sc .grid li{border: 1px solid var(--coD8); border-radius: 10px; overflow: hidden;}
.hot-item-sc .img-box, .dealer-sc .img-box {width: 160px; height: 160px; flex-shrink: 0; border-radius: 0;}
.hot-item-sc .info-box, .dealer-sc .info-box {padding: 20px; background: var(--coFF); display: flex; flex-direction: column; gap: 24px; justify-content: space-between;}
.hot-item-sc .info-box .price, .dealer-sc .info-box .price {margin-left: auto;}

/* 내 취향 PICK */
.my-recom .pick-sc .inner {padding: 0; display: flex; gap: 60px;}
.pick-sc .left-area {padding: 88px 0 100px; display: flex; flex-direction: column; gap: 40px; width: 232px; background: var(--coF9); position: relative;}
.pick-sc .left-area::after {content: ''; width: 500%; height: 100%; background: var(--coF9); position: absolute; top: 0; left: -500%;}
.pick-sc .left-area .motion-logo {width: 60px; height: 60px; position: relative; left: -10px; z-index: 2;} 
.pick-sc .left-area .motion-logo::before {content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("//image5.compuzone.co.kr/img/images/my_recom/icon2.png") center/contain no-repeat;}
.pick-sc .right-area {width: calc(100% - 292px); padding: 100px 0;} 
.pick-sc .chipbtn ul {gap: 0px; margin-bottom: 20px;}
.pick-sc .chipbtn ul li{width: max-content;}
.pick-sc .chipbtn ul li a {max-width: 210px;}
.pick-sc .pro_inner {justify-content: flex-start;}
.pick-sc .pro_inner .probox {width: 213px; flex-shrink: 0;}
.pick-sc .probox .img_box {height: 213px;}
.pick-sc .probox .img_box img {width: 100%; height: 100%;}
.pick-sc .price_line {display: flex; flex-direction: column; align-items: flex-end;}
.pick-sc .price_line2 {width: 100%;}
.pick-sc .price_line2 .coF1 {margin-right: auto; display: block;}
.pick-sc .pick-swiper {position: relative; display: none;}
.pick-sc .pick-swiper .swiper-button-prev.swiper_prev { top: 91px; left: -21px; opacity: 0;}
.pick-sc .pick-swiper .swiper-button-next.swiper_next { top: 91px; right: -21px; opacity: 0;}
.pick-sc .pick-swiper:hover .swiper-button-prev.swiper_prev, 
.pick-sc .pick-swiper:hover .swiper-button-next.swiper_next {opacity: 1;}
.pick-sc .pick-swiper .swiper-button-prev.swiper_prev.disabled,
.pick-sc .pick-swiper .swiper-button-next.swiper_next.disabled {opacity: 0; pointer-events: none;}

/* 다른 추천상품보기 버튼 */
.round-btn {width: 250px; height: 50px; display: flex; align-items: center; justify-content: center; gap:4px; background: var(--coFF); border: 1px solid var(--coD8); border-radius: 50px; margin: 20px auto 0;}
.round-btn span { letter-spacing: 1.4px;}

/* 서둘러요! 곧 종료되는 이벤트 */
.evt-sc .evt-swiper {position: relative;}
.evt-sc .swiper-slide {display: flex; gap: 20px;}
.evt-sc .item {border-radius: 20px; border: 1px solid var(--coD8); overflow: hidden; max-width: 50%; width: 100%;}
.evt-sc .bg-img {width: 100%; height: 160px; filter: blur(10px); position: absolute; top: 0; left: 0; z-index: -1;}
.evt-sc .bg-img img {width: 100%; height: 100%;  object-fit: cover; transform: scale(1.3);}
.evt-sc .bg-img::before {content: ''; width: 100%; height: 100%;  position: absolute; top: 0; left: 0; background: rgb(0, 0, 0,0.5); z-index: 1;}
.evt-sc .evt-box {width: 100%; position: relative; padding: 20px; display: flex; gap: 12px; align-items: center;}
.evt-sc .evt-box .evt-img {width: 120px; height: 120px; border-radius: 50%; overflow: hidden; display: block;}
.evt-sc .evt-box .evt-img img {width: 100%; height: auto;}
.evt-sc .blue-bat{width: max-content; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 17px; background: var(--co1C); color: var(--coFF); padding: 0 10px; position: absolute; top: 12px; right: 12px;}
.evt-sc .prod-list {background: var(--coFF); padding: 30px; display: flex; flex-direction: column; gap: 20px;}
.evt-sc .prod-list .img-box {width: 90px; height: 90px; flex-shrink: 0;}
.evt-sc .prod-list .txt-box {display: flex; flex-direction: column; gap: 8px;}
.evt-sc .swiper-button-prev {top: 244px; left: -21px; opacity: 0;}
.evt-sc .swiper-button-next {top: 244px; right: -21px; opacity: 0;}
.evt-sc .evt-swiper:hover .swiper-button-prev.swiper_prev, 
.evt-sc .evt-swiper:hover .swiper-button-next.swiper_next {opacity: 1;}