@import url('sub.css'); 
.foot_wrap::after {display: none;}

/* DeepQ */
.deep_q_sect_kicker {margin: 0 0 5px;}
.deep_q_arch_prop_line {margin: 0 0 20px;}
.deep_q_arch_lead {margin: 0 0 60px;}
.deep_q_arch_steps {--deep-q-arch-step-w: 300px; --deep-q-arch-steps-sum: calc(var(--deep-q-arch-step-w) * 3); --deep-q-arch-arrow: 40px; --deep-q-arch-circle-outer: calc(var(--deep-q-arch-step-w) + 20px); --deep-q-arch-connector-mt: 16px; --deep-q-arch-connector-mb: 30px; --deep-q-arch-connector-line-h: 30px; --deep-q-arch-connector-dot-h: 27px; --deep-q-arch-step-inner-h: calc(var(--deep-q-arch-circle-outer) + var(--deep-q-arch-connector-mt) + var(--deep-q-arch-connector-line-h) + var(--deep-q-arch-connector-dot-h)); display: flex; justify-content: space-between; align-items: flex-start; position: relative;}
.deep_q_arch_step {position: relative; z-index: 1; width: var(--deep-q-arch-step-w); flex: 0 0 var(--deep-q-arch-step-w); display: flex; flex-direction: column; align-items: center;}
.deep_q_arch_step_inner {display: flex; flex-direction: column; align-items: center; width: 100%;}
.deep_q_arch_circle {position: relative; width: calc(var(--deep-q-arch-step-w) + 20px); aspect-ratio: 1/1; border-radius: 50%; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; box-sizing: border-box;}
.deep_q_arch_circle::before {content: ""; position: absolute; border-radius: 50%; background: var(--grayBg); z-index: -1; width: var(--deep-q-arch-step-w); aspect-ratio: 1/1; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: background 0.35s ease;}
.deep_q_arch_icon_pair {position: relative; width: 80px; aspect-ratio: 1 / 1; flex-shrink: 0; margin: 0 0 15px;}
.deep_q_arch_icon {position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.35s ease;}
.deep_q_arch_icon--active {opacity: 0;}
.deep_q_arch_badge {position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); padding: 5px 15px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; background: var(--black); border: 3px solid var(--grayBg); box-sizing: border-box; transition: background 0.35s ease, border-color 0.35s ease;}
.deep_q_arch_badge .fs12 {transition: color 0.35s ease;}
.deep_q_arch_badge .fs12 {color: var(--grayBg);}
.deep_q_arch_connector {display: flex; flex-direction: column; align-items: center; margin: var(--deep-q-arch-connector-mt) 0 var(--deep-q-arch-connector-mb);}
.deep_q_arch_connector_line {width: 1px; height: 30px; background: var(--border); flex-shrink: 0; transition: background 0.35s ease;}
.deep_q_arch_connector_dot {position: relative; width: 27px; height: 27px; border-radius: 50%; background: rgba(26, 26, 26, 0.1); flex-shrink: 0; transition: background 0.35s ease;}
.deep_q_arch_connector_dot_in {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--white); border: 3px solid var(--black); box-sizing: border-box; transition: border-color 0.35s ease;}
.deep_q_arch_sublist {display: flex; flex-direction: column; gap: 5px; align-items: center;}

.deep_q_arch_steps::before,
.deep_q_arch_steps::after {content: ""; position: absolute; z-index: 0; width: var(--deep-q-arch-arrow); aspect-ratio: 1/1; top: calc(var(--deep-q-arch-step-inner-h) / 2); left: calc(var(--deep-q-arch-step-w) + (100% - var(--deep-q-arch-steps-sum)) / 4 - var(--deep-q-arch-arrow) / 2); border-radius: 50%; background: var(--white) url('/product/img/deep-q-process-arrow.svg') center center / 23px auto no-repeat; transform: translateY(-50%); filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25)); pointer-events: none;}
.deep_q_arch_steps::after {left: calc(var(--deep-q-arch-step-w) * 2 + (100% - var(--deep-q-arch-steps-sum)) * 3 / 4 - var(--deep-q-arch-arrow) / 2);}

.deep_q_arch_step .deep_q_arch_circle_title {transition: color 0.35s ease;}


.deep_q_arch_step.is-active .deep_q_arch_circle::before {background: var(--main);}
.deep_q_arch_step.is-active .deep_q_arch_circle_title.black {color: var(--white);}
.deep_q_arch_step.is-active .deep_q_arch_icon--default {opacity: 0;}
.deep_q_arch_step.is-active .deep_q_arch_icon--active {opacity: 1;}
.deep_q_arch_step.is-active .deep_q_arch_badge {background: var(--white); border-color: var(--main);}
.deep_q_arch_step.is-active .deep_q_arch_badge .fs12 {color: var(--main);}
.deep_q_arch_step.is-active .deep_q_arch_connector_line {background: var(--main);}
.deep_q_arch_step.is-active .deep_q_arch_connector_dot {background: rgba(52, 48, 233, 0.2);}
.deep_q_arch_step.is-active .deep_q_arch_connector_dot_in {border-color: var(--main);}


.deep_q_lineup_title {margin: 0 0 30px;}
.deep_q_card {display: flex; flex-direction: column; padding: 40px; background: var(--grayBg); border-radius: 10px; box-sizing: border-box;}
.deep_q_card_icon {width: 80px; aspect-ratio: 1/1; flex-shrink: 0; margin: 0 0 30px;}
.deep_q_card_icon img {display: block; width: 100%; height: 100%;}
.deep_q_card_head {margin: 0 0 15px;}
.deep_q_card_cat {margin: 0 0 3px;}
.deep_q_card_desc {margin: 0 0 40px;}
.deep_q_card_list {display: flex; flex-direction: column; gap: 12px;}
.deep_q_card_list_item {position: relative; padding-left: 10px;}
.deep_q_card_list_dot {width: 3px; height: 3px; border-radius: 50%; background: var(--black); position: absolute; top:11px; left: 0;}
.deep_q_card_list_text {display: flex; flex-direction: column; gap: 2px;}
.deep_q_card_list_text strong {display: block;}

/* PROP */
.prop_section_kicker {margin:0 0 5px;}
.prop_section_title {margin:0 0 30px;}
.prop_tech_body .prop_section_title {margin:0 0 20px;}

.prop_workflow_list {gap:30px;}
.prop_workflow_item {padding:40px; background:var(--grayBg); border-radius:10px;}
.prop_workflow_icon_box {margin: 0 0 30px; display: flex;}
.prop_workflow_item h4 {margin:0 0 15px;}

.prop_tech_layout {display:flex; align-items:center; justify-content:space-between; gap:60px;}
.prop_tech_body {flex:1}
.prop_tech_desc {margin:0 0 40px;}
.prop_tech_list {display:flex; flex-direction:column; gap:10px;}
.prop_tech_item {display:flex; align-items:center; gap:20px;}
.prop_tech_icon_box {display:flex; width:100px; aspect-ratio: 1/1; flex-shrink: 0; align-items:center; justify-content:center; background:var(--grayBg); border-radius:10px;}
.prop_tech_texts {flex:1;}
.prop_tech_head {display:flex; align-items:flex-start; gap:12px; margin:0 0 5px; position: relative; padding-left: 49px;}
.prop_tech_head .sub_ol_badge {position: absolute; top: 4px; left: 0;}

.prop_tech_visual {flex: 1;}
.prop_tech_visual_img {display:block; max-width:100%; height:auto;}

/*******************************************************************************
    @media 1560px
*******************************************************************************/
@media all and (max-width:1560px){

}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
/* DeepQ */
.deep_q_arch_steps {--deep-q-arch-step-w: 260px; --deep-q-arch-arrow: 32px;}
.deep_q_arch_steps::before,
.deep_q_arch_steps::after {background-size: 18px auto;}
.deep_q_arch_icon_pair {width: 60px;}
.deep_q_arch_step .deep_q_arch_circle_title {font-size: 1.2rem;}

.deep_q_lineup_grid {grid-gap: 15px;}
.deep_q_card {padding: 25px;}
/* PROP */
.prop_section_title br {display: none;}

.prop_workflow_list {gap: 15px;}
.prop_workflow_item {padding: 30px;}

.prop_tech_layout {flex-direction: column-reverse; gap: 40px;}
.prop_tech_layout > * {width: 100%;}
.prop_tech_visual {display: flex; justify-content: center;}
}

/*******************************************************************************
    @media ~1100px
*******************************************************************************/
@media all and (max-width:1100px){
/* DeepQ */
.deep_q_arch_steps {--deep-q-arch-step-w: 230px;}
}


/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){
/* DeepQ */
.deep_q_arch_steps {--deep-q-arch-step-w: 180px; --deep-q-arch-connector-mt: 10px; --deep-q-arch-connector-mb: 15px;}
.deep_q_arch_step .deep_q_arch_circle_title {font-size: 1.1rem; line-height: 1.4;}
.deep_q_arch_circle {width: calc(var(--deep-q-arch-step-w) + 10px); padding: 0;}
.deep_q_arch_icon_pair {width: 50px; margin: 0 0 5px;}
.deep_q_arch_badge {padding: 3px 9px; border-width: 2px; bottom: -13px;}
.deep_q_arch_connector_dot {width: 20px; height: 20px;}
.deep_q_arch_connector_dot_in {width: 8px; height: 8px; border-width: 2px;}

.deep_q_lineup_grid {grid-gap: 10px;}
.deep_q_card {padding: 20px; border-radius: 5px;}
.deep_q_card_icon {width: 60px; margin: 0 0 15px;}
.deep_q_card_desc {margin: 0 0 25px;}
.deep_q_card_list_dot {top: 10px;}
.deep_q_card_head {margin: 0 0 8px;}

/* PROP */
.prop_workflow_list {grid-template-columns: repeat(2, 1fr);}
.prop_workflow_item {border-radius: 5px;}
.prop_workflow_item h4 {margin: 0 0 5px;}
.prop_workflow_icon_box {margin: 0 0 15px;}
.prop_workflow_icon_box img {width: 60px; height: auto;}

.prop_tech_icon_box {border-radius: 5px;}
}

/*******************************************************************************
    @media 768px
*******************************************************************************/
@media all and (max-width:768px){
.deep_q_arch_steps {flex-direction: column; gap: 80px;}
.deep_q_arch_step {width: 100%; flex: auto; flex-direction: row; gap: 20px;}
.deep_q_arch_step_inner {width: auto; flex-direction: row; flex-shrink: 0;}
.deep_q_arch_circle {width: 280px; padding: 20px 20px 30px 20px; border-radius: 5px; aspect-ratio: unset;}
.deep_q_arch_circle::before {width: 270px; border-radius: 5px; aspect-ratio: unset; height: calc(100% - 10px);}
.deep_q_arch_connector {margin: 0; flex-direction: row;}
.deep_q_arch_connector_line {width: 20px; height: 1px;}
.deep_q_arch_sublist {align-items: flex-start; flex:1}
.deep_q_arch_sublist .center {text-align: left !important;}
.deep_q_arch_sublist .fs18 {line-height: 1.4;}

.deep_q_arch_steps::before, .deep_q_arch_steps::after {display: none;}

.deep_q_arch_step::after {content: ""; position: absolute; z-index: 0; width: 32px; aspect-ratio: 1/1; bottom: -30px; left: 140px; border-radius: 50%; background: var(--white) url('/product/img/deep-q-process-arrow.svg') center center / 18px auto no-repeat; transform: translate(-50%, 100%) rotate(90deg); filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.25)); pointer-events: none;}

.deep_q_arch_step:last-child:after {display: none;}
}

/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){
/* DeepQ */
.deep_q_arch_circle {width: 200px;}
.deep_q_arch_circle::before {width: 190px;}
.deep_q_arch_badge .fs12 {font-size: 11px;}
.deep_q_arch_connector_line {width: 15px;}
.deep_q_arch_step::after {left: 100px;}

.deep_q_lineup_grid {grid-template-columns: 1fr;}
.deep_q_card {position: relative; padding: 15px;}
.deep_q_card_icon {width: 50px; margin: 0; position: absolute; bottom: 10px; right: 10px;}
.deep_q_card_list {padding-right: 70px; gap: 7px;}
.deep_q_card_list_text {gap: 0;}
.deep_q_card_cat {margin: 0;}
    
/* PROP */
.prop_section_title {margin: 0 0 20px;}

.prop_workflow_list {gap: 10px;}
.prop_workflow_item {padding: 20px;}
.prop_workflow_icon_box img {width: 50px;}

.prop_tech_body .prop_section_title {margin: 0 0 8px;}
.prop_tech_desc {margin: 0 0 20px;}
.prop_tech_head {padding-left: 38px;}
.prop_tech_head .sub_ol_badge {top: 2px;}
.prop_tech_item {gap: 15px;}
.prop_tech_icon_box {width: 80px;}
.prop_tech_icon_box img {width: 45px; height: auto;}
}
/*******************************************************************************
    @media ~480px
*******************************************************************************/
@media all and (max-width:480px){
/* DeepQ */
.deep_q_arch_circle {width: 150px;}
.deep_q_arch_circle::before {width: 140px;}

.deep_q_arch_step::after {left: 80px;}

/* PROP */
.prop_workflow_list {grid-template-columns: repeat(1, 1fr);}

.prop_tech_list {gap: 20px;}
.prop_tech_item  {align-items: flex-start;}
.prop_tech_head {padding-left: 0; flex-direction: column; align-items: flex-start; gap: 0;}
.prop_tech_head .sub_ol_badge {position: static;}
}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

}