:root {
    --co36: #3617CE;
    --inner-width: 1204px;
}

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;}

/* ÆäÀÌÁö Æ÷ÀÎÆ® »ö»ó */
.co36 {color: var(--co36) !important;}
.btn_36 {background: var(--co36); color: var(--coFF) !important;}

/* ÄÁÅÙÃ÷ °øÅë */
header.scroll, .right_fix_menu, .top_fix_head {display: none;}
.ai-store {position: relative; min-width: var(--inner-width); overflow: hidden;}
.ai-store * {line-height: 1.5; box-sizing: border-box;}
.ai-store .section {width: 100%; position: relative;}
.ai-store .section .inner {position: relative; display: flex; flex-direction: column; width: var(--inner-width); margin: 0 auto; height: 100%; padding: 80px 0;}

/* ÆäÀÌÁö ¾ÆÀÌÄÜ */
.next20 {display: inline-block; width: 20px; height: 20px; color: transparent; background-color: var(--co36); --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cscript xmlns=''/%3E%3Crect width='24' height='24' fill='none'/%3E%3Cpath d='M3157,138l8,9-9,9' transform='translate(-3148 -135)' fill='none' stroke='%233a3a3a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E"); -webkit-mask: var(--svg); mask: var(--svg);}
.star2 {display: inline-block; width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/ai_store/icon_fill_vivid_star.svg") center / contain no-repeat;}

/* sc-intro */
.sc-intro {min-height: 750px; background: var(--co00);}
.sc-intro .inner {z-index: 3; gap: 60px; align-items: center;}
.video-wrap {width: 1920px; height: 900px; position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.kv-video {isolation: isolate;}
.kv-video>video {width: 100%; height: 100%;}
.kv-video::before, .kv-video::after {content: ''; position: absolute; inset: 0; pointer-events: none;}
.kv-video::before {background: linear-gradient(0deg, rgba(255, 255, 255, 0.80) 0%, rgba(0, 0, 0, 0) 100%); mix-blend-mode: multiply; z-index: 1;}
.kv-video::after {background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(5, 10, 69, 0) 100%); z-index: 2;}

@media screen and (min-width: 1920px)  {
    .video-wrap::before {content: ''; display: block; position: absolute; left: -10%; top: 0; z-index: 1; width: 500px; height: 100%; background: linear-gradient(270deg, rgba(6, 9, 43, 0.00) 0%, #000 30%); }
    .video-wrap::after {content: ''; display: block; position: absolute; right: -10%; top: 0; z-index: 1; width: 500px; height: 100%; background: linear-gradient(90deg, rgba(6, 9, 43, 0.00) 0%, #000 30%);}
}

.title-wrap {display: flex; flex-direction: column; align-items: center; gap: 20px;}

/* ¹Ù·Î°¡±â ¸µÅ© */
.card-list {width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.card-list .card-item {width: 100%; min-height: 293px; position: relative; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: rgba(0,0,0,0.2); border-radius: 20px;}
.card-item::before {content: ''; inset: 0; position: absolute; left: 0; top: 0; padding: 1px; border-radius: 20px; border: 1px solid transparent; background: linear-gradient(180deg, rgba(54, 23, 206, 1), rgba(54, 23, 206, 0.2)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask-composite: exclude; -webkit-mask-composite: xor;}
.card-item .bg-box {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.2); z-index: 0; border-radius: 20px; overflow: hidden;}
.card-item .bg-box::before {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(26, 22, 72, 0.50) 0%, rgba(26, 22, 72, 0.50) 100%);}
.card-item .bg-box::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(71,38,233,0.8) 100%); background-blend-mode: screen;}
.card-item .icon-box {position: absolute; mix-blend-mode: luminosity; opacity: 0.4; filter: hue-rotate(320deg); transition: 0.65s;}
.card-item .icon-box>img {width: 100%;}
.card-item:hover .icon-box {mix-blend-mode: normal; opacity: 1;}
.card-item .icon1 {width: 194px; right: 10px; bottom: -10px;}
.card-item .icon2 {width: 212px; right: 5px; bottom: -10px;}
.card-item .icon3 {width: 212px; right: 0; bottom: -20px;}
.card-item .txt-box {position: relative; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 24px 30px;}
.card-item .card-head {position: relative; padding-bottom: 12px;}
.card-item .card-head::after {content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: linear-gradient(90deg, rgba(216, 216, 216, 1), rgba(54, 23, 206, 1));}
.card-item .next20 {transition: 0.6s ease-in-out;}
.card-item:hover .next20 {background-color: var(--coFF);}
.card-item .link-list {overflow: hidden;}
.card-item .link-list a {display: flex; position: relative; padding: 6px 4px;}
.card-item .link-list a > span {opacity: 0.8; transition: 0.6s ease-in-out;}
.card-item .link-list a::before {content: ''; display: block; position: absolute; width: 100%; height: 100%; left: -50%; top: 0; border-radius: 5px; background: linear-gradient(90deg, rgba(54, 23, 206, 0.00) 0%, #3617CE 100%); opacity: 0; transition: 0.6s ease-in-out; filter: blur(6px);}
.card-item .link-list a::after {content: ''; display: block; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 16px; height: 16px; background: url("//image5.compuzone.co.kr/img/images/ai_store/icon_fill_vivid_star.svg") center / contain no-repeat; opacity: 0; transition: 0.6s ease-in-out;}
.card-item .link-list a:hover > span, .card-item .link-list a:hover::before, .card-item .link-list a:hover::after {opacity: 1; filter: blur(0);}
.card-item .link-list a:hover::before {left: 0;}

/* ¹è³Ê ½½¶óÀ̵å */
.banner-wrap {position: relative; width: var(--inner-width);}
.banner-wrap .swiper-slide {width: 100%; height: 80px; border-radius: 10px; overflow: hidden;}
.banner-wrap .swiper-slide a {display: block; width:100%; height:100%; border-radius:10px; overflow: hidden;}
.banner-wrap .swiper-slide img {display: block; width:100%; height:100%;}
.banner-wrap .swiper-op12 {display: flex; align-items: center; justify-content: center; width:70px; height:26px; background:rgba(0, 0, 0, 0.4); border-radius: 13px; position:absolute; top:12px; right:12px; z-index: 1;}
.banner-wrap .swiper-op12 .swiper-pagination {color:var(--coD8);}
.banner-wrap .swiper-op12 .swiper-pagination-current {color: var(--coFF);}
.banner-wrap .swiper-op12 .left {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_prev_12.svg') center/12px no-repeat;} 
.banner-wrap .swiper-op12 .right {background:url('//image5.compuzone.co.kr/img/images/svg_icon/FFFFFF/icon_line_next_12.svg') center/12px no-repeat; } 

/* sc-consult */
.sc-consult {background: radial-gradient(96% 50% at 50% 100%, #160082 0%, #060A45 40%, #000 100%);}
.sc-consult .inner {width: 1920px;align-items: center; gap: 30px;}

@media screen and (min-width: 1920px)  {
    .sc-consult::before {content: ''; display: block; position: absolute; left: 0; top: 0; z-index: 1; width: 30%; height: 100%; background: linear-gradient(270deg, rgba(6, 9, 43, 0.00) 0%, #000 30%); }
    .sc-consult::after {content: ''; display: block; position: absolute; right: 0; top: 0; z-index: 1; width: 30%; height: 100%; background: linear-gradient(90deg, rgba(6, 9, 43, 0.00) 0%, #000 30%);}
}

/* »óÇ° ¿µ¿ª */
.section-wrap {background: var(--co00);}
.sc-product {background: var(--coFF);}
.sc-product:nth-of-type(1) {border-radius: 30px 30px 0 0;}
.sc-product:nth-of-type(even) {background: var(--coF9);}
.section-wrap .section-tit {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px;}
.section-tit .btn-box .btn_L {border-radius: 5px; overflow: hidden; transition: 0.4s ease-in-out;}
.section-tit .btn-box .icon-wrap {display: inline-block; width: 0; height: 16px; margin-left: 0; transition: width 0.35s ease, margin-left 0.35s ease;}
.section-tit .btn-box .icon-wrap > i {opacity: 0; transform: translateX(-16px); }
.section-tit .btn-box .btn_L:hover {background: linear-gradient(90deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.50) 100%), #3617CE;}
.section-tit .btn-box .btn_L:hover .icon-wrap {width: 16px; margin-left: 16px;}
.section-tit .btn-box .btn_L:hover .icon-wrap > i {animation: tranX 0.4s 0.2s ease-in-out forwards;}

@keyframes tranX {
    to {opacity: 1; transform: translateX(0);}
}

.sc-product .chipbtn {margin-bottom: 20px;}
.ai-store .pro_inner .probox .txt_box>p {height: 42px; line-height: 1.5;}
.ai-store .pro_inner .probox .price_line p {margin-bottom: 0;}
.sc-product:nth-of-type(even) .pro_inner .probox .img_box img {mix-blend-mode: normal;}