@charset "utf-8";
/* =========================================================
   教师风采 —— 两个组件：左侧(文字+4图滚动) / 右侧(大图)
   红色系：主色 #9d080c  辅色 #c0504f  底 #fdf5f4
   本站 1rem = 100px（桌面端）
   ========================================================= */

/* ---------- 0. 版块外壳 ---------- */
.homee.tf-homee{height:auto;padding:.72rem 0 .8rem;background:#fdf5f4;position:relative;overflow:hidden;}
.homee.tf-homee .wp{position:relative;z-index:2;}
.homee.tf-homee .wp:before{display:none;}
.homee.tf-homee .intit{position:static;margin-bottom:.42rem;}
/* 大号英文水印 + 红晕，去掉呆板感 */
.homee.tf-homee:before{content:"TEACHER";position:absolute;left:-.3rem;bottom:-1.1rem;font:700 2.4rem/1 "Times New Roman",serif;letter-spacing:.04em;color:#9d080c;opacity:.022;white-space:nowrap;}
.homee.tf-homee:after{content:"";position:absolute;right:-2.2rem;top:-2.2rem;width:6.4rem;height:6.4rem;border-radius:50%;background:radial-gradient(circle,rgba(157,8,12,.09),rgba(157,8,12,0) 68%);}

/* ---------- 1. 两个组件的外层栅格 ---------- */
.tf-lay{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:stretch;-webkit-align-items:stretch;align-items:stretch;}
/* 白底底板：一整块，延伸到右侧大图下面 */
.tf-lay:before{content:"";position:absolute;left:0;top:0;width:76%;height:100%;background:#fff;border-radius:.1rem;box-shadow:0 .12rem .44rem rgba(120,40,40,.07);z-index:0;}

/* =========== 组件一：左侧 =========== */
.tf-left{width:45.5%;position:relative;z-index:2;padding:.5rem .44rem .3rem .46rem;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
.tf-left:before{content:"";position:absolute;left:0;top:.56rem;width:.05rem;height:.32rem;border-radius:0 .03rem .03rem 0;background:#9d080c;}
.tf-txt{min-height:2.2rem;}
.tf-txt h5{font-size:.42rem;line-height:.5rem;font-weight:700;color:#2b2b2b;font-family:"Source Han Serif SC","思源宋体",SimSun,serif;letter-spacing:.02em;}
.tf-txt h5 a{color:#2b2b2b;transition:.5s all;}
.tf-txt h5 a:hover{color:#9d080c;}
.tf-txt i{display:block;margin:.14rem 0 0;font-size:.15rem;line-height:.26rem;font-style:normal;color:#9d080c;}
.tf-txt i b{display:inline-block;margin-right:.14rem;padding:0 .13rem;line-height:.26rem;background:#fdeeee;color:#9d080c;border-radius:.13rem;font-weight:400;}
.tf-txt i span{color:#a09090;}
.tf-txt p{position:relative;margin-top:.24rem;padding-top:.22rem;font-size:.16rem;line-height:.3rem;color:#5f5454;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
.tf-txt p:empty{display:none;}
.tf-txt p:empty:before{display:none;}
.tf-txt p:before{content:"";position:absolute;left:0;top:0;width:100%;height:.01rem;background:linear-gradient(to right,rgba(157,8,12,.28),rgba(157,8,12,0));}

/* 4 图滚动条 */
.tf-thumb{margin-top:.34rem;overflow:hidden;position:relative;}
.tf-thumb .swiper-wrapper{align-items:stretch;}
.tf-thumb li{list-style:none;cursor:pointer;}
.tf-thumb .tf-item{display:block;position:relative;overflow:hidden;border-radius:.06rem;padding-bottom:75%;background:#f3e9e8;box-shadow:0 0 0 .01rem rgba(0,0,0,.04);transition:.45s all;}
.tf-thumb .tf-item img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;transition:.6s all;}
.tf-thumb .tf-item:after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(253,245,244,.5);transition:.45s all;}
.tf-thumb .cur .tf-item{box-shadow:0 0 0 .02rem #9d080c,0 .06rem .16rem rgba(157,8,12,.18);transform:translateY(-.03rem);}
.tf-thumb .cur .tf-item:after{opacity:0;}
.tf-thumb .tf-item:hover img{transform:scale(1.08);}
.tf-thumb .cur .tf-item:hover img{transform:scale(1.03);}
.tf-thumb .txt{display:none;}

/* 箭头 + 序号 */
.tf-nav{margin-top:auto;padding-top:.28rem;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;}
.tf-nav .prev,.tf-nav .next{position:relative;width:.42rem;height:.42rem;border-radius:50%;border:.01rem solid #9d080c;background:#9d080c;cursor:pointer;transition:.4s all;box-sizing:border-box;}
.tf-nav .prev{margin-right:.14rem;}
.tf-nav .prev:after,.tf-nav .next:after{content:"";position:absolute;left:50%;top:50%;width:.09rem;height:.09rem;border-top:.02rem solid #fff;border-left:.02rem solid #fff;margin:-.045rem 0 0 -.04rem;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:.4s all;}
.tf-nav .next:after{margin-left:-.05rem;transform:rotate(135deg);-webkit-transform:rotate(135deg);}
.tf-nav .prev:hover,.tf-nav .next:hover{background:#7d060a;border-color:#7d060a;box-shadow:0 .04rem .14rem rgba(157,8,12,.3);}
.tf-nav .swiper-button-disabled{cursor:default;background:#f2e6e5;border-color:#f2e6e5;}
.tf-nav .swiper-button-disabled:after{border-color:#cbb9b8;}
.tf-nav .swiper-button-disabled:hover{background:#f2e6e5;border-color:#f2e6e5;box-shadow:none;}
.tf-nav .swiper-button-disabled:hover:after{border-color:#cbb9b8;}
.tf-bar{-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;height:.03rem;background:#f0e2e1;margin:0 0 0 .18rem;position:relative;border-radius:.02rem;overflow:hidden;}
.tf-bar i{position:absolute;left:0;top:0;height:100%;width:10%;background:#9d080c;border-radius:.02rem;transition:.5s all;}
.tf-count{margin-left:.18rem;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:.42rem;font:400 .15rem/1 "Times New Roman",serif;color:#b9a5a4;letter-spacing:.04em;white-space:nowrap;}
.tf-count b{font-size:.24rem;color:#9d080c;font-weight:400;}

/* =========== 组件二：右侧大图 =========== */
.tf-right{width:51.5%;position:relative;z-index:2;margin:-.2rem .18rem .3rem 0;border-radius:.4rem  .0rem  .4rem  .0rem;overflow:hidden;box-shadow:0 .26rem .6rem rgba(120,40,40,.26),0 0 0 .01rem rgba(157,8,12,.06);}
.tf-right .swiper-slide{overflow:hidden;}
.tf-right a{display:block;}
.tf-right img{display:block;width:100%;height:4.9rem;object-fit:cover;object-position:center 15%;transition:.8s all;}
.tf-right .swiper-slide-active img:hover{transform:scale(1.05);}
/* 图片上的姓名条 */
.tf-right .tf-tag{position:absolute;left:0;bottom:0;right:0;padding:.22rem .26rem .2rem;background:linear-gradient(to top,rgba(42,5,5,.66),rgba(42,5,5,.22) 52%,rgba(42,5,5,0));color:#fff;font-size:.2rem;font-weight:600;letter-spacing:.06em;text-shadow:0 .02rem .1rem rgba(0,0,0,.45);}
.tf-right .tf-tag em{font-style:normal;font-size:.14rem;opacity:.82;margin-left:.12rem;}

/* 组件二自己的箭头（与组件一同一套语言：实心红 + 白箭头） */
.tf-right .tf-nav2{position:absolute;right:.24rem;bottom:.22rem;z-index:5;display:-webkit-box;display:-webkit-flex;display:flex;}
.tf-right .tf-nav2 .prev,.tf-right .tf-nav2 .next{position:relative;width:.42rem;height:.42rem;border-radius:50%;background:rgba(157, 8, 12, 0.25);border:.01rem solid rgba(255,255,255,.55);box-shadow:0 .04rem .16rem rgba(0,0,0,.28);cursor:pointer;transition:.4s all;box-sizing:border-box;}
.tf-right .tf-nav2 .prev{margin-right:.12rem;}
.tf-right .tf-nav2 .prev:after,.tf-right .tf-nav2 .next:after{content:"";position:absolute;left:50%;top:50%;width:.1rem;height:.1rem;border-top:.02rem solid #fff;border-left:.02rem solid #fff;margin:-.05rem 0 0 -.045rem;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transition:.4s all;}
.tf-right .tf-nav2 .next:after{margin-left:-.055rem;transform:rotate(135deg);-webkit-transform:rotate(135deg);}
.tf-right .tf-nav2 .prev:hover,.tf-right .tf-nav2 .next:hover{background:#7d060a;}
.tf-right .tf-tag{padding-right:1.42rem;}

/* ---------- 手机 / 平板：大图在上，文字与滚动条在下 ---------- */
@media (max-width:900px){
  .homee.tf-homee{padding:.5rem 0 .5rem;}
  .homee.tf-homee:before{font-size:1.4rem;bottom:auto;top:-.1rem;opacity:.04;}
  .tf-lay{position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
  .tf-right{width:auto;margin:.2rem .2rem 0;-webkit-box-ordinal-group:1;-webkit-order:1;-ms-flex-order:1;order:1;}
  .tf-right img{height:56vw;}
  .tf-left{width:auto;margin:.24rem .2rem .2rem;padding:0;-webkit-box-ordinal-group:2;-webkit-order:2;-ms-flex-order:2;order:2;}
  .tf-left:before{top:.06rem;height:.28rem;}
  .tf-left:before{top:.38rem;}
  .tf-txt{min-height:0;}
  .tf-txt h5{font-size:.34rem;}
  .tf-thumb{margin-top:.26rem;}
}