/* °øÅë »ç¿ë css */
:root {
    --server-point: #163ECA;
    --server-label: #0B1F65;
    --inner-width: 1204px;
    --option-color: #3a3a3a;
    --x1: 0;
    --y1: 0;
    --x2: 0;
    --y2: 0;

    /* ¹öÆ° °ü·Ã º¯¼ö */
    --btn-width: 56px;
    --btn-height: 32px;
    --btn-padding: 0 15px;
    --btn-text-color: var(--co1A);
    --btn-bg-color: var(--coFF);
    --btn-radius: 2px;
    --btn-font-size: 14px;
    --btn-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;}

/* ¹öÆ° */
.btn-wrap {display: flex; flex-wrap: wrap; gap: 10px;}
.btn-wrap .button {display: flex; justify-content: center; align-items: center; gap: 8px; min-width: var(--btn-width); height: var(--btn-height); padding: var(--btn-padding); color: var(--btn-text-color); background: var(--btn-bg-color); border-radius: var(--btn-radius); font-size: var(--btn-font-size); border: 1px solid var(--btn-border-color); transition: .3s; font-family: 'noto-R'; font-size: 14px;}

.square-btn.size-xs {--btn-width: 44px; --btn-height: 26px; --btn-padding: 0 10px; --btn-radius: 2px; --btn-font-size: 12px;}
.square-btn.size-s {--btn-width: 56px; --btn-height: 32px; --btn-padding: 0 15px; --btn-radius: 2px; --btn-font-size: 14px;}
.square-btn.size-m {--btn-width: 78px; --btn-height: 40px; --btn-padding: 0 20px; --btn-radius: 2px; --btn-font-size: 14px;}
.square-btn.size-l {--btn-width: 265px; --btn-height: 60px; --btn-padding: 0 50px; --btn-radius: 8px; --btn-font-size: 16px; font-weight: 500;}

.button.black {--btn-text-color: var(--coFF); --btn-bg-color: var(--co1A); --btn-border-color: var(--co1A);}
.button.gray {--btn-text-color: var(--co1A); --btn-bg-color: var(--coF9);}

/* ¾ÆÀÌÄÜ */
.check16 {display: block; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/ETC/icon_fill_light_check.svg") center / contain no-repeat;}
.document20 {display: block; width: 20px; height: 20px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/MIX/icon_line_document_list_24.svg") center / contain no-repeat;}
.sale20 {display: block; width: 20px; height: 20px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/MIX/icon_line_sale_24.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: 1300px;}
.server-estimate {overflow: hidden;}
.server-estimate * {letter-spacing: -0.4px; line-height: 1.5; box-sizing: border-box;}
.server-estimate .section {width: 100%; position: relative;}
.server-estimate .section .inner {position: relative; width: var(--inner-width); margin: 0 auto; height: 100%; padding: 80px 0;}
.server-estimate .point {color: var(--server-point);}

/* section - intro */
.sc-intro {height: 803px; background: #E4E8F9 url("//image5.compuzone.co.kr/img/images/server_estimate/main-bg-01.png") 50% 50% no-repeat; overflow: hidden;}
.sc-intro .inner {padding: 100px 0; display: flex; flex-direction: column; justify-content: space-between;}
.sc-intro .title-wrap {display: flex; flex-direction: column; gap: 8px;}
.sc-intro .title-wrap > p {font-size: 28px; font-family: 'noto-M'; letter-spacing: -0.7px; animation: fadeUp .6s .4s ease-in-out forwards; opacity: 0;}
.sc-intro .title-wrap > h2 {color: var(--co1A); font-size: 56px; font-family: 'noto-B'; letter-spacing: -2.4px; animation: fadeUp .6s .6s ease-in-out forwards; opacity: 0;}

.sc-intro .obj-wrap {width: var(--inner-width); height: 500px; position: absolute; pointer-events: none;}
.sc-intro .obj-wrap > span {position: absolute;}
.obj-circle {right: 30px; top: 0; animation: float 3s ease-in-out infinite;}
.float-obj {display: none;}

@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

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

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

@keyframes float {
    0%, 100% {opacity: 1; transform: translateY(0); }
    50% {opacity: 1; transform: translateY(20px); }
}


.recommend-tit {display: flex; gap: 8px; align-items: baseline;}
.recommend-list {margin-top: 16px; display: flex; align-items: center; gap: 20px;}
.recommend-list > li {width: 286px; height: 278px;}
.recommend-list .item {display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding: 20px; background: rgba(255,255,255,0.9); border-radius: 20px;}
.keyword-box {display: flex; flex-wrap: wrap; gap: 4px;}
.keyword-box .keyword {display: inline-flex; justify-content: center; align-items: center; height: 26px; padding: 4px 10px; background: var(--server-label); color: var(--coFF); font-size: 12px; font-family: '¸¼Àº°íµñ'; border-radius: 17px;}
.recommend-list .info-box {display: flex; flex-direction: column; gap: 12px;}
.recommend-list .name {font-family: 'noto-R'; font-size: 16px; color: var(--co1A); display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.recommend-list .img-box {position: relative; width: 140px; height: 140px; border-radius: 50%; overflow: hidden;}
.recommend-list .img-box > img {width: 100%; height: 100%;}
.recommend-list .img-box::after {content: ''; position: absolute; left: 0; top: 0; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.06)}

/* MD Ãßõ ¿µ¿ª ¾øÀ» ¶§ */
.sc-intro.type2 {background-position: -320px top;}
.sc-intro.type2 .inner {padding: 100px 0;}
.sc-intro.type2 .obj-wrap {left: -150px; top: 175px;}
.sc-intro.type2 .float-obj {opacity: 0; transform: translateY(300px); transition: transform 1.5s ease-out, opacity 1.5s ease-out; display: flex; justify-content: center; align-items: center; background: rgb(119 149 253 / 20%); border-radius: 50%;}
.sc-intro.type2 .float-obj.on {opacity: 1; transform: translateY(0);}
.sc-intro.type2 .float-obj.float {animation: float 3s linear infinite;}
.sc-intro.type2 .obj1 {width: 150px; height: 150px; left: 600px; top: 40px;}
.sc-intro.type2 .obj2 {width: 150px; height: 150px; left: 730px; top: -180px;}
.sc-intro.type2 .obj2 > img {width: 100px; height: 100px;}
.sc-intro.type2 .obj3 {width: 200px; height: 200px; left: 140px; top: 170px;}
.sc-intro.type2 .obj3 > img {width: 120px; height: 120px;}
.sc-intro.type2 .obj4 {width: 210px; height: 210px; left: -140px; top: -310px;}
.sc-intro.type2 .obj5 {width: 156px; height: 156px; left: 410px; top: 420px;}
.sc-intro.type2 .obj6 {width: 200px; height: 200px; right: -70px; top: 500px;}
.sc-intro.type2 .obj7 {width: 200px; height: 200px; right: -200px; top: 30px;}
.sc-intro.type2 .md-recommend {display: none;}

/* section - find */
.sc-find {height: 100vh; overflow: hidden;}
.server-estimate .section.sc-find.fixed {position: fixed; left: 0; top: 0; bottom: 0; right: 0; z-index: 10;}
.server-estimate .section.sc-find .inner {padding: 0;}
.sc-find .bg-find {position: absolute; left: 0; top: 0; width: 100%; height: 2966px; background: url("//image5.compuzone.co.kr/img/images/server_estimate/bg-find.png") bottom center no-repeat; transition: transform 1.2s ease-out;}
.server-find {position: absolute; left: 0; top: 0; width: 100%; height: 100%;}

.sc-find .step-wrap {position: absolute; top: 0; left: 0; width: 568px; height: 100%; display: flex; flex-direction: column; gap: 40px;}
.sc-find .step-tit {position: relative; display: flex; flex-direction: column; gap: 12px; width: 644px; height: 210px; padding-top: 80px;}
.sc-find .step-tit::before {content: ''; position: absolute; left: -220px; top: 0; width: 644px; height: 210px; background: url("//image5.compuzone.co.kr/img/images/server_estimate/sec2-tit-obj.png")}
.sc-find .step-list {display: flex; flex-direction: column; gap: 20px;}
.sc-find .step-list>li {width: 472px; height: 90px; display: flex; gap: 8px; transition: all 0.4s; cursor: default;}
.sc-find .step {width: 34px; height: 34px; display: inline-flex; justify-content: center; align-items: center; background: var(--coD8); color: var(--coFF); border-radius: 50%; font-size: 14px; font-family: 'spoqa M'; flex-shrink: 0;}
.sc-find .txt-box {display: flex; flex-direction: column; gap: 6px;}
.sc-find .txt-box > p {color: var(--coD8); transition: all .4s;}
.sc-find .txt-box > span {opacity: 0; transform: translateY(20px); transition: .3s; transition-delay: .3s;}
.sc-find .step-list>li.on, .sc-find .step-list>li.selected {cursor: pointer;}
.sc-find .step-list>li.on .step, .sc-find .step-list>li.selected:hover .step {background: var(--server-point);}
.sc-find .step-list>li.on .txt-box > p, .sc-find .step-list>li.selected:hover .txt-box > p {color: var(--co1A);}
.sc-find .step-list>li.on .txt-box > span {opacity: 1; transform: translateY(0);}
.sc-find .info-box {display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 20px; background: #F0F3FF url("//image5.compuzone.co.kr/img/images/server_estimate/icon-question.png") 72% 43px no-repeat; border-radius: 10px;}
.sc-find .info-box .txt-wrap {display: flex; flex-direction: column; gap: 4px;}
.sc-find .info-box .txt-wrap > p {color: #112F97;}

.sc-find .option-scroll-wrap {position: absolute; right: 0; top: 250px;}
.sc-find .option-wrap {display: flex; flex-direction: column; gap: 100px; transition: transform .4s ease-out;}
.sc-find .option-cont {opacity: 0.3; transition: all 0.4s;}
.sc-find .option-cont.on {opacity: 1;}
.sc-find .option-list {display: flex; flex-direction: column; gap: 20px;}
.sc-find .option-list .option {min-height: 125px; display: flex; flex-direction: column; gap: 8px; padding: 16px; background: var(--coFF); border: 1px solid var(--co6C); border-radius: 10px; transition: .3s;}
.sc-find .option-list .option * {color: var(--option-color);}
.sc-find .option-info {display: none; gap: 20px;}
.sc-find .option-cont.selected .option-info, .sc-find .option-cont:nth-of-type(1) .option-info {display: flex;}
.sc-find .no-result {display: none;}
.sc-find .option-cont.selected .no-result, .sc-find .option-cont:nth-of-type(1) .no-result {display: block;}
.sc-find .option-tit {font-family: 'noto-B'; font-size: 20px; --option-color: var(--co3A);}
.sc-find .option-txt {font-family: 'noto-R'; font-size: 14px; --option-color: var(--co6C);}
.sc-find .option-info span {font-family: 'noto-M'; font-size: 14px; --option-color: var(--co6C);}
.sc-find .option-info p {font-family: 'spoqa M'; font-size: 16px; --option-color: var(--co1A);}
.sc-find .option-cont.on .option-list .option {cursor: pointer;}
.option-cont.on .option:not(.disabled):hover, .option-cont .option.active {background: #4971FD; box-shadow: 6px 8px 12px #4971FD33; border-color: #4971FD;}
.option-cont.on .option:not(.disabled):hover *, .option-cont .option.active * {--option-color: var(--coFF) !important;}

.sc-find .option-list .option.disabled {background: var(--coF9); border-color: var(--coD8); cursor: default !important;}
.sc-find .option-list .option.disabled * {--option-color: var(--co94);}

.option-cont.on .option:not(.disabled):hover .check16, .option-cont .option.active .check16 {background-image: url("//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_vivid_check.svg")}
.option-cont.on .option:not(.disabled):hover .document20, .option-cont .option.active .document20 {background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg transform='translate(1)'%3E%3Crect width='24' height='24' transform='translate(-1)' fill='none'/%3E%3Cpath d='M15517-803h-9a3,3,0,0,1-3-3v-11a3,3,0,0,1,3-3h.5v1a1,1,0,0,0,1,1h6a1,1,0,0,0,1-1v-1h.5a3,3,0,0,1,3,3v11A3,3,0,0,1,15517-803Z' transform='translate(-15501.5 824)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='1.5'/%3E%3Cpath d='M-14826.754,845.39h5' transform='translate(14837.254 -834.39)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='1.5'/%3E%3Cpath d='M-14826.754,845.39h5' transform='translate(14837.254 -829.89)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-width='1.5'/%3E%3Cpath d='M392.832,2716.237a1,1,0,1,1-1-1A1,1,0,0,1,392.832,2716.237Z' transform='translate(-384.332 -2705.237)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M392.832,2716.237a1,1,0,1,1-1-1A1,1,0,0,1,392.832,2716.237Z' transform='translate(-384.332 -2700.736)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Crect width='8' height='3' rx='1' transform='translate(7 3)' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");}
.option-cont.on .option:not(.disabled):hover .sale20, .option-cont .option.active .sale20 {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.114' height='25.113' viewBox='0 0 25.114 25.113'%3E%3Cscript xmlns=''/%3E%3Cg transform='translate(1.114 1.113)'%3E%3Crect width='24' height='24' fill='none'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' transform='translate(6.937 10)' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Ccircle cx='1.5' cy='1.5' r='1.5' transform='translate(14.063 10)' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath d='M-14856.08,820.287v8' transform='translate(14868.08 -812.287)' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-width='1.5'/%3E%3Cpath d='M1.666,17.815A1.585,1.585,0,0,1,0,16.326V6.045c0-.029,0-.058,0-.087V5.9A1.346,1.346,0,0,1,.012,5.72,2.843,2.843,0,0,1,1.1,3.688L5.222.5A2.318,2.318,0,0,1,8.106.5l4.12,3.184a2.842,2.842,0,0,1,1.09,2.024,1.346,1.346,0,0,1,.013.188V16.326a1.585,1.585,0,0,1-1.666,1.489Z' transform='translate(0 9.424) rotate(-45)' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E");}

.sc-find .icon-wrap {position: absolute; left: 50%; top: 0; transform: translate(-50%); width: 180px; height: 100%; background: url("//image5.compuzone.co.kr/img/images/server_estimate/bg-icon.png") center no-repeat;}
.sc-find .icon {display: block; width: 180px; height: 180px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center;}
.sc-find .icon::after {content: ''; display: block; background-repeat: no-repeat; background-position: center; background-size: contain; z-index: 1;}
.sc-find .icon span[class*="circle"] {display: block; position: absolute; border-radius: 50%; opacity: 0.6; transform: translate(-50%, -50%);}
.sc-find .icon .circle1 {opacity: 1; width: 40px; height: 40px; background: #A4B8FE; left: calc(1% * var(--x1)); top: calc(1% * var(--y1)); transition: .3s;}
.sc-find .icon .circle2 {opacity: 1; width: 90px; height: 90px; background: #7795FD; left: calc(1% * var(--x2)); top: calc(1% * var(--y2)); transition: .3s;}
.sc-find .icon01 {--x1: 11; --y1: 85; --x2: 85; --y2: 20;}
.sc-find .icon02 {--x1: 20; --y1: 10; --x2: 80; --y2: 78;}
.sc-find .icon03 {--x1: 31; --y1: 93; --x2: 10; --y2: 17;}
.sc-find .icon04 {--x1: 14; --y1: 86; --x2: 90; --y2: 16;}
.sc-find .icon01::after {width: 120px; height: 120px; background-image: url("//image5.compuzone.co.kr/img/images/server_estimate/icon01.png")}
.sc-find .icon02::after {width: 124px; height: 120px; background-image: url("//image5.compuzone.co.kr/img/images/server_estimate/icon02.png")}
.sc-find .icon03::after {width: 126px; height: 120px; background-image: url("//image5.compuzone.co.kr/img/images/server_estimate/icon03.png")}
.sc-find .icon04::after {width: 134px; height: 124px; background-image: url("//image5.compuzone.co.kr/img/images/server_estimate/icon04.png")}
.sc-find .icon.on {--x1: 50; --y1: 50; --x2: 50; --y2: 50;}
.sc-find .icon.on .circle1, .sc-find .icon.on .circle2 {opacity: 0;}

@keyframes circle1 {
    0% {left: calc(1% * var(--x1)); top: calc(1% * var(--y1));}
    50% {left: 50%; top: 50%;}
    100% {left: calc(1% * var(--x1)); top: calc(1% * var(--y1));}
}

@media (max-height: 700px) {
  .sc-find .step-tit {
    padding-top: 0;
  }
}

/* section - product */
.sc-product {background: #F3F5FC;}
.sc-product > .inner {display: flex; flex-direction: column; gap: 20px;}

.step-breadcrumb {background: #fff; border-radius: 10px; padding: 24px 30px; display: flex; gap: 8px;}
.step-breadcrumb > li {display: flex; align-items: center; gap: 8px;}
.step-breadcrumb > li:not(:last-child)::after {content: ''; display: block; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/6C6C6C/icon_line_next_24.svg") center / contain no-repeat;}
.step-breadcrumb > li span {padding-left: 4px;}
.step-breadcrumb .selected {text-decoration: underline;}

.sc-product .product-wrap {background: #fff; border-radius: 10px;}
.sc-product .product-wrap .top {padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--coD8);}

.sc-product .product-list {display: grid; grid-template-columns: repeat(4,1fr);}
.sc-product .product-list > li {border: 1px solid var(--coD8); border-top: none;}
.sc-product .product-list > li + li  {border-left: none;}
.sc-product .product-list > li:first-child {border-left: none;}
.sc-product .product-list > li:nth-child(n+5) {border-bottom: none;}
.sc-product .product-list > li:nth-child(4n) {border-right: none;}
.sc-product .product-list .item {padding: 40px; width: 100%; height: 100%; gap: 8px;}
.sc-product .product-list .img-box {width: 220px; height: 220px; border-radius: 10px; overflow: hidden; position: relative;}
.sc-product .product-list .img-box>img {width: 100%; height: 100%;}
.sc-product .product-list .img-box::after {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.06)}
.sc-product .product-list .info-box {display: flex; flex-direction: column; gap: 12px;}
.sc-product .product-list .name {font-family: 'noto-R'; color: var(--co1A); font-size: 16px; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;}
.sc-product .product-list .original {display: flex; justify-content: flex-end; font-family: 'spoqa R'; font-size: 14px; color: #949494; text-decoration: line-through;}
.sc-product .product-list .price {position: relative; display: flex; justify-content: flex-end; align-items: center;}
.sc-product .product-list .discount {color: var(--coF1); font-family: 'spoqa M'; font-size: 18px;}
.sc-product .product-list .total {display: flex; gap: 8px; align-items: center; font-family: 'spoqa M'; font-size: 18px; color: var(--co1A);}
.sc-product .product-list .price:has(.discount) {justify-content: space-between;}
.sc-product .rate-box {display: flex; align-items: center;}
.sc-product .rate-box>span {font-family: 'spoqa R'; font-size: 13px; letter-spacing: -0.8px; line-height: 17px;}
.sc-product .rate-box>span:not(:last-child)::after {content: ''; display: inline-block; width: 1px; height: 10px; background-color: var(--coD8); margin: 0 10px;}
.star20_fill {display: block; width: 20px; height: 20px; background: url('//image5.compuzone.co.kr/img/images/svg_icon/Fill/icon_fill_light_star.svg') center/20px no-repeat;}
.sc-product .tag-box {display: flex; flex-wrap: wrap; gap: 4px;}
.sc-product .tag-box>span {display: inline-flex; justify-content: center; align-items: center; height: 22px; margin: 0; padding: 0 5px; border: 1px solid var(--coD8); font-size: 12px;}
.sc-product .tag-box:not(:has(span)) {display: none;}
.sc-product .img-box + .keyword-box {margin-top: 8px;}
.sc-product .img-box + .info-box {margin-top: 42px;}

.sc-product .icon-circle-down {display: block; position: relative; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/svg_icon/6C6C6C/icon_line_down_12.svg") center / 10px no-repeat;}
.sc-product .icon-circle-down::after {content: ''; width: 14px; height: 14px; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid var(--co6C); border-radius: 50%;}
.speech-bubble {display: none; position: absolute; z-index: 1; width: 200px; border: 1px solid var(--co3A); background: var(--coFF); padding: 10px; border-radius: 2px; left: -1px; top: 33px;}
.speech-bubble::before {content: ''; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 10px; height: 10px; background: var(--co3A); position: absolute; top: -10px; left: 50%; transform: translateX(-50%);}
.speech-bubble::after {content: ''; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); width: 8px; height: 8px; background: var(--coFF); position: absolute; top: -7px; left: 50%; transform: translateX(-50%);}
.speech-bubble .price-list>li+li {padding-top: 4px;}
.speech-bubble .price-list>li:first-child {padding-bottom: 10px; border-bottom: 1px solid var(--coD8);}
.speech-bubble .price-list>li:nth-child(2) {padding-top: 10px;}
.sc-product .icon-circle-down:hover + .speech-bubble {display: block;}

/* ·Îµù ÆäÀÌÁö */
.server-estimate .sc-loading {display: none; width: 100%; height: 100dvh; position: fixed; left: 0; top: 0; background: var(--coFF) url("//image5.compuzone.co.kr/img/images/server_estimate/bg-loading.png"); z-index: 16;}
.server-estimate .sc-loading.on {display: block;}
.server-estimate .sc-loading h3 {color: #1C3EFC;}
.loading-obj {position: relative; width: 596px; height: 596px;}
.loading-obj>span {position: absolute; left: 50%;}
.loading-obj .circle1 {top: 50%; transform: translate(-50%, -50%); animation: rotate1 12s linear infinite;}
.loading-obj .circle2 {top: 50%; transform: translate(-50%, -50%); animation: rotate2 12s linear infinite;}
.loading-obj .circle3 {top: 50%; transform: translate(-50%, -50%); animation: rotate1 12s linear infinite;}
.loading-obj .objs {top: 40%; transform: translate(-50%, -50%) scale(0); animation: scale .5s .6s ease-in-out forwards, float2 2.5s 1s linear infinite;}
.loading-obj .obj-server {left: 50%; bottom: 70px; transform: translateX(-50%);}

@keyframes rotate1 {
    0% {transform: translate(-50%, -50%) rotate(0);}
    100% {transform: translate(-50%, -50%) rotate(360deg);}
}

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

@keyframes scale {
    0% {transform: translate(-50%, -50%) scale(0);}
    100% {transform: translate(-50%, -50%) scale(1);}
}

@keyframes float2 {
    0%, 100% {top: 40%}
    50% {top: 35%;}
}