/* optimize-pro page */
#pro-how .how-mark{position:absolute;left:0;width:1px;height:1px;scroll-snap-align:start;scroll-snap-stop:always}
#pro-how .how-grid{max-width:1360px;width:100%;margin:0 auto;display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:56px;align-items:center}
#pro-how .how-frame{height:calc(100svh - 64px);margin:-24px;border-radius:14px;overflow:hidden}
#pro-how .how-frame img{border-radius:14px;box-shadow:0 18px 48px rgba(26,63,89,.12)}
#pro-how .how-frame iframe{display:block;width:100%;height:100%;border:0}
#pro-how .how-list{position:relative;margin-top:36px;padding-left:30px}
#pro-how .how-track{position:absolute;left:5px;top:var(--t,24px);height:var(--l,0);width:2px;background:#DDE3EA;transition:height .45s cubic-bezier(.22,1,.36,1)}
#pro-how .how-progress{position:absolute;left:5px;top:var(--t,24px);width:2px;height:0;background:#FFC32D;transition:height .45s cubic-bezier(.22,1,.36,1)}
#pro-how .how-step .dot{z-index:1}
#pro-how .how-step{display:block;position:relative;padding:9px 0;text-decoration:none;color:#9AA6B4;cursor:pointer}
#pro-how .how-step .dot{position:absolute;left:-30px;top:15px;width:12px;height:12px;border-radius:50%;background:#F6F4EF;border:2px solid #C4CCD6;box-sizing:border-box;transition:all .3s ease}
#pro-how .how-step.done .dot{background:#FFC32D;border-color:#FFC32D}
#pro-how .how-step.on .dot{background:#1A3F59;border-color:#1A3F59;transform:scale(1.25)}
#pro-how .how-step .t{display:block;font-size:19px;font-weight:900;letter-spacing:-.01em;transition:color .3s ease}
#pro-how .how-step:hover .t{color:#4E5D70}
#pro-how .how-step.on .t{color:#1A3F59}
#pro-how .how-step .d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}
#pro-how .how-step .d>span{overflow:hidden;font-size:16px;line-height:1.55;color:#4E5D70;padding-top:0;transition:padding .45s ease}
#pro-how .how-step.on .d{grid-template-rows:1fr;opacity:1}
#pro-how .how-step.on .d>span{padding-top:6px}
@media (max-width:900px){#pro-how .how-grid{grid-template-columns:1fr;gap:20px;align-content:start}#pro-how .how-frame{height:50svh}#pro-how .how-list{margin-top:16px}#pro-how h2{font-size:26px !important}}
#pro-what .w-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#pro-what .w-card{border:1px solid #DDE3EA;border-radius:10px;padding:32px;display:flex;flex-direction:column;gap:14px}
#pro-what .w-ic{width:52px;height:52px;border-radius:10px;background:#F6F4EF;display:flex;align-items:center;justify-content:center}
#pro-what .w-title2{margin-top:6px;font-size:22px;font-weight:900;letter-spacing:-.01em}
#pro-what .w-card p{margin:0;font-size:16px;line-height:1.6;color:#4E5D70}
#pro-what .w-band{background:#F6F4EF;border-radius:10px;padding:28px 0;align-items:baseline;box-shadow:inset 5px 0 0 #FFC32D}
#pro-what .w-cell{padding:0 33px}
#pro-what .w-title{font-size:21px;line-height:1.3;font-weight:900;letter-spacing:-.01em}
#pro-what .w-text{grid-column:2 / 4;margin:0;font-size:16px;line-height:1.6;color:#4E5D70}
@media (max-width:900px){#pro-what .w-grid{grid-template-columns:1fr}#pro-what .w-text{grid-column:auto}#pro-what .w-band{gap:10px}}

#pro-how.how-measure .how-step .d,#pro-how.how-measure .how-step .d>span{transition:none !important}