@charset "utf-8";

:root {
  --hero-bg-pc: url(/pages/technical/images/sub_visual_pc.png);
  --hero-bg-mo: url(/pages/technical/images/sub_visual_mo.png);
  --hero-gap: 2em;
}
.section_title{margin-bottom: .3em;}

.intro{background: #F3F9FF;}
.intro_graph{background: #fff;width: calc(1000/1280 * 100%); margin: 4rem auto 0;border-radius: 3rem;padding: 3rem 3.3rem;position: relative;}
.graph_badge{--size: 5.8em;width: var(--size);height: var(--size);background: var(--gradient-03);border-radius: 100%;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: .3em;font-size: clamp(13px, 2.2vw, 3rem);position: absolute;top: 35%;right: 10%;}
.icon_arrow{background: url(../images/icon_arrow.svg) no-repeat center / contain;width: .8em;height: 1em;animation: float 1.5s ease-in-out infinite;}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1rem); }
}
.tech .img_box{width: calc(1072/1280 * 100%); margin: 5rem auto 3rem;}
.tech_caption{background:var(--gradient-03);color: #fff;font-size: clamp(20px, 3vw,3rem);font-weight: 700;line-height: 1.4;border-radius: 2em;display: flex;justify-content: center;align-items: center;width:  max-content;margin:  0 auto;padding: .7em 1.3em;text-align: center;}

/* ── Design 섹션 ── */
.design { --gradient-type: var(--gradient-02); color: #fff; background-image: url(../images/bg_design_pc.png); background-repeat: no-repeat; background-size: cover; background-position: center top; }

/* ── Design Detail ── */
.design .design_detail {margin: 5rem auto 7rem;display: flex;justify-content: center;align-items: center;position: relative;font-size: clamp(18px,2.4vw,3.2rem);line-height: 1.2;}
.design_img {width: 5.4em;flex-shrink: 0;}
.design_list {display: grid;grid-template-columns: 1fr;gap: .8em;margin-left: -.8em;transform: translateY(1em);}
.design_item { display: flex; justify-content: flex-start; align-items: center; position: relative; }
.design_item:nth-of-type(2) {transform: translateY(-.6em);}
.design_line { width: 10rem; height: 2rem; flex-shrink: 0; }
.design_card {border-radius: .65em;border: .13em solid #fff;background: linear-gradient(180deg, rgba(255, 255, 255, 0.90) 0%, rgba(255, 255, 255, 0.80) 100%);padding: .76em 1em;text-wrap: balance;word-break: keep-all;}
.design_sub {color: var(--font-color);}
.design_text { --gradient-type: var(--gradient-03);  font-weight: 700; }

/* ── Design Item 원 ripple ── */
.design_item::after {content: "";position: absolute;right: calc(100%);top: 50%;transform: translate(50%, -50%);width: .6em;aspect-ratio: 1/1;border-radius: 50%;background: #fff;animation: ripple 1s ease-out infinite;}
.design_item:nth-of-type(1)::after { top: 100%; }
.design_item:nth-of-type(2)::after { top: 40%; }
.design_item:nth-of-type(1) .design_card {margin-top: -3.4em;}

.design_line { flex-shrink: 0; }
.design_line--steep {width: 5em;height: 3em;}
.design_line--slight {width: 6.35em;height: .8em;}
.design_line--straight {width: 3.8em;height: 0.1em;}

@keyframes ripple {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2); }
    100% { box-shadow: 0 0 0 .7rem rgba(255, 255, 255, 0.2); }
}

/* ── Design Banner ── */
.design .design_banner { width: calc(1200/1280 * 100%); margin: 0 auto; border-radius: .85em; border: .12em solid #4D82F5; background: linear-gradient(276deg, #0F32B4 15.39%, #165AED 97.95%); box-shadow: 12px 12px 48px 0 rgba(0, 12, 38, 0.48); display: grid; grid-template-columns: 1fr 9em; justify-content: space-between; align-items: center; font-size: clamp(24px, 3.4vw, 4.8rem); padding: .8em 1em; }
.design .design_banner_text { display: flex; flex-direction: column; gap: 2.4rem; }
.design .design_banner_title { line-height: 1.2;}
.design .design_banner_desc {font-size: clamp(18px, 3vw, .64em);line-height: 1.3;text-wrap: balance;word-break: keep-all;}
.design .btn_more { font-size: clamp(22px, 3vw, .64em); display: inline-flex; justify-content: center; align-items: center; gap: .1em; border-radius: 100px; border: .07em solid #fff; padding-block: .6em; width: 6.6em; }
.design .btn_more::after { content: ""; display: block; width: 1.2rem; height: 1.2rem; border-right: .3rem solid #fff; border-top: .3rem solid #fff; transform: rotate(45deg); }


/* ── 플란 임플란트 픽스쳐 팝업 ── */
.pop_implant_design{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2);z-index: 99999;}
.pop_implant_design.on { display: block; }
.pop_implant_design .pop_wrap{overflow: hidden;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background: #fff;overflow-y: scroll;height: 80vh;border-radius: 1em;padding: 1.6em 1.7em;font-size: clamp(20px, 3vw, 3.8rem);}
.pop_implant_design .pop_title{text-align: center;font-weight: 700;margin-bottom: 1.3em;}
.pop_implant_design .btn_close {position: absolute;width: 1em;height: 1em;display: block;top: .8em;right: .8em;}
.pop_implant_design .btn_close::before, .btn_close::after {content: "";position: absolute;top: 50%;left: 50%;width: 100%;height: .3rem;background: #777;}
.pop_implant_design .btn_close::before { transform: translate(-50%, -50%) rotate(45deg); }
.pop_implant_design .btn_close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.pop_implant_design .detail_con h3 {margin-bottom: 60px;}
.pop_implant_design .detail_con ul {width: 95%;margin: 0 auto;}
.pop_implant_design .detail_con ul li {display: flex;align-items: center;gap: 2em;margin-top: 1.8em;}
.pop_implant_design .detail_con ul li:first-child {margin-top: 0;}
.pop_implant_design .detail_con ul li p {font-weight: 600;font-size: .6em;line-height: 1.2;text-align: center;border-radius: 500px;background: rgba(21, 86, 232, 0.10);width: 7.5em;aspect-ratio: 1/1;display:  flex;justify-content: center;align-items: center;flex-direction: column;}
.pop_implant_design .detail_con ul li p i {display: block;}
.pop_implant_design .detail_con ul li p span {font-size: .7em;}
.pop_implant_design .detail_con ul .notice {color: #A53667;font-size: 14px;letter-spacing: -1px;padding-right: 2%;justify-content: flex-end;margin-top: 1.5em;}

/* PC (해상도 1058px ~ 1440px) */
@media screen and (max-width: 1440px) {
}

/* 태블릿 (768px ~ 1024px) */
@media screen and (max-width: 1024px) {
  /* ~9px */
  .intro .intro_graph{width: 100%;padding:2.8rem ;}
  .intro .graph_badge{transform: translateX(10%);}

  .tech .tech_caption{width: 100%;}

  .design .design_banner{grid-template-columns: 1fr;gap: 1.7em;}
  .design .design_banner_text{justify-content: center; align-items: center; text-align: center}
  .design .design_banner .img_box{width: 60%;margin: 0 auto;}
  
  .pop_implant_design .pop_wrap{width: 80%;}
  .pop_implant_design .detail_con ul li{flex-direction: column;gap: 1em;margin-top: 1em;}
  .pop_implant_design .detail_con ul li p{aspect-ratio: 3/1;flex-direction: row;gap: .2em;}
    
}
/* 모바일 (767px 이하) */
@media screen and (max-width: 767px) {
  /* 8px */
  .intro .intro_graph{padding:0;}
  .intro .graph_badge{transform: translate(12%, 10%);}

  .tech .img_box{width: 80%;margin-block: 4rem;}
  .tech .tech_caption{border-radius: 1.5rem;}

  .design .design{background-image: url(../images/bg_design_mo.png);}
  .design .design_banner{width: 100%;}
  .design_card{flex:1;}
  .design_list{transform: translateY(2em)}
  .design_line--steep {width: 3em;height: 3.7em;}
  .design_line--slight {width: 3em;height: .8em;}
  .design_line--straight {width: 3em;height: 0.1em;}

  .pop_implant_design .detail_con ul{width: 100%;}

}