/* °øÅë »ç¿ë css */
:root {
    --inner-width: 1204px;
    --border-color: var(--coD8);
}

a:visited {color: inherit;}
body.on {overflow: hidden;}

/* display */
.block {display: block;}
.inline-block {display: inline-block;}
.inline {display: inline;}

/* flex */
.flex {display: flex;}
.inline-flex {display: inline-flex;}
.justify-center {justify-content: center;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around;}
.space-evenly {justify-content: space-evenly;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.baseline {align-items: baseline;}
.flex-row {display: flex; flex-direction: row;}
.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);}
.col5 {grid-template-columns: repeat(5, 1fr);}
.col6 {grid-template-columns: repeat(6, 1fr);}
.row2 {grid-template-rows: repeat(2, 1fr);}
.row3 {grid-template-rows: repeat(3, 1fr);}
.row4 {grid-template-rows: repeat(4, 1fr);}
.row5 {grid-template-rows: repeat(5, 1fr);}
.row6 {grid-template-rows: repeat(6, 1fr);}

/* gap - spacing */
.gap4 {gap: 4px;}
.gap8 {gap: 8px;}
.gap10 {gap: 10px;}
.gap12 {gap: 12px;}
.gap16 {gap: 16px;}
.gap20 {gap: 20px;}
.gap24 {gap: 24px;}
.gap30 {gap: 30px;}
.gap40 {gap: 40px;}
.gap48 {gap: 48px;}
.gap56 {gap: 56px;}
.gap80 {gap: 80px;}

/* ÅؽºÆ® °ü·Ã */
.regular {font-weight: 400;}
.medium {font-weight: 500;}
.bold {font-weight: 700;}
.break-all {word-break: break-all;}
.keep-all {word-break: keep-all;}
.ellipsis {display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;}
.ellipsis.line2 {-webkit-line-clamp: 2;}
.ellipsis.line3 {-webkit-line-clamp: 3;}
.tl {text-align: left;}
.tr {text-align: right;}
.tc {text-align: center;}
.ntRB28 {color: var(--co1A); font-size: 28px; font-family: 'noto-R';}

/* ÄÁÅÙÃ÷ °øÅë */
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: 1300px;}
.new-products {overflow: hidden;}
.new-products * {letter-spacing: -0.4px; line-height: 1.5; box-sizing: border-box;}

/* section °ü·Ã */
.new-products .section {width: 100%; position: relative;}
.new-products .section .inner {position: relative; width: var(--inner-width); margin: 0 auto; height: 100%; padding: 80px 0;}
.section-tit {font-size: 28px; font-family: 'noto-B'; color: var(--co1A); margin-bottom: 30px;}
.section-tit + .settion-recom, .section-tit + .chipbtn {margin-bottom: 20px;}

/* °¡°Ý¹Ú½º */
.price-wrap {display: flex; align-items: center; gap: 6px;}
.price-wrap .discount {font-family: 'spoqa M'; font-size: 18px; color: var(--coF1);}
.price-wrap .original {font-family: 'spoqa R'; font-size: 14px; color: var(--co94); text-decoration: line-through;}
.price-wrap .total {font-family: 'spoqa M'; font-size: 18px; color: var(--co1A);}
.price-wrap .discount + .original {margin-left: 10px;}

/* ÇýÅð¡ ¹èÁö */
.coupondis{font-size: 14px; color: #fff; font-family: 'noto-R'; position: absolute; bottom: 0; left: 0; padding: 5px 10px; box-sizing: border-box; background: #1C8FED; border-radius: 0 10px 0 10px; z-index: 2; display: flex; align-items: flex-start; justify-content: center; white-space: nowrap;}
.coupondis i {margin:-2px 0 0 3px;}
.coupondis b{font-family: 'spoqa R'; font-weight: normal; margin-left: 3px; font-size: 14px; height: 17px;}

/* ½Å±ÔÀÔÁ¡ ¹èÁö - ½Ç¼­¹ö ¹Ý¿µ ÈÄ top_footer.css ·Î À̵¿ */
.bat1C_fill {display: flex; align-items: center; justify-content: center; width: max-content; height: 26px; padding: 0 10px; background: var(--co1C); color: var(--coFF); border-radius: 13px; font-weight: 700;}

/* ±âº» ½º¿ÍÀÌÆÛ */
.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%);}

/* Á¦Ç° ¸®½ºÆ® ÇÏ´Ü ÆäÀÌ¡ */
.bottom_area {width:100%; text-align:center; margin: 60px 0;}
.bottom_area .page_area{ display:inline-block; width:auto; margin:0 auto;}
.bottom_area .page_area > a{ height:30px; width:30px; background-color:#fff; border:1px solid #d8d8d8; display:block; line-height: 28px; text-align:center; color:#3a3a3a; font-size:12px; margin-right:5px; display:inline-block; float:left; font-family: "spoqa L"; text-decoration:none;}
.bottom_area .page_area > a.active,
.bottom_area .page_area > a:hover{background-color:#3a3a3a; border-color:#3a3a3a; color:#fff; font-weight:bold;}
.bottom_area .page_area > a.prev{margin-right:10px; background: #fff url(//image5.compuzone.co.kr/img/images/product_detail/product_list_obj.png) -97px -132px no-repeat;}
.bottom_area .page_area > a.next{margin:0 5px; background: #fff url(//image5.compuzone.co.kr/img/images/product_detail/product_list_obj.png) -117px -132px no-repeat;}

/* Å°ºñÁÖ¾ó */
.sc-intro {height: 480px;}
.sc-intro .inner {overflow: hidden;}
.sc-intro .bg-box {position: absolute; left: 0; top: 0; background: var(--coFF); width: 100%; height: 100%; overflow: hidden;}
.sc-intro .bg-box>span {position: absolute;}
.sc-intro .obj1 {left: -320px; bottom: -620px; animation: rotate 5s ease-in-out infinite;}
.sc-intro .obj2 {left: 730px; bottom: -460px; animation: rotate2 4s ease-in-out infinite;}
.sc-intro .obj3 {left: 1120px; bottom: -700px; animation: rotate 5s ease-in-out infinite;}
.sc-intro .obj4 {left: 1100px; bottom: -390px; animation: rotate2 3s ease-in-out infinite;}
.sc-intro .obj5 {left: 280px; bottom: -300px; animation: rotate 8s ease-in-out infinite;}
.sc-intro .bg-front {left: 0; top: 0; bottom: 0; right: 0; width: 100%; height: 100%; mix-blend-mode: overlay;}

.sc-intro .title {display: flex; flex-direction: column; align-items: center; gap: 12px;}
.sc-intro .title > span {opacity: 0; transform: translateY(25px); animation: fadeUp .5s .3s ease-in-out forwards;}
.sc-intro .title > p {opacity: 0; transform: translateY(25px); animation: fadeUp .5s .8s ease-in-out forwards;}

.sc-intro .obj-wrap {position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); width: 847px; height: 216px; overflow: hidden; transition: 0.8s cubic-bezier(.04,.49,.2,1.15);}
.sc-intro .obj-wrap>span {position: absolute;}
.sc-intro .box1 {left: 10px;  top: 27px; transform: rotate(-10deg); transition: 0.7s ease-in-out; transition-delay: 0.2s;}
.sc-intro .box2 {left: 150px; top: 27px; transform: rotate(5deg); z-index: 2; transition: 0.7s ease-in-out; transition-delay: 0.3s;}
.sc-intro .box3 {left: 240px; top: 15px; transform: rotate(-6deg); transition: 0.7s ease-in-out; transition-delay: 0.4s;}
.sc-intro .box4 {left: 380px; top: 38px; transform: rotate(7deg); z-index: 2; transition: 0.7s ease-in-out; transition-delay: 0.5s;}
.sc-intro .box5 {left: 520px; top: 14px; transform: rotate(-6deg); z-index: 1; transition: 0.7s ease-in-out; transition-delay: 0.6s;}
.sc-intro .box6 {left: 665px; top: 30px; transform: rotate(-700px); transition: 0.7s ease-in-out; transition-delay: 0.7s;}
.sc-intro .obj-wrap.on .box1 {top: 7px; transform: rotate(-7deg);}
.sc-intro .obj-wrap.on .box2 {top: 7px; transform: rotate(2deg);}
.sc-intro .obj-wrap.on .box3 {top: -5px; transform: rotate(-3deg);}
.sc-intro .obj-wrap.on .box4 {top: 18px; transform: rotate(4deg);}
.sc-intro .obj-wrap.on .box5 {top: -6px; transform: rotate(-3deg);}
.sc-intro .obj-wrap.on .box6 {top: 10px; transform: rotate(4deg);}


.sc-intro .bubble-wrap {position: relative; left: 50%; bottom: -50px; transform: translateX(-50%); width: 847px; height: 216px;}
.sc-intro .bubble1 {position: absolute; left: 110px; top: 60px; z-index: 3; transform: rotate(8deg);}
.sc-intro .bubble1>img {transform: scale(0); animation: scale 0.4s 1.1s ease-in-out forwards, float 2s 1.8s ease-in-out infinite;}
.sc-intro .bubble2 {position: absolute; right: 110px; top: 60px; z-index: 3; transform: rotate(-8deg);}
.sc-intro .bubble2>img {transform: scale(0); animation: scale 0.4s 1.2s ease-in-out forwards, float 2s 2s ease-in-out infinite;}
@keyframes test {
    0% {transform: translateY(0);}
    100% {transform: translateY(-10px);}
}

/* »ó´Ü ¼½¼Ç wrap */
.section-wrap {position: relative;}
.section-wrap .section {z-index: 3; background: var(--coFF); border-radius: 50px;}
.section-wrap .section:has(+ .bg-blue) {box-shadow: 0 20px 30px rgba(82,205,249,0.3);}
.section-wrap .section:has(+ .bg-blue.on) {box-shadow: none;}

/* open-wrapper */
.open-wrapper {position: relative;}
.top-component .section .inner {padding: 40px 0;}
.top-component .section .inner:last-child {padding-bottom: 80px;}
.top-component {position: relative; background: var(--coFF);}
.top-component::before {content: ''; display: block; width: 100%; height: 100px; border-radius: 50px 50px 0 0; position: absolute; left: 50%; top: -40px; transform: translateX(-50%); box-sizing: border-box; background: var(--coFF); z-index: 2;}
.mid-component, .btm-component {margin-top: 0; transition: margin 0.5s;}
.mid-component.active, .btm-component.active {margin-top: 84px;}
.section-wrap.mid-component .section:nth-child(odd) {background: var(--coF9); border: 2px solid var(--coFF);}
.section-wrap.mid-component .section:nth-child(odd) .img_box {background: var(--coFF);}
.section-wrap.mid-component .section:nth-child(even) {background: var(--coFF);} 
.btm-component .section .inner {padding: 40px 0;}
.btm-component .section:nth-child(1) .inner {padding-top: 80px;}

/* ½ºÅ©·Ñ Åä±Û ¹Ú½º ¿µ¿ª */
.sc-interlude {width: 100%; height: 200px; margin-top: -56px; position: absolute; display: flex; justify-content: center; align-items: center;}
.sc-interlude.bg-blue {background: #D4F3FE;}
.sc-interlude.bg-green {background: #D6F5D6;}
.sc-interlude.on {display: none;}
.interlude-box {display: flex; align-items: center; gap: 4px; position: relative;}
.sc-interlude.active .next16_6C {animation: pointRight 2s 0.3s ease-in-out infinite;}
.interlude-box::before {content: ''; display: block; position: absolute; width: 695px; height: 154px; background: url("//image5.compuzone.co.kr/img/images/new_products/confetti.png") center / contain no-repeat; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.3); opacity: 0; transition: .3s ease-in-out; pointer-events: none;}
.bg-green .interlude-box::before {transform: translate(-50%, -50%) scale(0.3) rotate(180deg);}
.sc-interlude.active .interlude-box::before {transform: translate(-50%, -50%) scale(1); opacity: 1;}
.sc-interlude.bg-green.active .interlude-box::before {transform: translate(-50%, -50%) scale(1) rotate(180deg);}

/* µû²öµû²ö ½Å»óÇ° ¸ð¾Æº¸±â */
.new-arrivals {display: flex; flex-direction: column; gap: 12px;}
.new-arrivals .list-item {display: flex; justify-content: space-between; gap: 16px; border-radius: 10px; overflow: hidden; padding: 16px;}
.new-arrivals .list-item:nth-child(odd) {padding-left: 40px;}
.new-arrivals .list-item:nth-child(even) {padding-right: 40px; flex-direction: row-reverse;}
.new-arrivals .list-item.list1 {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list01.png") no-repeat; background-position: center;}
.new-arrivals .list-item.list2 {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list02.png") no-repeat; background-position: center;}
.new-arrivals .list-item.list3 {background: url("//image5.compuzone.co.kr/img/images/new_products/bg-list03.png") no-repeat; background-position: center;}
.new-arrivals .list-item>div {width: calc(50% - 8px);}

.new-arrivals .left-area {display: flex; flex-direction: column; justify-content: space-between;}
.new-arrivals .list-item:not(:has(.swiper-slide + .swiper-slide)) .left-area {flex-direction: row;}
.new-arrivals .list-item:nth-child(even) .left-area {padding-left: 24px;}
.new-arrivals .left-area .txt-box {padding-top: 24px; display: flex; flex-direction: column; gap: 12px;}
.new-arrivals .left-area .img-box {width: 230px; height: 122px; margin-left: auto;}

.new-arrivals .prod-box {padding: 16px; background: var(--coFF); border-radius: 10px; overflow: hidden; height: 100%; max-height: 220px;}
.new-arrivals .prod-box .swiper-container {height: 100%; max-height: 188px;}
.new-arrivals .prod-box .item {height: 90px;}
.new-arrivals .prod-box .img-box {width: 90px; height: 90px; border-radius: 10px; position: relative; overflow: hidden; flex-shrink: 0;}
.new-arrivals .prod-box .img-box::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.02)}
.new-arrivals .prod-box .info-box {padding: 8px 0;}
.new-arrivals .prod-box .name {min-height: 42px; margin-bottom: 8px;}

/* ÃëÇâÀ» ¹Ý¿µÇÑ ½Å±Ô »óÇ° */
.setting-recom {position: relative; display: flex; justify-content: center; align-items: center; padding: 24px 40px; background: var(--coF3); border-radius: 10px; overflow: hidden;}
.setting-recom>a {display: flex; align-items: center; position: absolute; top: 50%; right: 40px; transform: translateY(-50%);}
.recom-product-wrap {margin-top: 20px; display: flex; flex-direction: column; gap: 30px;}
.recom-product .item {display: flex; border: 1px solid var(--border-color); background: var(--coFF); border-radius: 10px; overflow: hidden;}
.recom-product .img-box {width: 160px; height: 160px; flex-shrink: 0;}
.recom-product .img-box>img {width: 100%; height: 100%; object-fit: cover;}
.recom-product .info-box {padding: 20px; display: flex; flex-direction: column; gap: 8px;}
.recom-product .info-box .price-wrap {justify-content: flex-end; margin-top: auto;}
.recom-product .info-box .tag-wrap > span {margin: 0; border-radius: 2px;}
.reset-btn {width: 242px; height: 50px; background: var(--coFF); border: 1px solid var(--border-color); border-radius: 5px; display: flex; justify-content: center; align-items: center; gap: 4px;}
.reset-btn>i {margin-left: 4px;}

/* mid-component ½ºÅ¸ÀÏ */
.mid-component .section {overflow: hidden;}
.mid-component .section:nth-child(1)::before {content: ''; position: absolute; display: block; left: -400px; top: -630px; width: 1311px; height: 1287px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj1.png") center / contain no-repeat; animation: rotate 5s ease-in-out infinite;}
.mid-component .section:nth-child(1)::after {content: ''; position: absolute; display: block; right: -200px; bottom: -350px; width: 1002px; height: 836px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj2.png") center / contain no-repeat; animation: rotate2 8s ease-in-out infinite;}
.mid-component .section:nth-child(3)::before {content: ''; position: absolute; display: block; left: -400px; top: -630px; width: 1311px; height: 1287px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj3.png") center / contain no-repeat; animation: rotate 5s ease-in-out infinite;}
.mid-component .section:nth-child(3)::after {content: ''; position: absolute; display: block; right: -200px; bottom: -350px; width: 1002px; height: 836px; background: url("//image5.compuzone.co.kr/img/images/new_products/secobj4.png") center / contain no-repeat; animation: rotate2 8s ease-in-out infinite;}

/* »õ·Î ¸¸³ª´Â ºê·£µå */
.sc-brand .brand-box {position: relative; width: calc(50% - 10px); height: 460px; border-radius: 10px; overflow: hidden; background: var(--co00);}
.sc-brand .banner-box {position: absolute; left: 0; top: 0;}
.sc-brand .brand-box::before {content: ''; display: block; position: absolute; left: 0; bottom: 0; z-index: 1; width: 100%; height: 218px; background: linear-gradient(to bottom, transparent 0, var(--co00) 100%);}
.sc-brand .prod-box {position: absolute; width: 100%; bottom: 0; left: 0; z-index: 1; padding: 20px;}
.sc-brand .prod-box > p {margin-bottom: 12px;}
.sc-brand .prod-list {display: flex; flex-direction: column; gap: 8px;}
.sc-brand .prod-list>li {padding: 8px; background: rgba(255,255,255,0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-radius: 10px; overflow: hidden; }
.sc-brand .prod-list .img-box {width: 74px; height: 74px; background: var(--coFF); border-radius: 5px; overflow: hidden; flex-shrink: 0;}
.sc-brand .prod-list .img-box > img {width: 100%; height: 100%; object-fit: cover;}
.sc-brand .prod-list .info-box {display: flex; flex-direction: column; gap: 8px; padding-right: 32px;}

/* ÁÖ¸ñ¹Þ´Â ½Å»óÀ» ÇÑ´«¿¡ */
.product-grid {gap: 48px 20px;}
.probox .img_box > em {position: absolute; left: 8px; top: 8px;}

/* Å°ÇÁ·¹ÀÓ ¾Ö´Ï¸ÞÀÌ¼Ç */
@keyframes rotate {
    0% {transform: rotate(0);}
    100% {transform: rotate(360deg);}
}

@keyframes rotate2 {
    0% {transform: rotate(0);}
    100% {transform: rotate(-360deg);}
}

@keyframes fadeUp {
    0% {opacity: 0; transform: translateY(25px);}
    100% {opacity: 1; transform: translateY(0);}
}

@keyframes scale {
    0% {transform: scale(0);}
    100% {transform: scale(1);}
}

@keyframes float {
    0%, 100% {transform: scale(1) translateY(0);}
    50% {transform: scale(1) translateY(-30px);}
}

@keyframes pointRight {
  0%   { transform: translateX(0); }
  12%  { transform: translateX(4px); }
  24%  { transform: translateX(0); }

  36%  { transform: translateX(4px); }
  48%  { transform: translateX(0); }

  100% { transform: translateX(0); }
}