@import url("../../../File/css/event.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

/* 基礎動畫 */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes shimmer-line{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@keyframes shimmer-btn{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse-glow{0%,100%{opacity:1;filter:brightness(1)}50%{opacity:.6;filter:brightness(1.5)}}

:root{
  --color-blue:#022c69;
  --color-secondary:#f97316;
  --color-secondary-rgb:249 115 22;
  --color-purple:#b52ca2;
  --color-pink:#d81d69;
  --linear-gradient1:linear-gradient(145deg, var(--color-blue), var(--color-pink));
  --font-family:microsoft yahei;
}

/* 主圖 */
body{font-family: "Noto Sans TC", sans-serif}
.hero-nav{background:linear-gradient(to right,rgba(220,38,38,.9),rgba(249,115,22,.9));backdrop-filter:blur(8px);box-shadow:0 4px 10px rgba(0,0,0,.1);padding:0 3rem .5rem;border-radius:2rem;text-align:center;font-size:clamp(1.2rem,3vw,1.7rem);letter-spacing:.1rem}
.hero-nav.nav-fixed{position:fixed;top:0;left:0;right:0;z-index:11;border-radius:0}
.hero-nav a{color:white;font-size:1.25rem;padding:0 1rem;text-decoration:none;transition:0.6s opacity ease-in-out;display:inline-block}
.hero-nav a:not(:last-child){border-right:1px solid rgba(255,255,255,.3);}
.hero-nav a:hover{transform:scale(1.03);}
.target-fix{position:relative;top:-6rem;display:block;visibility:hidden}
.hero-sec{display:flex;flex-direction:column;align-items:center;justify-content:center;background:url("../images/1508039_main_bg.jpg") center top / cover no-repeat;padding:.5rem 0 2rem;}
.hero-wrap{width:fit-content;max-width:1280px;padding:2rem;margin-left:3.5rem;display:flex;flex-direction:column;align-items:flex-start;gap:0.8rem;}
.hero-badge{font-size:clamp(1.2rem,3vw,2rem);color:white;background:linear-gradient(to right,transparent 0%,var(--color-blue) 10%,var(--color-pink) 90%,transparent 100%);display:inline-block;padding:.6rem 4.5rem;margin-left:-2rem}
.hero-title{font-size:clamp(3.6rem, 10vw, 7.3rem);font-weight:900;text-align:center;line-height:1.25;padding:1rem 0;color:var(--color-pink);letter-spacing:0.5rem;}
.hero-title span{color:var(--color-blue);background-image:linear-gradient(45deg,var(--color-blue) 44%,#42acc6 59%,var(--color-purple) 75%,var(--color-blue) 93%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.hero-sub{font-size:clamp(2rem, 3vw, 3.3rem);text-align:center;letter-spacing:0.4rem;color:var(--color-blue);}
.hero-sub span{color:var(--color-pink);}
.hero-sub span:last-child{color:var(--color-purple);}
.hero-steps{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:2rem;width:100%;max-width:fit-content;padding:1rem 0;margin:auto;}
.step-line-wrap{position:absolute;top:50%;left:1rem;right:1rem;height:.125rem;background-color:#1e3a8a;transform:translateY(-50%);z-index:0;overflow:hidden;}
.step-line-shimmer{position:absolute;top:0;left:0;width:40%;height:100%;background-image:linear-gradient(to right,transparent,rgba(96,165,250,.8),#ffffff,rgba(96,165,250,.8),transparent);box-shadow:0 0 8px rgba(96,165,250,.8);animation:shimmer-line 3s infinite linear;}
.step-item{position:relative;width:100%;text-align:center;border:1px solid var(--color-pink);background:white;border-radius:1rem;padding:.75rem 1.5rem;font-size:clamp(1.2rem, 2vw, 1.7rem);white-space:nowrap;z-index:1;}
.step-item.a{color:var(--color-secondary);border:1px solid var(--color-secondary);}
.step-item.b{color:var(--color-pink);border:1px solid var(--color-pink);}
.step-item.c{color:var(--color-purple);border:1px solid var(--color-purple);}
.step-item-hot{position:relative;width:100%;text-align:center;background-image:linear-gradient(to right,rgba(220,38,38,.9),rgba(249,115,22,.9));border:1px solid rgba(248,113,113,.5);box-shadow:0 0 20px rgba(239,68,68,.4);transition:all .3s ease;backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.step-hot-shimmer{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.4),rgba(255,255,255,0));animation:shimmer-btn 3s infinite ease-out 2s;}
.step-hot-icon{margin-right:.5rem;color:#fef08a;position:relative;z-index:1;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;}
.step-hot-text{font-weight:700;color:#ffffff;position:relative;z-index:1;padding:0 1.75rem;}

/* 為什麼越來越多人選擇轉學考！ */
.why-sec{padding:4rem 1rem 5rem;background-color:#eff6ff;position:relative;z-index:1;}
.why-wrap{width:100%;max-width:1180px;margin:0 auto;}
.why-head{text-align:center;margin-bottom:3rem;}
.why-title{font-size:clamp(1.7rem,5vw,3.2rem);font-weight:800;margin-bottom:1rem;color:var(--color-blue);word-break:keep-all;overflow-wrap:anywhere;}
.why-title span{color:var(--color-pink)}
.why-sub{font-size:clamp(1.3rem, 4vw, 2rem);}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;position:relative;align-items:stretch;}
.why-vs{display:flex;position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:4rem;height:4rem;background:var(--color-blue);border-radius:50%;align-items:center;justify-content:center;z-index:1;font-size:1.25rem;font-weight:900;color:white;box-shadow:0 20px 25px -5px rgba(0,0,0,.1);}
.why-card{background-color:rgb(236 236 236 / 50%);box-shadow:inset 0 2px 20px rgba(220,38,38,.05);border-radius:2rem;padding:2rem;display:flex;flex-direction:column;transition:transform .3s;color:gray;}
.why-card-red{background:white;border:2.5px solid var(--color-pink);}
.why-card-head{display:flex;align-items:center;gap:1rem;padding-bottom:1rem;justify-content:center;border-bottom:1px solid rgba(0,0,0,.5);}
.why-card-head-line-through{text-decoration:line-through;}
.why-card-head-red{border-bottom:1px solid rgba(127,29,29,.5);}
.why-card-title{font-size:clamp(1.3rem, 3vw, 2rem);font-weight:900;text-align:center;}
.why-card-title-red{color:#dc2626;letter-spacing:.05em;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;}
.why-card-sub{font-size:.875rem;font-weight:700;text-transform:uppercase;text-align:center;}
.why-card-sub-red{color:rgba(127,29,29,.8);}
.why-card-badge{background-color:#dc2626;color:#fff;padding:.125rem .5rem;border-radius:.25rem;margin-left:.5rem;font-size:1rem;}
.why-list li{padding:1rem 0 0;text-align:left;display:flex;flex-wrap:wrap;align-items:center;}
.why-list li::before{content:'\f00d';font-family:"Font Awesome 6 Free";font-weight:900;padding:0 1rem 0 0;font-size:1.35rem;color:gray;}
.why-card-red .why-list li::before{content:'\f00c';color:#dc2626;}
.why-list-red li strong{color:#f87171;}
.why-item-red{position:relative;padding-left:28px;margin-bottom:1.5rem;color:#94a3b8;}
.why-item-icon-red{position:absolute;left:0;top:4px;color:#ef4444;font-size:1.125rem;}
.why-item-title{display:block;margin-bottom:.25rem;font-size:1.25rem;}
.why-item-desc{font-size:1.15rem;}

/* GPA為什麼重要？ */
.gpa-sec, .support-sec{padding:4rem 1rem;position:relative;z-index:1;}
.gpa-sec::before,.support-sec::before{content:'';position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;background:#ffffff;background:linear-gradient(to right,#487ac3 0%,#edbce7 27%,#df93d4 73%,#487ac3 100%);z-index:-1}
.gpa-wrap,.support-container{width:100%;max-width:1180px;margin:0 auto;padding:1rem 2.5rem;position:relative;z-index:1;background:linear-gradient(to bottom,white 93%,rgb(230 230 230) 93%,white 100%);border-radius:2rem}
.gpa-wrap::before, .gpa-wrap::after{content:'';position:absolute;z-index:-1;opacity:0.25;overflow:hidden;}
.gpa-wrap::before{width:332px;height:295px;background:url("../images/1508039_tech_line_1.png") no-repeat;left:-5%;top:10%;}
.gpa-wrap::after{width:332px;height:301px;background:url("../images/1508039_tech_line_2.png") no-repeat;right:-5%;bottom:10%;}
.gpa-head{text-align:center;margin-bottom:3rem;}
.gpa-title{font-size:clamp(1.7rem, 7vw, 3.2rem);font-weight:900;margin-bottom:1rem;color:var(--color-blue);}
.gpa-title-hl{color:var(--color-pink);padding:0 0.5rem 0 0;font-size:130%}
.gpa-sub{font-size:clamp(1.1rem, 5vw, 2rem)}
.gpa-chart{position:relative;display:flex;align-items:center;}
.gpa-line-h, .gpa-line-vd{display:none;}
.gpa-line-vm{display:block;position:absolute;left:2rem;top:2.5rem;bottom:2.5rem;width:2px;background:#1e293b;}
.gpa-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;align-items:center;position:relative;}
.gpa-core-wrap{display:flex;justify-content:flex-start;z-index:2;margin-bottom:1.5rem;}
.gpa-core{width:clamp(7rem, 2vw ,8rem);height:clamp(7rem, 2vw ,8rem);border-radius:9999px;background:var(--linear-gradient1);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;box-shadow:0 0 30px rgba(59,130,246,.3);margin-left:.5rem;}
.gpa-core-ring{position:absolute;inset:-8px;border-radius:9999px;border:2px dashed rgba(59,130,246,.5);animation:spin-slow 15s linear infinite;}
.gpa-core-title{font-size:clamp(1.5rem, 3vw, 1.875rem);font-weight:900;color:transparent;background-clip:text;-webkit-background-clip:text;background-image:linear-gradient(to right,#fff 80%,#bfdbfe 100%);}
.gpa-core-label{color:#a1ffef;font-weight:700;margin-top:.25rem;letter-spacing:.1em;font-size:clamp(1rem, 2vw, 1.1rem);}
.gpa-core-glow{position:absolute;inset:0;border-radius:9999px;background:rgba(59,130,246,.2);animation:pulse-glow 3s cubic-bezier(.4,0,.6,1) infinite;z-index:-1;}
.gpa-node-trans, .gpa-node-grad, .gpa-node-pre, .gpa-node-prof{background:rgba(15,23,42,.6);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);padding:1.25rem;border-radius:1rem;transition:transform .2s;z-index:1;margin-left:4rem;position:relative;}
.gpa-node-trans:hover, .gpa-node-grad:hover, .gpa-node-pre:hover, .gpa-node-prof:hover{transform:translateY(-.25rem);}
.gpa-node-trans{border-left:4px solid #a855f7;background-color:#a855f730;}
.gpa-node-grad{border-left:4px solid #3b82f6;background-color:#3b82f630;}
.gpa-node-pre{border-left:4px solid #eab308;background-color:#eab30830;}
.gpa-node-prof{border-left:4px solid #22c55e;background-color:#22c55e30;}
.gpa-conn-h{display:block;position:absolute;left:-3rem;top:50%;width:2rem;height:2px;background:#334155;}
.gpa-dot-purple, .gpa-dot-blue, .gpa-dot-yellow, .gpa-dot-green{display:block;position:absolute;left:-3.5rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;border-radius:9999px;border:2px solid;background:#0f172a;}
.gpa-dot-purple{border-color:#a855f7;}
.gpa-dot-blue{border-color:#3b82f6;}
.gpa-dot-yellow{border-color:#eab308;}
.gpa-dot-green{border-color:#22c55e;}
.gpa-icon-purple, .gpa-icon-blue, .gpa-icon-yellow, .gpa-icon-green{width:2rem;height:2rem;border-radius:.25rem;display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;font-size:1rem;}
.gpa-icon-purple{background:rgba(168,85,247,.2);color:#c084fc;}
.gpa-icon-blue{background:rgba(59,130,246,.2);color:#60a5fa;}
.gpa-icon-yellow{background:rgba(234,179,8,.2);color:#facc15;}
.gpa-icon-green{background:rgba(34,197,94,.2);color:#4ade80;}
.gpa-node-title{font-weight:700;font-size:1.5rem;margin-bottom:.5rem;}
.gpa-node-title.a{color:#a855f7;}
.gpa-node-title.b{color:#3b82f6;}
.gpa-node-title.c{color:#eab308;}
.gpa-node-title.d{color:#22c55e;}
.gpa-node-desc{font-size:1.15rem;}
.gpa-btn{padding:2rem 0 0;text-align:center;}
.gpa-btn a{display:inline-block;margin:auto;}

/* 學長姐成功經驗 */
.story-sec{padding:4rem 1rem;background:#ffffff;background:radial-gradient(circle, rgba(255, 255, 255, 1) 70%, rgb(201 216 235) 90%);color:#0f172a;}
.story-container{width:100%;max-width:1180px;margin:0 auto;}
.story-header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;margin-bottom:3rem;}
.story-title{font-size:clamp(2.2rem, 5vw, 3.2rem);font-weight:900;margin-bottom:1rem;text-align:left;color:var(--color-blue);background-image:linear-gradient(45deg,var(--color-blue) 44%,#42acc6 59%,var(--color-purple) 75%,var(--color-blue) 93%);
  background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.story-sub{font-size:clamp(1.3rem, 4vw, 2rem);font-weight:500;}
.story-btn{padding:0.5rem 1.5rem;background:var(--linear-gradient1);color:#fff;font-weight:700;border-radius:9999px;display:flex;align-items:center;box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);text-decoration:none;transition:background-color 0.2s;}
.story-btn:hover{background-color:#2563eb;}
.icon-arrow, .icon-trophy{margin-left:0.5rem;}
.icon-trophy{margin-left:0;margin-right:0.25rem;}
.story-grid{display:flex;flex-wrap:wrap;gap:1rem;width:100%;justify-content:space-around;}
.story-card{background:linear-gradient(to bottom, white 97%, #d8d8d8 97%, transparent 100%);border-radius:0 0 1rem 1rem;width:calc(100% / 3 - 1rem);padding:1.5rem;border:1px solid #e2e8f0;transition:box-shadow .2s;}
.story-card:hover{box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);}
.story-card ul{display:flex;flex-wrap:wrap;}
.story-card ul li{border-radius:0.5rem;background-color:rgb(250 204 21 / 10%);border:1px solid #eab308;font-size:1.15rem;padding:.25rem 1rem;margin:.25rem .25rem auto;color:var(--color-blue);}
.story-badge{display:flex;flex-wrap:wrap;align-items:center;background:linear-gradient(to right,#facc15,#eab308);color:#fff;padding:.5rem 1.5rem;border-radius:1rem 0;font-size:1.25rem;justify-content:center;font-weight:700;;box-shadow:0 1px 2px rgba(0,0,0,.05);gap:0.5rem;width:fit-content;}
.story-desc{font-size:1rem;line-height:1.625;font-weight:500;text-align:justify;}
.story-desc a{color:#64748b;}
.story-author{border-bottom:1px solid #f1f5f9;padding:1rem 0;}
.story-author-dark{border-top:1px solid #1e293b;}
.story-author-light{border-top:1px solid #f1f5f9;}
.story-name,.story-name-light{font-weight:900;font-size:1.2rem;color:#0f172a;}
.story-school{color:#64748b;}
.story-tag-blue{color:#60a5fa;font-size:10px;font-weight:700;margin-bottom:0.5rem;text-transform:uppercase;}
.story-desc-dark{color:#cbd5e1;font-size:0.875rem;line-height:1.625;text-align:justify;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.story-name-dark{font-weight:700;font-size:0.875rem;color:#fff;}
.story-school-dark{font-size:10px;color:#94a3b8;}
.story-tag-green{color:#16a34a;font-size:10px;font-weight:700;margin-bottom:0.5rem;text-transform:uppercase;}
.story-desc-light{color:#475569;font-size:0.875rem;line-height:1.625;text-align:justify;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.story-school-light{font-size:10px;color:#64748b;}

/* 線上課程 + 線下服務 */
.support-container{padding:clamp(1rem, 5vw, 2.5rem);}
.support-head{text-align:center;margin-bottom:3rem}
.support-title{font-size:clamp(1.7rem, 5vw, 3.2rem);font-weight:900;margin-bottom:1rem;color:var(--color-blue);word-break:keep-all;overflow-wrap:anywhere;}
.support-title span,.price-title span{color:var(--color-pink);}
.support-title span:last-child{color:var(--color-purple);}
.support-sub{font-size:clamp(1.3rem, 3vw, 2rem);}
.support-list{position:relative;}
.timeline-line{position:absolute;top:0;bottom:0;left:50%;width:4px;background:linear-gradient(to bottom,#0ea5e9,#f97316,#8b5cf6);transform:translateX(-50%);border-radius:4px;opacity:.25;z-index:1}
.item-wrapper{display:flex;width:100%;position:relative;z-index:2;transition:z-index .3s ease}
.item-wrapper:hover{z-index:10}
.item-wrapper-left{width:50%;display:flex;justify-content:flex-end;padding-right:2rem;position:relative}
.item-wrapper-left2{margin-top:-10rem;}
.item-wrapper-right{width:50%;display:flex;justify-content:flex-start;padding-left:2rem;margin-top:4rem;position:relative}
.card-synergy,.card-online,.card-offline{width:100%;max-width:500px;background:white;border-radius:1rem;box-shadow:0 10px 30px rgba(0,0,0,.06);transition:transform .4s cubic-bezier(.175,.885,.32,1.275),box-shadow .4s ease;overflow:hidden;border-top:4px solid;position:relative;margin:0 auto auto;}
.card-synergy{border-top-color:#8b5cf6}
.card-synergy:hover,.card-online:hover,.card-offline:hover{transform:translateY(-8px);box-shadow:0 20px 45px rgba(0,0,0,.12)}
.img-box{width:100%;height:auto;overflow:hidden;position:relative;box-shadow:inset 0 -4px 10px rgba(0,0,0,.03)}
.img-fluid{width:100%;height:auto;object-fit:cover;transition:transform .6s ease}
.card-synergy:hover .img-fluid,.card-online:hover .img-fluid,.card-offline:hover .img-fluid{transform:scale(1.05)}
.content-box{padding:1.5rem 2rem 2.5rem;}
.title-synergy{font-size:1.5rem;font-weight:800;margin:0 0 1rem 0}
.link-synergy{transition:color .3s ease;color:var(--color-blue);}
.link-synergy:hover{color:#8b5cf6;text-decoration:underline}
.link-offline{color:var(--color-blue);}
.desc-text{font-size:1.15rem;line-height:1.7;margin:0}
.list-bullet{list-style:none;text-align:left;margin:0;padding:0}
.list-item{position:relative;font-size:1.15rem;padding-left:1.5rem;}
.list-item:last-child{margin-bottom:0}
.list-item::before{content:"•";position:absolute;left:0;color:#8b5cf6;font-weight:bold;font-size:1.2rem}
.link-bold{font-weight:700;;transition:color .2s;color:var(--color-pink);}
.link-bold:hover{color:#8b5cf6}
.marker-synergy,.marker-online,.marker-offline{position:absolute;top:100px;width:50px;height:50px;z-index:5;display:flex;align-items:center;justify-content:center}
.item-wrapper-left .marker-synergy,.item-wrapper-left .marker-online,.item-wrapper-left .marker-offline{right:-25px}
.item-wrapper-right .marker-synergy,.item-wrapper-right .marker-online,.item-wrapper-right .marker-offline{left:-25px}
.diamond-synergy,.diamond-online,.diamond-offline{width:40px;height:40px;background-color:white;border:4px solid;border-radius:10px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}
.diamond-synergy{border-color:#8b5cf6}
.text-synergy,.text-online,.text-offline{transform:rotate(-45deg);font-weight:900;font-size:1.1rem;transition:color .3s ease}
.text-synergy{color:#8b5cf6}
.item-wrapper-left:hover .diamond-synergy,.item-wrapper-right:hover .diamond-synergy{background:#8b5cf6;transform:rotate(45deg) scale(1.15);box-shadow:0 0 15px rgba(139,92,246,.4)}
.item-wrapper-left:hover .text-synergy,.item-wrapper-right:hover .text-synergy,.item-wrapper-left:hover .text-online,.item-wrapper-right:hover .text-online,.item-wrapper-left:hover .text-offline,.item-wrapper-right:hover .text-offline{color:white}
.guide-synergy,.guide-online,.guide-offline{position:absolute;top:124px;width:60px;height:2px;opacity:.3;z-index:-1}
.guide-synergy{background:#8b5cf6}
.item-wrapper-left .guide-synergy,.item-wrapper-left .guide-online,.item-wrapper-left .guide-offline{right:0}
.item-wrapper-right .guide-synergy,.item-wrapper-right .guide-online,.item-wrapper-right .guide-offline{left:0}

/* 高點幫你提升GPA+轉學考 */
.price-sec{background-color:#eff6ff;padding:4rem 1rem;}
.price-container{width:100%;max-width:1180px;margin:0 auto;}
.price-header{text-align:center;}
.price-title{font-size:clamp(1.7rem, 5vw, 3rem);font-weight:900;color:#1e3a8a;margin-bottom:0.5rem;}
.price-sub{font-size:clamp(1.3rem, 4vw, 2rem);font-weight:700;letter-spacing:0.25rem;}
.price-subjects{display:flex;flex-wrap:wrap;justify-content:center;}
.price-row{margin:2rem;text-align:left;}
.price-label{font-weight:700;color:#1e3a8a;display:flex;align-items:center;font-size:1.5rem;}
.price-icon{color:#3b82f6;margin-right:0.5rem;}
.price-val{color:#334155;font-weight:500;font-size:1.25rem;}
.price-offer-head{text-align:center;margin-bottom:1rem;}
.price-offer-title{font-size:1.5rem;font-weight:600;background:#ef4444;color:#fff;padding:0.25rem 1rem;border-radius:0.25rem;width:fit-content;margin:auto}
.price-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-bottom:2.5rem;}
.price-card{border:1px solid #e2e8f0;border-radius:1rem;padding:2rem;display:flex;flex-direction:column;align-items:center;text-align:center;background-color:white;}
.price-card-label{color:#475569;font-weight:700;margin-bottom:0.5rem;font-size:1.5rem;}
.price-card-val{font-size:3rem;font-weight:900;color:#ef4444;;margin-bottom:1rem;}
.price-card-desc{font-size:1.25rem;color:#64748b;}
.price-actions{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;}
.price-btn-icon{margin-right:0.5rem;}
.price-btn-color{width:100%;padding:0.75rem 2rem;border-radius:9999px;background:linear-gradient(to right, #fb923c, #ef4444);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;transition:0.2s;text-decoration:none;}
.price-btn-color:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,0.1);transform:translateY(-0.25rem);}
.price-btn-solid{width:100%;padding:0.75rem 2rem;border-radius:9999px;background:#1e3a8a;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;transition:0.2s;text-decoration:none;}
.price-btn-solid:hover{background:#1e40af;}
.price-sec{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 20%,rgba(59,130,246,.08),transparent 28%),radial-gradient(circle at 88% 78%,rgba(219,39,119,.06),transparent 26%),linear-gradient(135deg,#f4f8ff 0%,#edf5ff 100%)}
.price-subjects{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin:2rem auto 2.25rem;}
.price-row{min-width:300px;margin:0;padding:1rem 1.4rem;text-align:left;border:1px solid rgba(59,130,246,.15);border-radius:.85rem;background:rgba(255,255,255,.68);box-shadow:0 8px 22px rgba(30,58,138,.05),inset 0 1px 0 rgba(255,255,255,.8);backdrop-filter:blur(5px)}
.price-label{gap:.35rem;margin-bottom:.3rem}
.price-icon{color:#3b82f6;margin-right:.25rem}
.price-val{line-height:1.65}
.price-offer-head{position:relative;z-index:2;margin-bottom:1.6rem}
.price-offer-title{padding:.45rem 1.4rem;border-radius:999px;background:linear-gradient(135deg,#f43f5e,#ef4444);box-shadow:0 7px 18px rgba(239,68,68,.2)}
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1.5rem;margin-bottom:2.8rem}
.price-card{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1.58 / 1;text-align:left;min-height:250px;padding:1.5rem 1.7rem;display:flex;flex-direction:column;align-items:flex-start;color:#fff;background:linear-gradient(15deg,rgba(255,255,255,.12) 0%,transparent 38%),linear-gradient(170deg,#7953e9 0%,#2f85b0 48%,#8017b6 135%);box-shadow:0 20px 42px rgba(76,29,149,.23),inset 0 1px 0 rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.65);border-radius:1.4rem;transition:transform .3s ease,box-shadow .3s ease;overflow:hidden}
.price-card::after{position:absolute;content:'';background:url("../images/1508039_tech_line_1.png");width:332px;height:295px;top:0;right:-1rem;opacity:.4}
.price-card > *{position:relative;z-index:2;}
.price-card-label{width:100%;margin:0 0 .25rem;color:inherit;font-size:clamp(1.3rem, 4vw, 2rem);font-weight:400;letter-spacing:.06em}
.price-card-val{align-self:flex-end;margin:-2.2rem 0 .6rem;color:#ffd76a;text-shadow:0 4px 18px rgba(255,215,106,.22),0 1px 0 rgba(0,0,0,.15);font-size:clamp(1.5rem,6vw,3.9rem);font-weight:900;line-height:1;letter-spacing:.05rem;text-shadow:0 5px 15px rgba(239,68,68,.14)}
.price-card-desc{width:100%;margin-top:auto;color:rgba(255, 255, 255, 0.82);font-size:1.1rem;line-height:1.55;letter-spacing:.02em}
small{font-size:0.6em;}

/* hover 微微浮起 */
@media (hover:hover){
  .price-card:hover{transform:translateY(-7px) rotateX(1deg);box-shadow:0 26px 52px rgba(15,23,42,.22),inset 0 1px 0 rgba(255,255,255,.45)}
  .price-card:nth-child(2):hover{transform:translateY(-12px) rotateX(1deg)}
}
@media (min-width:640px){
  .price-actions{flex-direction:row;}
  .price-btn-line, .price-btn-color, .price-btn-solid{width:auto;}
}
@media (min-width:768px){
  .hero-process-row{flex-direction:row;gap:2rem;}
  .price-label{justify-content:flex-start;}
  .price-grid{grid-template-columns:repeat(3, 1fr);}
  .price-card{aspect-ratio:auto;}
  .price-card-val{margin:0.2rem 0 0.6rem;}
}
@media (min-width:1024px){
  .gpa-line-h{display:block;position:absolute;top:50%;left:2.5rem;right:2.5rem;height:2px;background:#3b82f6;transform:translateY(-50%);}
  .gpa-line-vd{display:block;position:absolute;left:50%;top:2.5rem;bottom:2.5rem;width:2px;background:#3b82f6;transform:translateX(-50%);}
  .gpa-line-vm{display:none;}
  .gpa-grid{grid-template-columns:repeat(3,1fr);gap:2rem;}
  .gpa-core-wrap{grid-column:2;grid-row:2;justify-content:center;margin-bottom:0;}
  .gpa-core{width:12rem;height:12rem;margin-left:0;}
  .gpa-core-ring{inset:-10px;}
  .gpa-core-title{font-size:3rem;}
  .gpa-node-trans, .gpa-node-grad, .gpa-node-pre, .gpa-node-prof{padding:1.5rem;margin-left:0;}
  .gpa-node-trans:hover, .gpa-node-grad:hover, .gpa-node-pre:hover, .gpa-node-prof:hover{transform:scale(1.05) translateY(-.25rem);}
  .gpa-node-trans{grid-column:1;grid-row:2;}
  .gpa-node-grad{grid-column:2;grid-row:1;border-left:none;border-top:4px solid #3b82f6;}
  .gpa-node-pre{grid-column:3;grid-row:2;border-left:none;border-right:4px solid #eab308;}
  .gpa-node-prof{grid-column:2;grid-row:3;border-left:none;border-bottom:4px solid #22c55e;}
  .gpa-conn-h{display:none;}
  .gpa-dot-purple, .gpa-dot-blue, .gpa-dot-yellow, .gpa-dot-green{display:none;}
  .gpa-icon-purple, .gpa-icon-blue, .gpa-icon-yellow, .gpa-icon-green{width:2.5rem;height:2.5rem;margin-bottom:1rem;font-size:1.25rem;}    
}
@media (max-width:1179px){
  .step-item{padding:.5rem .75rem;font-size:1.25rem;}
  .story-card ul li{font-size:1rem;padding:.25rem .5rem;}
}
@media (max-width:1023px){
  .hero-sec{/*margin-top:1rem*/padding:.5rem 0;}
  .hero-wrap{margin:auto;}
  .hero-nav{padding:0rem .5rem .5rem;margin-top:1rem}
  .nav-fixed{margin-top:0;}
  .hero-steps{gap:1.25rem;}
  .why-grid{gap:1rem;}
  .story-card{width:100%;}
  .gpa-head{position:absolute;right:1.2rem;}
}
@media (max-width:767px){
  .hero-nav a:not(:last-child){border-right:none;}
  .hero-wrap{margin-left:0;padding:2rem 1rem;}
  .hero-sec{background:url("../images/1508039_main_m_bg.jpg") no-repeat center center/cover;}
  @media screen and (max-width:560px){.hero-sec{background:url("../images/1508039_main_m_bg2.jpg") no-repeat center center/cover;}}
  .price-grid{grid-template-columns:1fr;gap:1.25rem;}
  .price-card{width:100%;max-width:430px;min-height:240px;margin:auto;}
  .price-card:nth-child(2){transform:none;}
  .price-card-val{font-size:4rem;}
  .why-sec,.story-sec,.support-sec,.price-sec{padding:2rem 1rem;}
  .gpa-sec{padding:2rem 0;}
  .hero-badge{font-size:1.15rem;margin-left:0;padding:.5rem 1.5rem;}
  .hero-sub{word-break:keep-all;overflow-wrap:anywhere;}
  .title-synergy{font-size:1.3rem;}
}
@media (max-width:767px) and (orientation:portrait){
  .hero-nav{padding:0.15rem 0.75rem;}
  .hero-nav a{font-size:.9rem;padding:0;margin:auto;}
  .hero-nav a:last-of-type{display:none;}
  .hero-steps{flex-direction:column;gap:1.5rem;}
  .hero-title{padding:0;margin:auto;}
  .hero-title span{display:block;}
  .step-line-wrap{left:0;right:0;width:.125rem;height:80%;margin:auto;}
  .step-line-shimmer{width:100%;height:40%;background-image:linear-gradient(to bottom,transparent,rgba(96,165,250,.8),#ffffff,rgba(96,165,250,.8),transparent);animation:shimmer-line-vertical 3s infinite linear}
  @keyframes shimmer-line-vertical{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}
  .why-sec{padding:2rem 0;}
  .why-head,.support-head{margin-bottom:2rem;}
  .gpa-title-hl{display:none;}
  .why-item-title{font-size:1rem;}
  .why-list li::before{padding:0 .25rem 0 0;font-size:1.2rem;}
  .why-item-desc{font-size:1rem}
  .why-card{transform:rotate(0deg);padding:1rem 0.5em;}
  .why-card-badge{margin-left:0;position:absolute;top:-1rem;}
  .why-vs{top:1rem;width:3rem;height:3rem;}
  .why-grid{gap:0.25rem}
  .desc-text{font-size:1rem;line-height:1.5}
  .list-item{font-size:1rem;}
  .gpa-wrap{padding:1rem;}
  .gpa-core-wrap{margin-bottom:0;}
  .story-header{flex-direction:column;margin-bottom:1rem;align-items:center;}
  .story-btn{margin:1rem auto;}
  .item-wrapper{flex-direction:column;margin-bottom:0}    
  .item-wrapper-left,.item-wrapper-right{width:100%;padding:0 0 0 40px;margin-top:0;margin-bottom:1rem;justify-content:flex-start}
  .diamond-synergy,.diamond-online,.diamond-offline{width:35px;height:35px;}
  .text-synergy{font-size:1rem;}
  .timeline-line{left:7.5px;transform:none}
  .item-wrapper-left .marker-synergy,.item-wrapper-left .marker-online,.item-wrapper-left .marker-synergy,.item-wrapper-right .marker-synergy,.item-wrapper-right .marker-synergy,.item-wrapper-right .marker-synergy{left:-15px;right:auto}
  .item-wrapper-left .guide-synergy, .item-wrapper-left .guide-online, .item-wrapper-left .guide-offline{right:auto;left:0;}
  .price-subjects{justify-content:flex-start;width:min-content;gap:0;margin:1rem auto;}
  .price-row{margin:0.5rem;}
  .content-box{padding:.5rem 1.25rem 1.25rem}
}