@charset "utf-8";
/* ============================================================
   川培教育 · 官网设计系统 2026
   Thesis : 学院派冷调高级感，深海军蓝 + 香槟金
   Palette: navy #0A1E3F / brand #065098 / gold #BFA06B
   仅重写视觉层，不改变栏目结构与导航命名
   ============================================================ */

:root{
    --navy:        #0A1E3F;
    --navy-deep:   #081A38;
    --brand:       #065098;
    --brand-hover: #2E72DF;
    --gold:        #BFA06B;
    --gold-soft:   rgba(191,160,107,.16);
    --paper:       #FFFFFF;
    --paper-tint:  #F5F7FA;
    --ink:         #3A4453;
    --ink-soft:    #5C6675;
    --line:        #E4E9F0;

    --ease-out:    cubic-bezier(.23,1,.32,1);
    --ease-inout:  cubic-bezier(.77,0,.175,1);

    --shadow-sm:   0 2px 10px rgba(10,30,63,.06);
    --shadow-md:   0 14px 38px rgba(10,30,63,.10);
    --shadow-nav:   0 10px 30px rgba(10,30,63,.12);

    --maxw: 1200px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
    margin:0;
    font-size:15px;
    line-height:1.75;
    color:var(--ink);
    background:var(--paper);
    font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",-apple-system,"Segoe UI",sans-serif;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

div,table{ margin:0 auto; }

a{ color:var(--brand); text-decoration:none; cursor:pointer; transition:color .2s var(--ease-out); }
a:hover{ color:var(--brand-hover); }

img{ border:0; max-width:100%; height:auto; display:block; }

ul,li,dl,dt,dd{ list-style:none; margin:0; padding:0; }
input,select{ vertical-align:middle; font-family:inherit; }
h1,h2,h3,h4,h5,h6{ padding:0; margin:0; color:var(--navy); font-weight:600; }

.fl{ float:left; } .fr{ float:right; }
.q::after{ content:""; display:block; clear:both; }

::selection{ background:var(--navy); color:#F4E9D2; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }

/* 数字使用等宽字形，避免跳动 */
.tnum, .b_tel, .inews ul li span{ font-variant-numeric:tabular-nums; }

/* 滚动显现（IntersectionObserver 加 .is-in） */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   页头
   ============================================================ */
.topbg{
    width:100%;
    background:var(--paper);
    border-top:3px solid var(--navy);
    position:sticky;
    top:0;
    z-index:1000;
    transition:box-shadow .25s var(--ease-out);
}
.topbg.is-scrolled{ box-shadow:var(--shadow-nav); }
.top{
    width:100%;
    max-width:var(--maxw);
    height:84px;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}
.logo{
    flex:0 0 auto;
    width:auto; height:52px;
    overflow:hidden;
    display:flex; align-items:center;
}
.logo a{ display:flex; align-items:center; height:100%; }
.logo img{ max-height:48px; width:auto; }
.tel{
    flex:0 0 auto;
    height:auto;
    background:none;
    color:var(--navy);
    font-size:21px;
    font-weight:600;
    letter-spacing:.02em;
    padding:0;
    margin:0;
    display:flex; align-items:center; gap:10px;
}
.tel::before{
    content:"";
    width:8px; height:8px; border-radius:50%;
    background:var(--gold);
    box-shadow:0 0 0 4px var(--gold-soft);
}

/* ============================================================
   桌面导航(覆盖 nav.css 的固定 1000px / 100px 布局)
   ============================================================ */
.menus{ flex:1 1 auto; width:auto; height:auto; float:none; margin:0; min-width:0; }
ul.menu{ list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:flex-end; }
ul.menu > li{
    width:auto; height:auto; float:none; display:block; position:relative;
    background:none; font-size:15px; z-index:900; white-space:nowrap;
}
ul.menu > li > a{
    display:block; width:auto; height:auto; line-height:1; float:none;
    padding:10px 14px; color:var(--navy); text-align:center;
    border-radius:8px; position:relative;
    transition:background .2s var(--ease-out),color .2s var(--ease-out);
}
ul.menu > li > a::after{
    content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
    width:1px; height:14px; background:var(--line);
}
ul.menu > li:last-child > a::after,
ul.menu > li:first-child > a::after{ display:none; }
ul.menu > li > a:hover{ color:#fff; background:var(--navy); }
ul.menu > li > a:hover::after{ display:none; }
ul.menu ul{
    position:absolute; top:calc(100% + 6px); left:0; width:auto; min-width:160px;
    display:block; opacity:0; visibility:hidden; list-style:none; padding:8px;
    background:#fff; border:1px solid var(--line); border-radius:12px;
    box-shadow:0 18px 40px -18px rgba(10,30,63,.35);
    transform:translateY(6px);
    transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;
}
ul.menu li:hover > ul{ opacity:1; visibility:visible; transform:translateY(0); }
ul.menu ul li{
    position:relative; width:auto; height:auto; line-height:1; background:none;
    border-bottom:none; margin:0; float:none; white-space:nowrap;
}
ul.menu ul li a{
    display:block; width:100%; height:auto; line-height:1; float:none;
    padding:10px 14px; color:var(--ink); text-align:left;
    font-size:13.5px; border-radius:8px;
    transition:background .15s var(--ease-out),color .15s var(--ease-out);
}
ul.menu ul li a:hover{ color:var(--navy); background:var(--paper-tint); }

/* ============================================================
   首页主视觉轮播
   ============================================================ */
.ban_bg{
    width:100%;
    height:calc(100vh - 84px);
    min-height:520px;
    max-height:760px;
    overflow:hidden;
    position:relative;
    background:var(--navy);
}
.top_slide_wrap{ width:100%; height:100%; position:relative; z-index:1; }
.bx-viewport{ width:100% !important; height:100% !important; overflow:hidden; }
.bx-wrapper{ width:100% !important; height:100%; margin:0; }
.slide_box{ height:100%; margin:0; }
.slide_box li{
    height:100%;
    background-size:cover !important;
    background-position:center !important;
    position:relative;
}
.slide_box li::after{
    content:"";
    position:absolute; inset:0;
    background:linear-gradient(180deg,rgba(8,26,56,.42) 0%,rgba(8,26,56,.18) 40%,rgba(8,26,56,.62) 100%);
}
.slide_box li a{
    position:relative; z-index:2;
    width:100%; height:100%;
    display:flex; align-items:flex-end;
    text-indent:0;
    padding:0 24px 96px;
    color:#fff;
    font-size:clamp(26px,3.4vw,44px);
    font-weight:600;
    letter-spacing:.01em;
    max-width:var(--maxw); margin:0 auto;
}

/* 左右切换 */
.op_btns{
    width:100%; max-width:var(--maxw);
    position:absolute; left:0; right:0; bottom:36px;
    margin:0 auto; padding:0 24px;
    z-index:5; display:flex; gap:14px; justify-content:flex-end;
}
.op_btns .op_btn{
    width:52px; height:52px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid rgba(255,255,255,.45);
    border-radius:50%;
    background:rgba(8,26,56,.28);
    backdrop-filter:blur(6px);
    transition:background .2s var(--ease-out),border-color .2s var(--ease-out),transform .15s var(--ease-out);
}
.op_btns .op_btn:hover{ background:var(--gold); border-color:var(--gold); }
.op_btns .op_btn:active{ transform:scale(.94); }
.op_btns .op_btn span{
    width:14px; height:14px; margin:0;
    border-style:solid; border-color:#fff; border-width:0 0 2px 2px;
}
.op_btns .op_prev span{ transform:rotate(45deg); margin-left:4px; }
.op_btns .op_next span{ transform:rotate(225deg); margin-right:4px; }

/* bx pager */
.bx-wrapper .bx-pager{
    position:absolute; bottom:30px; left:24px; z-index:5;
    display:flex; gap:10px; width:auto;
}
.bx-wrapper .bx-pager a{
    width:28px; height:3px; margin:0;
    background:rgba(255,255,255,.35);
    text-indent:-9999px; border-radius:2px; transition:background .2s,width .25s var(--ease-out);
}
.bx-wrapper .bx-pager a:hover,.bx-wrapper .bx-pager a.active{ background:var(--gold); width:42px; }

/* ============================================================
   通知公告条
   ============================================================ */
.notice_bg{
    width:100%;
    height:46px;
    background:var(--navy-deep);
    position:absolute; left:0; bottom:0; z-index:6;
}
.notice{
    width:100%; max-width:var(--maxw);
    height:46px; line-height:46px;
    padding:0 24px;
    color:#DCE4F0; position:relative;
    display:flex; align-items:center; gap:14px;
}
.notice > b.fl{
    flex:0 0 auto;
    color:var(--gold); font-weight:600; font-size:14px;
}
.notice_list{ flex:1 1 auto; height:46px; overflow:hidden; }
.notice_list li{ height:46px; }
.notice_list a{ color:#DCE4F0; }
.notice_list a:hover{ color:#fff; }
.notice_list span{ color:rgba(220,228,240,.55); font-size:13px; margin-left:12px; }
.notice .prev,.notice .next{
    flex:0 0 auto; position:static;
    width:8px; height:8px;
    border-style:solid; border-color:var(--gold);
    cursor:pointer; background:none;
}
.notice .prev{ transform:rotate(45deg); border-width:0 0 2px 2px; }
.notice .next{ transform:rotate(225deg); border-width:0 0 2px 2px; }

/* ============================================================
   区块标题
   ============================================================ */
.i_t_bg{
    width:100%;
    margin-top:84px;
    padding:0 24px 18px;
    border-bottom:1px solid var(--line);
}
.i_t{
    width:100%; max-width:var(--maxw);
    color:var(--navy);
    font-size:26px;
    font-weight:600;
    line-height:1.3;
    display:flex; align-items:baseline; gap:14px;
    text-indent:0; background:none;
}
.i_t::before{
    content:""; align-self:middle;
    width:5px; height:24px;
    background:var(--gold); border-radius:2px;
}
.i_t span{
    font-size:13px; font-weight:400;
    color:var(--ink-soft);
    letter-spacing:.14em; text-transform:uppercase;
    margin:0;
}

/* ============================================================
   魅力川培（非对称：首项深蓝强调，其余白）
   ============================================================ */
.iabout{
    width:100%; max-width:var(--maxw);
    margin-top:34px; padding:0 24px;
}
.iabout ul{
    display:grid;
    grid-template-columns:1.18fr 1fr 1fr;
    gap:26px;
}
.iabout ul li{
    width:auto; height:auto; float:none; margin:0;
    padding:30px 28px;
    background:var(--paper-tint);
    border:1px solid var(--line);
    border-radius:14px;
    display:flex; flex-direction:column;
    transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out);
}
.iabout ul li:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.iabout ul li:first-child{
    background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
    border-color:var(--navy);
}
.iabout ul li .img{
    width:64px; height:64px; border-radius:14px; overflow:hidden;
    background:var(--gold-soft);
}
.iabout ul li .img img{ width:100%; height:100%; object-fit:cover; }
.iabout ul li .name{
    height:auto; line-height:1.4; margin-top:18px;
    color:var(--navy); font-size:19px; font-weight:600; text-align:left;
}
.iabout ul li:first-child .name{ color:#fff; }
.iabout ul li .con{
    height:auto; margin-top:10px;
    color:var(--ink-soft); font-size:14px; line-height:1.8;
}
.iabout ul li:first-child .con{ color:rgba(220,228,240,.82); }

/* ============================================================
   了解川培 + 新闻中心
   ============================================================ */
.content{
    width:100%; max-width:var(--maxw);
    margin-top:40px; padding:0 24px;
    display:grid; grid-template-columns:1fr 1.05fr; gap:40px;
}
.iknow{ width:auto; height:auto; float:none; }
.iknow img{
    width:100%; height:360px; object-fit:cover;
    border-radius:14px; box-shadow:var(--shadow-md);
}
.k_tit{ color:var(--navy); font-size:16px; font-weight:600; margin-top:18px; height:auto; line-height:1.5; }
.k_con{ height:auto; color:var(--ink-soft); margin-top:8px; text-indent:2em; }
.k_con a{ color:var(--gold); }

.inews{ width:auto; height:auto; float:none; display:flex; flex-direction:column; }
.news_t{
    height:auto; display:flex; align-items:center; justify-content:space-between;
    padding-bottom:16px; border-bottom:2px solid var(--navy);
}
.news_t .t1{
    width:auto; height:auto; line-height:1.3;
    background:none; color:var(--navy);
    font-size:21px; font-weight:600; text-align:left; float:none;
}
.news_t .fr img{ width:20px; opacity:.6; }
.news_c{
    height:auto; margin-top:22px;
    display:flex; gap:18px; align-items:flex-start;
}
.news_c .img{
    flex:0 0 auto; width:200px; height:88px;
    float:none; padding:0; border:none; border-radius:10px; overflow:hidden;
}
.news_c .img img{ width:100%; height:100%; object-fit:cover; }
.news_c .con{ width:auto; height:auto; float:none; text-indent:0; color:var(--ink-soft); font-size:14px; }
.news_c .con a{ color:var(--gold); }
.inews ul{
    height:auto; margin-top:22px; padding:0; background:none;
    display:flex; flex-direction:column;
}
.inews ul li{
    height:auto; line-height:1.5;
    padding:13px 0 13px 26px;
    background:none; text-indent:0;
    border-bottom:1px solid var(--line);
    position:relative;
    display:flex; justify-content:space-between; gap:16px;
}
.inews ul li::before{
    content:""; position:absolute; left:4px; top:22px;
    width:7px; height:7px; border-radius:50%;
    background:var(--gold);
}
.inews ul li a{ color:var(--ink); flex:1; }
.inews ul li a:hover{ color:var(--brand); }
.inews ul li span{ float:none; color:var(--ink-soft); font-size:13px; }

/* ============================================================
   荣誉资质 / 六大项目
   ============================================================ */
.iteam{ width:auto; height:auto; float:none; position:relative; }
.iteam ul li.t_1{ width:100%; height:auto; position:static; }
.iteam ul li.t_1 img{
    width:100% !important; height:300px; object-fit:cover;
    border-radius:14px; box-shadow:var(--shadow-md);
}

.ipro{ width:auto; height:auto; float:none; }
.ipro ul{
    display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.ipro ul li{
    width:auto; height:auto; float:none; margin:0;
}
.ipro ul li .img{
    width:100%; height:118px;
    border-radius:12px; overflow:hidden;
    background:linear-gradient(150deg,var(--navy),var(--navy-deep));
    display:flex; align-items:center; justify-content:center;
    position:relative;
    transition:transform .25s var(--ease-out);
}
.ipro ul li .img a{
    width:100%; height:100%; float:none; text-indent:0;
    background:none !important;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:17px; font-weight:500; letter-spacing:.04em;
}
.ipro ul li .img::after{
    content:""; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
    width:0; height:2px; background:var(--gold); transition:width .25s var(--ease-out);
}
.ipro ul li .img:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.ipro ul li .img:hover::after{ width:60%; }
.ipro ul li .img:active{ transform:scale(.97); }
.ipro ul li .name{ height:auto; line-height:1.4; margin-top:10px; text-align:center; font-size:14px; }
.ipro ul li .name a{ color:var(--ink); }
.ipro ul li .name a:hover{ color:var(--brand); }

/* ============================================================
   内页通用
   ============================================================ */
.nbanbg,.nban_bg{ width:100%; min-width:0; height:300px; overflow:hidden; }
.nban{ width:100%; height:300px; left:0; margin:0; position:relative; }

.main{ width:100%; max-width:var(--maxw); padding:0 24px; height:auto; }
.conLeft{
    width:220px; min-height:0; height:auto; float:left;
    padding-bottom:30px;
}
.left_n{
    position:static; width:100%; height:auto; line-height:1.4;
    background:var(--navy); color:#fff; font-size:17px;
    text-indent:0; padding:16px 20px; border-radius:10px 10px 0 0;
}
.left_n span{ font-size:12px; color:rgba(255,255,255,.6); }
.left_m_bg{ width:100%; min-height:0; height:auto; background:var(--paper-tint); border-radius:0 0 10px 10px; padding:10px 0; }
.left_m{ width:100%; margin:0; }
.left_m ul li{
    width:100%; height:auto; line-height:1.5;
    background:none; border-bottom:1px solid var(--line);
}
.left_m ul li a{
    width:100%; height:auto; color:var(--ink);
    padding:12px 20px; float:none; text-indent:0;
}
.left_m ul li a:hover,.left_m ul li a.now{ color:var(--brand); background:var(--gold-soft); }
.left_tel,.left_qq{ display:none; }

.conRight{
    width:calc(100% - 248px); min-height:0; height:auto;
    float:right; background:none; padding:0 0 0 28px;
}
.right_n{ height:auto; margin:0 0 24px; padding-bottom:16px; border-bottom:2px solid var(--navy); }
.right_n .r_l{ font-size:23px; color:var(--navy); }
.right_n span{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; }
.right_con{ margin:0; }

.n_t{ color:var(--gold); font-size:17px; margin-bottom:12px; height:auto; }

ul.news li{ height:auto; padding:0 0 22px; margin-bottom:22px; border-bottom:1px solid var(--line); display:flex; gap:18px; }
ul.news li .num{ width:54px; height:54px; line-height:1.2; background:var(--navy); color:#fff; font-size:18px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
ul.news li .name,.news li .con{ width:auto; height:auto; float:none; }
ul.news li .name a{ color:var(--navy); font-size:16px; }

.title{ line-height:1.5; font-size:22px; color:var(--navy); text-align:center; }
.time{ margin:14px auto 26px; border-top:1px solid var(--line); padding-top:12px; color:var(--ink-soft); font-size:13px; text-align:center; }

/* 文章正文排版 */
.right_con h3,.right_con h4{ color:var(--navy); font-weight:700; margin:30px 0 14px; line-height:1.4; }
.right_con h3{ font-size:19px; }
.right_con h4{ font-size:17px; padding-left:12px; position:relative; }
.right_con h4::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:17px; background:var(--gold); border-radius:2px; }
.right_con p{ color:var(--ink); font-size:15.5px; line-height:1.95; margin:0 0 16px; }
.right_con strong{ color:var(--navy); font-weight:700; }
.right_con a{ color:var(--brand); }
.right_con img{ max-width:100%; height:auto; border-radius:10px; margin:6px 0 18px; }
.pages{ padding:26px 0; }
.pages a{ color:var(--ink); padding:6px 12px; border:1px solid var(--line); border-radius:8px; margin:0 4px; }
.pages a:hover,.pages a.cur{ color:#fff; background:var(--navy); border-color:var(--navy); }

.ipt,.txt{
    width:100%; height:auto; line-height:1.6;
    background:var(--paper-tint); border:1px solid var(--line); border-radius:8px;
    padding:11px 14px; margin:0 0 14px; font-size:14px;
}
.txt{ min-height:150px; }
.btn_tj{
    width:auto; height:auto; line-height:1; background:var(--navy);
    color:#fff; font-size:15px; border:none; border-radius:10px;
    padding:13px 34px; cursor:pointer;
    transition:background .2s var(--ease-out),transform .15s var(--ease-out);
}
.btn_tj:hover{ background:var(--brand); }
.btn_tj:active{ transform:scale(.97); }

.account{ width:100%; height:auto; border:1px solid var(--line); border-radius:12px; padding:24px; }
.acc_l{ width:auto; float:none; margin:0; } .acc_r{ display:none; }

/* ============================================================
   页脚
   ============================================================ */
.btmbg{
    width:100%; min-width:0; margin-top:96px;
    background:linear-gradient(180deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.btm{
    width:100%; max-width:var(--maxw);
    color:#DCE4F0; margin:0 auto;
    padding:52px 24px 30px;
    display:grid; grid-template-columns:1fr auto; gap:36px;
}
.btm a{ color:#DCE4F0; margin:0 14px 0 0; }
.btm a:hover{ color:var(--gold); text-decoration:none; }
.btm_l b{
    display:block; font-size:15px; color:#fff; margin-bottom:16px;
    position:relative; padding-left:14px;
}
.btm_l b::before{
    content:""; position:absolute; left:0; top:5px;
    width:4px; height:16px; background:var(--gold); border-radius:2px;
}
.b_link{
    background:none; padding:0 0 18px; margin-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,.1); line-height:2;
}
.b_tel{
    width:auto; background:none; color:var(--gold);
    font-size:26px; font-weight:600; letter-spacing:.03em;
    padding:0; margin:0; text-align:right; font-family:inherit;
}

/* ============================================================
   响应式
   ============================================================ */
.nav-toggle{
    display:none;
    width:44px; height:44px; flex:0 0 auto;
    background:none; border:1px solid var(--line); border-radius:10px;
    align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span{
    width:20px; height:2px; background:var(--navy); position:relative; display:block;
    transition:transform .25s var(--ease-out),opacity .2s;
}
.nav-toggle span::before,.nav-toggle span::after{
    content:""; position:absolute; left:0; width:20px; height:2px; background:var(--navy);
}
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

@media (max-width: 960px){
    .iabout ul{ grid-template-columns:1fr 1fr; }
    .content{ grid-template-columns:1fr; gap:48px; }
    .ipro ul{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 760px){
    .top{ height:68px; padding:0 18px; gap:12px; }
    .logo img{ max-height:40px; }
    .tel{ display:none; }

    .nav-toggle{ display:flex; }
    .menus{
        position:fixed; top:68px; left:0; right:0;
        width:100%; height:0; overflow:hidden;
        background:#fff; box-shadow:var(--shadow-nav);
        transition:height .3s var(--ease-inout);
        margin:0;
    }
    .menus.is-open{ height:auto; max-height:calc(100vh - 68px); overflow-y:auto; }
    ul.menu li{ float:none; width:100%; background:none; border-bottom:1px solid var(--line); text-align:left; }
    ul.menu li a{ width:100%; height:auto; line-height:1.5; padding:14px 22px; text-align:left; }
    ul.menu ul{ position:static; width:100%; display:block !important; opacity:1 !important; background:var(--paper-tint); }
    ul.menu ul li a{ padding-left:38px; font-size:13px; }

    .ban_bg{ height:74vh; min-height:440px; }
    .slide_box li a{ font-size:24px; padding-bottom:84px; }
    .op_btns{ bottom:24px; }
    .notice_list span{ display:none; }

    .i_t_bg{ margin-top:60px; }
    .i_t{ font-size:22px; flex-wrap:wrap; gap:8px; }
    .iabout ul{ grid-template-columns:1fr; gap:18px; }
    .iabout{ padding:0 18px; }
    .content{ padding:0 18px; }
    .iknow img{ height:240px; }

    .conLeft{ width:100%; float:none; }
    .conRight{ width:100%; float:none; padding:28px 0 0; }

    .btm{ grid-template-columns:1fr; gap:24px; padding:40px 18px 26px; }
    .b_tel{ text-align:left; font-size:23px; }
}

/* 降低动效偏好 */
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *,*::before,*::after{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
}