/* 功课网 · 翼飞教育业务落地页样式
   兼容版：不使用 CSS 变量 / grid / clamp()，全部为十六进制色值与 float 布局，
   可兼容 IE8+ 及老版国产浏览器（360/QQ 兼容模式），现代浏览器观感保持一致。 */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  color:#14263C;background:#FFFFFF;
  font:16px/1.75 "Microsoft YaHei","PingFang SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;border:0}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:.2px}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
.wrap{width:92%;max-width:1160px;margin:0 auto}
.wrap:after{content:"";display:block;clear:both}
.wrap.narrow{max-width:900px}
svg{width:16px;height:16px;vertical-align:-3px}

/* ---------- header ---------- */
.site-header{position:relative;z-index:50;background:#FFFFFF;border-bottom:1px solid #E3EAF3}
.hd-inner{position:relative;height:64px}
.hd-inner:after{content:"";display:block;clear:both}
.logo{float:left;padding-top:16px}
.logo-mark{font-size:21px;font-weight:800;letter-spacing:1px;color:#071A33}
.logo-sub{font-size:12px;color:#5B6E85;letter-spacing:.5px;margin-left:10px}
.hd-nav{float:right;margin-right:210px;padding-top:21px;font-size:14.5px;color:#3C5169}
.hd-nav a{display:inline-block;margin-left:22px;padding-bottom:4px}
.hd-nav a:hover{color:#0B5FD0}
.hd-tel{position:absolute;right:0;top:0;height:64px;line-height:64px;padding-left:22px;border-left:1px solid #E3EAF3;font-weight:700;color:#0B5FD0;font-size:15px}
.hd-tel svg{margin-right:6px}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background-color:#0A2B52;background-position:center center;background-size:cover;background-repeat:no-repeat;color:#FFFFFF}
.hero-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:#061529;opacity:.58;filter:alpha(opacity=58);z-index:1}
.hero-inner{position:relative;z-index:2;padding:46px 0 54px}
.hero-inner:after{content:"";display:block;clear:both}
.hero-main{float:left;width:64%}
.crumb{font-size:12.5px;color:#A8BDD6;margin-bottom:16px}
.crumb a:hover{color:#FFFFFF}
.crumb i{font-style:normal;color:#8FA5BE;margin:0 8px}
.hero-kicker{display:inline-block;font-size:13px;letter-spacing:2px;color:#E4B463;border:1px solid #A5813F;padding:3px 14px;margin-bottom:16px}
.hero h1{font-size:40px;line-height:1.3;letter-spacing:.5px;color:#FFFFFF}
.hero-sub{margin-top:14px;font-size:17px;color:#DCE8F6}
.hero-lead{margin-top:18px;font-size:15.5px;line-height:1.85;color:#B7C9DE;max-width:640px}
.badges{margin-top:22px}
.badge{display:inline-block;font-size:13px;padding:5px 14px;margin:0 10px 10px 0;background:#16365E;border:1px solid #35567F;color:#EAF2FA}
.hero-cta{margin-top:18px}
.btn{display:inline-block;padding:13px 24px;margin:0 12px 12px 0;font-size:15px;font-weight:700;border:1px solid #C08A3E;background:#C08A3E;color:#37230A}
.btn svg{margin-right:8px}
.btn-gold{background:#C08A3E;border-color:#C08A3E;color:#37230A}
.btn-gold:hover{background:#D5A055;border-color:#D5A055}
.btn-ghost{background:transparent;border-color:#7E97B5;color:#FFFFFF}
.btn-ghost:hover{background:#16365E}
.btn-blue{background:#0B5FD0;border-color:#0B5FD0;color:#FFFFFF}
.btn-lg{padding:15px 30px;font-size:16px}

/* 速览卡 */
.hero-card{float:right;width:31.5%;background:#12325A;border:1px solid #35567F;padding:22px}
.hc-title{font-size:13px;letter-spacing:2px;color:#E4B463;padding-bottom:12px;border-bottom:1px solid #35567F}
.hero-card dl{margin:0;padding:6px 0 0}
.hero-card .fact{padding:11px 0;border-bottom:1px dashed #35567F;overflow:hidden}
.hero-card .fact dt{float:left;font-size:12.5px;color:#A8BDD6}
.hero-card .fact dd{float:right;margin:0;max-width:66%;font-size:13.5px;line-height:1.5;text-align:right;color:#EAF2FA}
.hc-foot{margin-top:14px;padding-top:14px;border-top:1px solid #35567F;font-size:12.5px;line-height:1.7;color:#9FB3CA}

/* ---------- section ---------- */
.sec{padding:64px 0}
.sec-alt{background:#F5F8FC}
.sec-dark{background:#08203D;color:#FFFFFF}
.sec-head{margin-bottom:34px}
.sec-no{display:block;margin-bottom:6px;font-size:12px;letter-spacing:3px;font-weight:700;color:#C08A3E}
.sec-dark .sec-no{color:#E4B463}
.sec-head h2{font-size:28px;line-height:1.4;color:#071A33}
.sec-dark .sec-head h2{color:#FFFFFF}
.sec-sub{margin-top:12px;max-width:760px;font-size:15px;color:#5B6E85}
.sec-dark .sec-sub{color:#B7C9DE}
.sec-head:after{content:"";display:block;width:54px;height:3px;margin-top:16px;background:#C08A3E}

/* 网格（float 实现） */
.grid{margin-right:-2%}
.grid:after{content:"";display:block;clear:both}
.grid>*{float:left;width:23%;margin:0 2% 20px 0}
.grid-2>*{width:48%}
.grid-3>*{width:31.33%}
.grid-4>*{width:23%}

/* pains */
.pain{background:#FFFFFF;border:1px solid #E3EAF3;padding:24px 22px}
.pain:hover{border-color:#CFE0F5;box-shadow:0 10px 30px rgba(11,46,87,.10)}
.pain h3{margin-bottom:10px;font-size:16px;line-height:1.5;color:#071A33}
.pain p{font-size:14px;line-height:1.8;color:#5B6E85}

/* matrix */
.mx{background:#FFFFFF;border:1px solid #E3EAF3;border-top:3px solid #0B5FD0;padding:26px 24px}
.mx-tag{display:inline-block;padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:.5px;color:#0B5FD0;background:#EAF2FD}
.mx h3{margin:12px 0 8px;font-size:18px;color:#071A33}
.mx>p{margin-bottom:14px;font-size:13.5px;color:#5B6E85}
.mx ul{border-top:1px dashed #E3EAF3;padding-top:14px}
.mx li{padding-left:16px;font-size:14px;line-height:2;color:#2C4058;position:relative}
.mx li:before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:#C08A3E}

/* table */
.table-wrap{overflow-x:auto;background:#FFFFFF;border:1px solid #E3EAF3}
.tbl{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.tbl th{padding:14px 18px;text-align:left;font-weight:700;color:#071A33;background:#EDF3FB;border-bottom:1px solid #E3EAF3;white-space:nowrap}
.tbl td{padding:14px 18px;color:#38506A;border-bottom:1px solid #F0F4FA;vertical-align:top}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:nth-child(even) td{background:#FBFDFF}
.td-key{font-weight:700;color:#071A33;white-space:nowrap}

/* flow */
.flow{margin-right:-2%}
.flow:after{content:"";display:block;clear:both}
.step{float:left;width:31.33%;margin:0 2% 18px 0;padding:26px 24px;background:#FFFFFF;border:1px solid #E3EAF3}
.step-no{display:inline-block;margin-bottom:14px;padding:2px 10px;font-size:13px;font-weight:800;letter-spacing:1px;color:#FFFFFF;background:#0B5FD0}
.step h3{margin-bottom:8px;font-size:16.5px;color:#071A33}
.step p{font-size:14px;line-height:1.8;color:#5B6E85}

/* advantages */
.adv-grid{margin-right:-4%}
.adv-grid:after{content:"";display:block;clear:both}
.adv{float:left;width:46%;margin:0 4% 0 0;padding:20px 0 20px 62px;position:relative;border-bottom:1px solid #23405F}
.adv-no{position:absolute;left:0;top:22px;font-size:26px;font-weight:800;line-height:1;color:#E4B463;font-family:Georgia,serif}
.adv h3{margin-bottom:8px;font-size:17px;color:#FFFFFF}
.adv p{font-size:14px;line-height:1.8;color:#B7C9DE}

/* cases */
.case{background:#FFFFFF;border:1px solid #E3EAF3;padding:24px}
.case:hover{box-shadow:0 10px 30px rgba(11,46,87,.10)}
.case-tag{display:inline-block;padding:2px 10px;font-size:12px;font-weight:700;color:#C08A3E;background:#FBF3E6}
.case h3{margin:12px 0 10px;font-size:16px;line-height:1.55;color:#071A33}
.case p{font-size:13.5px;line-height:1.8;color:#5B6E85}
.case-res{margin-top:16px;padding-top:14px;border-top:1px dashed #E3EAF3;font-size:13.5px;line-height:1.75;color:#2C4058}
.case-res b{display:inline-block;margin-right:8px;padding:0 8px;font-size:12px;color:#0B5FD0;background:#EAF2FD}
.case-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:#0B5FD0}
.case-link:hover{text-decoration:underline}
.note{margin-top:22px;font-size:13px;color:#5B6E85}

/* resources */
.res{background:#FFFFFF;border:1px solid #E3EAF3;border-left:3px solid #0B5FD0;padding:20px 22px}
.res h3{margin-bottom:8px;font-size:15.5px;color:#071A33}
.res p{font-size:14px;line-height:1.8;color:#5B6E85}

/* faq */
.faqs{margin:0;padding:0}
.faq{background:#FFFFFF;border:1px solid #E3EAF3;margin-bottom:12px}
.faq summary{display:block;position:relative;padding:18px 58px 18px 22px;font-size:15.5px;font-weight:700;color:#071A33;cursor:pointer;outline:none;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"";position:absolute;right:24px;top:24px;width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #0B5FD0}
.faq[open] summary:before{top:22px;border-top:0;border-bottom:7px solid #0B5FD0}
.faq-a{padding:0 22px 20px;font-size:14.5px;line-height:1.85;color:#5B6E85}

/* cta band */
.cta-band{background:#0C3F7D;color:#FFFFFF;padding:48px 0}
.cta-inner:after{content:"";display:block;clear:both}
.cta-inner>div:first-child{float:left;width:62%}
.cta-inner h2{margin-bottom:10px;font-size:25px;color:#FFFFFF}
.cta-inner p{max-width:620px;font-size:14.5px;line-height:1.8;color:#C9D9EC}
.cta-btns{float:right;width:34%;text-align:right;padding-top:6px}
.cta-btns .btn:last-child{margin-right:0}

/* others */
.sec-others{padding:52px 0 64px}
.others-title{margin-bottom:20px;font-size:18px;color:#071A33}
.others{margin-right:-1.5%}
.others:after{content:"";display:block;clear:both}
.other{float:left;width:23.5%;margin:0 1.5% 14px 0;padding:18px;background:#FFFFFF;border:1px solid #E3EAF3}
.other:hover{border-color:#0B5FD0}
.other b{display:block;font-size:14.5px;color:#071A33}
.other span{display:block;margin-top:6px;font-size:12.5px;color:#5B6E85}

/* footer */
.site-footer{background:#0A1B2F;color:#B7C9DE;padding:40px 0 0}
.ft-inner:after{content:"";display:block;clear:both}
.ft-inner{padding-bottom:28px}
.ft-brand{float:left;width:64%}
.ft-contact{float:right;width:32%;text-align:right}
.ft-brand strong{font-size:16px;color:#FFFFFF}
.ft-brand p{margin-top:8px;font-size:13px;line-height:1.8}
.ft-tel{font-size:24px;font-weight:800;letter-spacing:.5px;color:#FFFFFF}
.ft-contact p{font-size:13px}
.ft-bottom{padding:16px 0;border-top:1px solid #1E3550;font-size:12.5px;text-align:center;color:#8FA5BE}
.ft-bottom a{margin:0 10px}
.ft-bottom a:hover{color:#FFFFFF}

/* hub */
.hub-grid{margin-right:-2%}
.hub-grid:after{content:"";display:block;clear:both}
.hub-card{float:left;width:31.33%;margin:0 2% 20px 0;padding:26px 24px;background:#FFFFFF;border:1px solid #E3EAF3}
.hub-card:hover{border-color:#CFE0F5;box-shadow:0 10px 30px rgba(11,46,87,.10)}
.hub-no{font-size:12px;font-weight:800;letter-spacing:2px;color:#C08A3E}
.hub-card h3{margin:10px 0 8px;font-size:19px;color:#071A33}
.hub-card p{min-height:48px;font-size:13.5px;line-height:1.75;color:#5B6E85}
.hub-more{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;color:#0B5FD0}

/* 手机吸底 CTA */
.sticky-cta{display:none}

/* ---------- responsive ---------- */
@media screen and (max-width:1080px){
  .hero-main{float:none;width:100%}
  .hero-card{float:none;width:100%;max-width:420px;margin-top:26px}
  .grid>*{width:48%}
  .grid-2>*{width:48%}
  .grid-3>*{width:48%}
  .grid-4>*{width:48%}
  .flow .step{width:48%}
  .others .other{width:48%}
  .hub-card{width:48%}
  .adv{width:46%}
}
@media screen and (max-width:860px){
  .hd-nav{display:none}
  .hd-inner{height:58px}
  .hd-tel{height:58px;line-height:58px;padding-left:0;border-left:0;font-size:14px}
  .logo{padding-top:13px}
  .logo-sub{display:none}
  .sec{padding:44px 0}
  .hero-inner{padding:32px 0 40px}
  .hero h1{font-size:26px}
  .hero-sub{font-size:15px}
  .hero-lead{font-size:14.5px}
  .hero-card{max-width:none}
  .grid,.flow,.others,.hub-grid,.adv-grid{margin-right:0}
  .grid>*,.grid-2>*,.grid-3>*,.grid-4>*,.flow .step,.adv,.hub-card,.other{float:none;width:100%;margin-right:0}
  .cta-inner>div:first-child,.cta-btns{float:none;width:100%;text-align:left}
  .cta-btns{padding-top:14px}
  .ft-brand,.ft-contact{float:none;width:100%;text-align:left}
  .ft-contact{margin-top:18px}
  .sticky-cta{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:60;padding:14px;text-align:center;font-weight:800;color:#37230A;background:#C08A3E;border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.22)}
  .site-footer{padding-bottom:74px}
}
@media screen and (max-width:640px){
  .sec-head h2{font-size:21px}
  .hero h1{font-size:24px}
  .btn{padding:12px 18px;font-size:14px}
  .btn-lg{padding:13px 22px}
  .pain,.mx,.case,.step,.res{padding:20px 18px}
  .sec-no{letter-spacing:2px}
}