/* ============================================================
   mail-page.css — 企业邮局公开页（services/mail）样式
   来源：https://www.west.cn/css2016/mail/newmail.css（2026-08-14 版，1:1 移植）
   本地化：2026-09-04 复刻至九州数码，图片全部落位 backend/public
   ─────────────────────────────────────────────────────────
   ⚠️ 复用原则（不重复定义，global.css 已提供）：
     .cl/.clearfix  .wide1190  .horizontal-center  .f-l/.f-r
     .blue-link/.orange-link/.red  .font14  .dis-b/.dis-ib
     .mt-10/.ml-10/.mr-5  .pos-r  .text-c  .pr-15  .mt-5
   ⚠️ 主色决策（2026-09-04 老板拍板）：像素级 #4a9bed 对齐 west 原页
   ============================================================ */
.mail-content{
  background:#f2f3f5
}
.mail-top-advantage{
  padding:16px 0;
  background:#fff
}
.mail-top-advantage .mta-list li{
  padding:0 10px;
  float:left;
  width:25%;
  box-sizing:border-box
}
.mail-top-advantage .mta-list li:last-child{
  padding:0 0 0 10px
}
.mail-top-advantage .mta-list li .mta-img{
  margin-top:6px;
  float:left;
  background:url(/newimages/mail/newmail-icon.png) no-repeat
}
.mail-top-advantage .mta-list li .mta-img.mta-img1{
  width:55px;
  height:44px;
  background-position:0 -648px
}
.mail-top-advantage .mta-list li .mta-img.mta-img2{
  width:48px;
  height:48px;
  background-position:-65px -638px
}
.mail-top-advantage .mta-list li .mta-img.mta-img3{
  width:47px;
  height:47px;
  background-position:-123px -638px
}
.mail-top-advantage .mta-list li .mta-img.mta-img4{
  margin-top:16px;
  width:35px;
  height:33px;
  background-position:-180px -638px
}
.mail-top-advantage .mta-list li .mta-txt{
  overflow:hidden;
  padding-left:10px
}
.mail-top-advantage .mta-list li .mta-txt .mta-title{
  font-size:18px;
  color:#2c2c2c
}
.mail-top-advantage .mta-list li .mta-txt p{
  line-height:18px;
  font-size:14px;
  color:#848687
}
.mail-section{
  margin-top:20px;
  background:url(/images2016/mail/newmail-config-bg.png) no-repeat top right #fff;
  border-radius:6px;
  box-shadow:0 2px 3px 0 rgba(18,44,77,.15)
}
.mail-section .mail-config{
  padding:26px 0 50px 30px;
  float:right;
  width:250px;
  border-left:1px solid #eee;
  margin-top:70px;
  box-sizing:border-box
}
.mail-section .mail-config .config-title{
  font-size:16px;
  color:#303030
}
.mail-section .mail-config .config-list{
  padding-top:10px
}
.mail-section .mail-config .config-list li{
  line-height:28px;
  font-size:12px;
  color:#535353
}
.mail-section .mail-config .config-list li label{
  padding-right:10px;
  display:inline-block;
  width:74px;
  text-align:right
}
.mail-section .mail-info{
  padding:14px 14px 20px 40px;
  overflow:hidden
}
.mail-section .mail-info .info-title{
  height:64px
}
.mail-section .mail-info .info-title i{
  float:left;
  display:inline-block;
  width:64px;
  height:64px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat 0 0
}
.mail-section .mail-info .info-title .info-title-txt{
  margin-left:74px;
  position:relative;
  font-size:12px;
  color:#8e8e8e
}
.mail-section .mail-info .info-title .info-title-txt p{
  padding-top:10px;
  font-size:18px;
  font-weight:700;
  color:#181818
}
.mail-section .mail-info .info-box{
  padding-top:20px
}
.mail-section .mail-info .info-box .box-left{
  float:left;
  width:120px;
  line-height:36px;
  font-size:16px;
  color:#2e2e2e;
  text-align:right
}
.mail-section .mail-info .info-box .box-right{
  position:relative;
  padding-left:96px;
  min-height:36px;
  line-height:36px
}
.mail-section .mail-info .info-box .box-right .sale-out-info{
  line-height:20px;
  height:20px;
  margin-left:20px;
  display:inline-block
}
.mail-section .mail-info .info-box .box-right .sale-out-info .sale-icon{
  display:inline-block;
  background:url(/images2016/sale-icon.gif) no-repeat left top;
  width:32px;
  height:20px;
  vertical-align:top
}
.mail-section .mail-info .info-box .box-right .sale-out-info .sale-text-info{
  border:1px solid #eee;
  display:inline-block;
  padding-left:5px;
  height:18px;
  background-color:#f9f9f9;
  color:#666;
  vertical-align:top;
  margin-bottom:12px
}
.mail-section .mail-info .info-box .box-right .count{
  display:inline-block;
  vertical-align:middle;
  font-size:0
}
.mail-section .mail-info .info-box .box-right .count .count-subtract,.mail-section .mail-info .info-box .box-right .count .count-add{
  position:relative;
  display:inline-block;
  width:35px;
  height:36px;
  background:#f9f9f9;
  border:1px solid #dbdbdb;
  vertical-align:middle;
  box-sizing:border-box
}
.mail-section .mail-info .info-box .box-right .count .count-subtract::before,.mail-section .mail-info .info-box .box-right .count .count-add::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat;
  vertical-align:middle;
  position:absolute;
  top:8px;
  left:8px
}
.mail-section .mail-info .info-box .box-right .count .count-subtract{
  margin-right:-1px
}
.mail-section .mail-info .info-box .box-right .count .count-subtract::before{
  background-position:-23px -88px
}
.mail-section .mail-info .info-box .box-right .count .count-subtract:hover::before{
  background-position:-45px -88px
}
.mail-section .mail-info .info-box .box-right .count .count-add{
  margin-left:-1px
}
.mail-section .mail-info .info-box .box-right .count .count-add::before{
  background-position:1px -107px
}
.mail-section .mail-info .info-box .box-right .count .count-add:hover::before{
  background-position:-24px -107px
}
.mail-section .mail-info .info-box .box-right .count .count-input{
  display:inline-block;
  width:92px;
  height:36px;
  line-height:36px;
  border:1px solid #dbdbdb;
  text-align:center;
  font-size:14px;
  color:#6c6c6c;
  box-sizing:border-box
}
.mail-section .mail-info .info-box .box-right .config-time{
  display:inline-block;
  border:1px solid #dedede;
  border-radius:2px;
  vertical-align:middle;
  height:30px;
  line-height:30px
}
.mail-section .mail-info .info-box .box-right .config-time dd{
  width:90px;
  float:left;
  border-right:1px solid #dedede;
  font-size:14px;
  color:#8b8b8b;
  cursor:pointer;
  position:relative;
  vertical-align:middle;
  height:30px;
  line-height:30px;
  text-align:center
}
.mail-section .mail-info .info-box .box-right .config-time dd .btn-desc{
  position:absolute;
  height:20px;
  line-height:20px;
  top:36px;
  display:block;
  color:#fff;
  z-index:2;
  background-color:#fe7a00;
  border-radius:2px;
  padding-left:5px;
  padding-right:5px;
  left:0;
  opacity:0;
  -ms-filter:alpha(opacity=0);
  filter:alpha(opacity=0);
  text-align:center;
  font-size:12px;
  white-space:nowrap;
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  transition:all .3s ease
}
.mail-section .mail-info .info-box .box-right .config-time dd .btn-desc-arrow{
  position:absolute;
  width:100%;
  height:5px;
  left:50%;
  top:31px;
  margin-left:-12px;
  background:url(/images2016/cloudhost/cloudhost-icon_2.jpg) no-repeat 0 -1215px;
  opacity:0;
  -ms-filter:alpha(opacity=0);
  filter:alpha(opacity=0);
  overflow:hidden
}
.mail-section .mail-info .info-box .box-right .config-time dd .gift-icon{
  display:inline-block;
  width:12px;
  height:13px;
  line-height:13px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat -24px -74px;
  vertical-align:middle;
  margin-top:-4px;
  margin-right:4px
}
.mail-section .mail-info .info-box .box-right .config-time dd.gift .gift-icon{
  display:block
}
.mail-section .mail-info .info-box .box-right .config-time dd.active{
  background:#4a9bed;
  color:#fff
}
.mail-section .mail-info .info-box .box-right .config-time dd.active .gift-icon{
  background-position:-46px -74px
}
.mail-section .mail-info .info-box .box-right .config-time dd.active .btn-desc-arrow,.mail-section .mail-info .info-box .box-right .config-time dd.active .btn-desc{
  opacity:1
}
.mail-section .mail-info .info-box .box-right .domain-input{
  display:inline-block;
  width:350px;
  height:36px;
  line-height:36px;
  border:1px solid #e6e6e6;
  box-sizing:border-box;
  padding:0 10px;
  font-size:14px
}
.mail-section .mail-info .info-box .box-right .info-box-domain{
  font-size:12px;
  color:#878787;
  position:relative;
  line-height:normal;
  margin:10px 0 -10px
}
.mail-section .mail-info .info-box .box-right .info-box-domain .blue-link{
  text-decoration:underline
}
.mail-section .mail-info .info-box .box-right .info-box-price{
  margin-top:-6px;
  font-size:12px;
  color:#717171
}
.mail-section .mail-info .info-box .box-right .info-box-price span{
  color:#c1c1c1
}
.mail-section .mail-info .info-box .box-right .info-box-price span.price{
  font-size:24px;
  color:#f60
}
.mail-section .mail-info .info-box .box-right .info-box-price span.common-coupons{
  color:#f30;
  vertical-align:middle;
  margin-top:-10px
}
.mail-section .mail-info .info-box .box-right .info-box-agreement{
  line-height:normal
}
.mail-section .mail-info .info-box .box-right .info-box-agreement .agreement-input-label{
  padding-left:24px;
  background:url(/images2016/icon.png) no-repeat 0 -334px;
  font-size:12px;
  color:#878787;
  height:20px;
  line-height:20px;
  display:inline-block;
  cursor:pointer
}
.mail-section .mail-info .info-box .box-right .info-box-agreement .agreement-input-label.checked{
  background:url(/images2016/icon.png) no-repeat 0 -297px
}
.mail-section .mail-info .info-box .box-right .info-box-btn{
  margin-top:10px;
  display:inline-block;
  width:140px;
  height:42px;
  line-height:42px;
  background:#4a9bed;
  font-size:14px;
  color:#fff;
  text-align:center;
  -webkit-transition:all .3s ease;
  -moz-transition:all .3s ease;
  transition:all .3s ease
}
.mail-section .mail-info .info-box .box-right .info-box-btn:hover{
  background:#3a8de0
}
.mail-section .mail-info .info-box .box-right .info-box-btn.try{
  margin-left:10px;
  background:#fff;
  border:1px solid #4a9bed;
  color:#4a9bed
}
.mail-section .mail-info .info-box .box-right .info-box-btn.try:hover{
  color:#fff;
  background-color:#4a9bed
}
.mail-section .mail-info .info-box .box-right .errmsg{
  display:inline-block;
  line-height:normal
}
.mail-section .mail-info .info-box .box-right .errmsg .validate-error{
  padding-left:20px;
  margin-left:0
}
.mail-advantage{
  margin-top:20px;
  padding:20px 0 160px;
  position:relative;
  background:#fff
}
.mail-advantage::before{
  content:"";
  width:100%;
  height:250px;
  background:url(/images2016/mail/newmail-advantage-bg1.jpg) no-repeat top center;
  position:absolute;
  top:0;
  left:50%;
  margin-left:-50%;
  z-index:1
}
.mail-advantage::after{
  content:"";
  width:100%;
  height:510px;
  background:url(/images2016/mail/newmail-advantage-bg2.jpg) no-repeat bottom center;
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-50%;
  z-index:1
}
.mail-advantage .advantage-title{
  padding-top:10px;
  font-size:28px;
  color:#000;
  text-align:center;
  z-index:22;
  position:relative
}
.mail-advantage .advantage-title strong{
  font-weight:400
}
.mail-advantage .advantage-title p{
  padding-top:10px;
  font-size:16px;
  color:#797979
}
.mail-advantage .advantage-list{
  z-index:22;
  position:relative
}
.mail-advantage .advantage-list li{
  float:left;
  margin-top:24px;
  margin-right:40px;
  width:370px;
  border-radius:6px;
  text-align:center;
  box-sizing:border-box
}
.mail-advantage .advantage-list li .al-img{
  margin:15px auto 0;
  width:90px;
  height:90px;
  border-radius:46px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat;
  box-shadow:0 3px 5px 0 rgba(100,100,100,.11)
}
.mail-advantage .advantage-list li .al-title{
  padding-top:14px;
  font-size:20px;
  color:#2c2c2c
}
.mail-advantage .advantage-list li .al-txt{
  padding-top:4px;
  line-height:22px;
  font-size:14px;
  color:#848687
}
.mail-advantage .advantage-list li:nth-child(3n){
  margin-right:0
}
.mail-advantage .advantage-list li.item-one .al-img{
  background-position:-72px 0
}
.mail-advantage .advantage-list li.item-two .al-img{
  background-position:-172px 0
}
.mail-advantage .advantage-list li.item-three .al-img{
  background-position:-272px 0
}
.mail-advantage .advantage-list li.item-four .al-img{
  background-position:-372px 0
}
.mail-advantage .advantage-list li.item-five .al-img{
  background-position:-472px 0
}
.mail-advantage .advantage-list li.item-six .al-img{
  background-position:-572px 0
}
.mail-advantage .advantage-list li.item-seven .al-img{
  background-position:-672px 0
}
.mail-advantage .advantage-list li.item-eight .al-img{
  background-position:-672px -200px
}
.mail-advantage .advantage-list li.item-nine .al-img{
  background-position:-672px -400px
}
.mail-advantage .advantage-list li:hover{
  transition:all .3s cubic-bezier(0.4,0,.2,1) 0s
}
.mail-advantage .advantage-list li:hover .al-img{
  transition:all .3s cubic-bezier(0.4,0,.2,1) 0s
}
.mail-advantage .advantage-list li:hover.item-one .al-img{
  background-position:-72px -100px
}
.mail-advantage .advantage-list li:hover.item-two .al-img{
  background-position:-172px -100px
}
.mail-advantage .advantage-list li:hover.item-three .al-img{
  background-position:-272px -100px
}
.mail-advantage .advantage-list li:hover.item-four .al-img{
  background-position:-372px -100px
}
.mail-advantage .advantage-list li:hover.item-five .al-img{
  background-position:-472px -100px
}
.mail-advantage .advantage-list li:hover.item-six .al-img{
  background-position:-572px -100px
}
.mail-advantage .advantage-list li:hover.item-seven .al-img{
  background-position:-672px -100px
}
.mail-advantage .advantage-list li:hover.item-eight .al-img{
  background-position:-672px -300px
}
.mail-advantage .advantage-list li:hover.item-nine .al-img{
  background-position:-672px -500px
}
.mail-state{
  padding-top:20px;
  padding-bottom:50px;
  background:#fff
}
.mail-state .state-column{
  padding-top:20px
}
.mail-state .state-column .column-title{
  padding-bottom:60px;
  font-size:28px;
  color:#000;
  text-align:center
}
.mail-state .state-column .column-title strong{
  font-weight:400
}
.mail-state .state-column .column-title p{
  padding-top:10px;
  font-size:16px;
  color:#797979
}
.mail-state .state-column .column-list{
  padding-top:60px
}
.mail-state .state-column .column-list li{
  float:left;
  width:33.333333%;
  border-right:1px solid #e0e0e0;
  margin-right:-1px;
  text-align:center
}
.mail-state .state-column .column-list li .cl-img{
  margin:-20px auto 0;
  width:214px;
  height:214px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat
}
.mail-state .state-column .column-list li .cl-img.cl-img1{
  background-position:0 -200px
}
.mail-state .state-column .column-list li .cl-img.cl-img2{
  background-position:-224px -200px
}
.mail-state .state-column .column-list li .cl-img.cl-img3{
  background-position:-448px -200px
}
.mail-state .state-column .column-list li .cl-img.cl-img4{
  background-position:0 -424px
}
.mail-state .state-column .column-list li .cl-img.cl-img5{
  background-position:-224px -424px
}
.mail-state .state-column .column-list li .cl-img.cl-img6{
  background-position:-448px -424px
}
.mail-state .state-column .column-list li .cl-title{
  padding-top:4px;
  font-size:20px;
  color:#000
}
.mail-state .state-column .column-list li .cl-txt{
  line-height:20px;
  font-size:14px;
  color:#797979
}
.mail-state .state-column .column-list li dl{
  margin-top:20px;
  padding:10px 20px 30px;
  border-top:1px solid #e0e0e0;
  text-align:left
}
.mail-state .state-column .column-list li dl dt{
  padding-top:10px;
  font-size:16px;
  color:#323232;
  position:relative;
  padding-left:14px
}
.mail-state .state-column .column-list li dl dt::before{
  content:"";
  width:8px;
  height:8px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat -50px -108px;
  position:absolute;
  top:15px;
  left:0
}
.mail-state .state-column .column-list li dl dd{
  padding-top:4px;
  padding-left:14px;
  line-height:18px;
  font-size:14px;
  color:#828282
}
.mail-state .state-column .column-list li:first-child dl{
  padding:10px 20px 30px 0
}
.mail-state .state-column .column-list li:last-child{
  border-right:0
}
.mail-state .state-column .column-list li:last-child dl{
  padding:10px 0 30px 20px
}
.mail-state .state-line{
  margin:50px 0 10px;
  width:100%;
  height:3px;
  background:url(/images2016/mail/newmail-line-bg.jpg) repeat-x
}
.mail-case{
  height:290px;
  background:url(/images2016/mail/mail-case-bg.jpg) no-repeat top center
}
.mail-case .case-title{
  padding-top:20px;
  padding-bottom:16px; /* ⭐ 标题与下方内容卡片留足间距（2026-09-09 老板要求不贴卡片） */
  font-size:28px;
  color:#323232;
  text-align:center
}
.mail-case .case-slider{
  margin-top:-7px;
  padding-bottom:6px;
  overflow:visible;
  /* ⭐ v4c：箭头 absolute 定位的参照（原依赖 global.css SuperSlide 撞车样式，换专有类名后必须自带） */
  position:relative
}
.mail-case .case-slider .case-dots ul li{
  width:10px;
  height:10px
}
.mail-case .case-slider .case-dots ul li.on{
  width:8px;
  height:8px;
  background:#2086ee;
  border:1px solid #2086ee
}
.mail-case .case-slider .prev,.mail-case .case-slider .next{
  /* ⭐ v4c：a 是 inline 元素 width 无效 → absolute 定位（west SuperSlide 同款）*/
  position:absolute;
  top:50%;
  margin-top:-40px;
  width:54px;
  height:54px;
  border-radius:27px;
  background:url(/images2016/mail/slider-arrow.png) -101px 11px no-repeat #848484;
  z-index:1; /* ⭐ 2026-09-09 由99改1：滚动页面时不遮挡顶部导航菜单 */
  left:-27px;
  filter:alpha(opacity=30);
  opacity:.3
}
.mail-case .case-slider .prev:hover,.mail-case .case-slider .next:hover{
  filter:alpha(opacity=70);
  opacity:.7
}
.mail-case .case-slider .next{
  left:auto;
  right:-27px;
  background-position:21px 11px
}
.mail-case .case-list li{
  float:left;
  width:240px;
  background:#fff;
  border-radius:4px;
  text-align:center;
  margin-right:20px;
  margin-bottom:10px
}
.mail-case .case-list li .column{
  padding:16px 16px 14px
}
.mail-case .case-list li .column img{
  max-width:180px;
  max-height:60px
}
.mail-case .case-list li .column .cl-line{
  padding-top:10px;
  border-bottom:1px solid #eaeaea
}
.mail-case .case-list li .column .cl-title{
  padding-top:10px;
  font-size:16px;
  color:#333
}
.mail-case .case-list li .column .cl-txt{
  padding-top:6px;
  font-size:14px;
  line-height:20px;
  color:#999
}
.mail-case .case-list li:hover{
  box-shadow:0 2px 8px 0 rgba(100,100,100,.4)
}
.mail-faq{
  padding:30px 0;
  background:#f7f8ff
}
.mail-faq .faq-title{
  font-size:28px;
  color:#000;
  text-align:center
}
.mail-faq .faq-list{
  padding-top:10px
}
.mail-faq .faq-list li{
  float:left;
  width:25%;
  padding-top:10px
}
.mail-faq .faq-list li a{
  display:block;
  font-size:12px;
  color:#373737;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.mail-faq .faq-list li a span{
  padding-right:10px;
  font-size:16px
}
.mail-faq .faq-list li a:hover{
  color:#2086ee
}
.state-list li{
  float:left;
  width:25%;
  height:140px;
  padding:0 20px;
  box-sizing:border-box
}
.state-list li .sl-img{
  float:left;
  width:40px;
  height:40px;
  background:url(/newimages/mail/newmail-icon.png) no-repeat
}
.state-list li .sl-img.sl-img1{
  background-position:-221px -646px
}
.state-list li .sl-img.sl-img2{
  background-position:-265px -646px
}
.state-list li .sl-img.sl-img3{
  background-position:-310px -646px
}
.state-list li .sl-img.sl-img4{
  background-position:-354px -646px
}
.state-list li .sl-img.sl-img5{
  background-position:-399px -646px
}
.state-list li .sl-img.sl-img6{
  background-position:-444px -646px
}
.state-list li .sl-img.sl-img7{
  background-position:-488px -646px
}
.state-list li .sl-img.sl-img8{
  background-position:-533px -646px
}
.state-list li .sl-img.sl-img9{
  background-position:-575px -646px
}
.state-list li .sl-img.sl-img10{
  background-position:-617px -646px
}
.state-list li .sl-img.sl-img11{
  background-position:-663px -646px
}
.state-list li .sl-img.sl-img12{
  background-position:-706px -646px
}
.state-list li .sl-img.sl-img13{
  background-position:3px -700px
}
.state-list li .sl-img.sl-img14{
  background-position:-42px -700px
}
.state-list li .sl-img.sl-img15{
  background-position:-86px -700px
}
.state-list li .sl-img.sl-img16{
  background-position:-128px -700px
}
.state-list li .sl-img.sl-img17{
  background-position:-170px -700px
}
.state-list li .sl-img.sl-img18{
  background-position:-215px -700px
}
.state-list li .sl-img.sl-img19{
  background-position:-260px -700px
}
.state-list li .sl-img.sl-img20{
  background-position:-305px -700px
}
.state-list li .sl-img.sl-img21{
  background-position:-349px -700px
}
.state-list li .sl-img.sl-img22{
  background-position:-390px -700px
}
.state-list li .sl-img.sl-img23{
  background-position:-426px -700px
}
.state-list li .sl-img.sl-img24{
  background-position:-468px -700px
}
.state-list li .sl-img.sl-img25{
  background-position:6px -744px
}
.state-list li .sl-img.sl-img26{
  background-position:-31px -744px
}
.state-list li .sl-img.sl-img27{
  background-position:-69px -744px
}
.state-list li .sl-img.sl-img28{
  background-position:-113px -744px
}
.state-list li .sl-img.sl-img29{
  background-position:-155px -744px
}
.state-list li .sl-img.sl-img30{
  background-position:-194px -744px
}
.state-list li .sl-img.sl-img31{
  background-position:-235px -744px
}
.state-list li .sl-img.sl-img32{
  background-position:-275px -744px
}
.state-list li .sl-img.sl-img33{
  background-position:-313px -744px
}
.state-list li .sl-img.sl-img34{
  background-position:-350px -744px
}
.state-list li .sl-img.sl-img35{
  background-position:-390px -744px
}
.state-list li .sl-img.sl-img36{
  background-position:-432px -744px
}
.state-list li .sl-img.sl-img37{
  background-position:-473px -744px
}
.state-list li .sl-img.sl-img38{
  background-position:-515px -744px
}
.state-list li .sl-img.sl-img39{
  background-position:-555px -744px
}
.state-list li .sl-img.sl-img40{
  background-position:-595px -744px
}
.state-list li .sl-img.sl-img41{
  background-position:-632px -744px
}
.state-list li .sl-img.sl-img42{
  background-position:-671px -744px
}
.state-list li .sl-img.sl-img43{
  background-position:-710px -744px
}
.state-list li .sl-img.sl-img44{
  background-position:6px -789px
}
.state-list li .sl-img.sl-img45{
  background-position:-32px -789px
}
.state-list li .sl-img.sl-img46{
  background-position:-71px -789px
}
.state-list li .sl-img.sl-img47{
  background-position:-110px -789px
}
.state-list li .sl-img.sl-img48{
  background-position:-153px -789px
}
.state-list li .sl-img.sl-img49{
  background-position:-196px -789px
}
.state-list li .sl-img.sl-img50{
  background-position:-234px -789px
}
.state-list li .sl-img.sl-img51{
  background-position:-273px -789px
}
.state-list li .sl-img.sl-img52{
  background-position:-314px -789px
}
.state-list li .sl-img.sl-img53{
  background-position:-352px -789px
}
.state-list li .sl-img.sl-img54{
  background-position:-392px -789px
}
.state-list li .sl-img.sl-img55{
  background-position:-432px -789px
}
.state-list li .sl-img.sl-img56{
  background-position:-470px -789px
}
.state-list li .sl-img.sl-img57{
  background-position:-509px -789px
}
.state-list li .sl-img.sl-img58{
  background-position:-548px -789px
}
.state-list li .sl-img.sl-img59{
  background-position:-589px -789px
}
.state-list li .sl-txt{
  font-size:14px;
  color:#848687;
  overflow:hidden;
  padding-left:12px
}
.state-list li .sl-txt .sl-title{
  padding-bottom:5px;
  font-size:18px;
  color:#222
}
.state-btn{
  display:block;
  margin:0 auto;
  width:50%;
  height:36px;
  line-height:36px;
  background:#2086ee;
  text-align:center;
  font-size:14px;
  color:#fff;
  border-radius:20px
}
.state-btn:hover{
  background:#1f82e6;
  color:#fff
}
@media screen and (max-width:1206px){
  .mail-section .mail-info .info-box .box-right .config-time dd{
  width:80px
}
.mail-advantage .advantage-list li{
  margin-right:20px;
  width:316px
}

}

/* ============================================================
   2026-09-04 本地化补充（复刻对齐 west 原页缺失的辅助类）
   ============================================================ */
/* 复制/随机 链接按钮（对齐西数 .fuzhi 蓝链样式） */
.mail-page-host .fuzhi{text-decoration:none;}
.mail-page-host .fuzhi:hover{color:#fe6b1b;text-decoration:underline;}
.mail-page-host .orange-link{color:#fe6b1b;text-decoration:none;}
.mail-page-host .orange-link:hover{color:#0b6eca;text-decoration:underline;}

/* 数字校验输入（网盘/账号输入框非空校验钩子类，无需额外视觉） */
.mail-page-host .checknuminput{}

/* 购买配置区细节 1:1（.mail-info 已带右配置卡，补充 info-title 下间距与价格行） */
.mail-page-host .info-box-price{margin-top:6px;}
.mail-page-host .info-box-agreement{margin:10px 0 6px;}
.mail-page-host .info-box-btn{width:150px;}

/* errmsg 红字（对齐西数 validate-error 前导符号已由 sprite 提供，文本跟随） */
.mail-page-host .errmsg .validate-error{color:#f00;font-size:12px;padding-left:2px;}

/* 右侧当前配置卡在移动/窄屏下放回文档流 */
@media screen and (max-width:1206px){
  .mail-page-host .mail-section .mail-config{float:none;width:auto;border-left:0;border-top:1px solid #eee;margin-top:20px;padding:20px 30px;}
}

/* ============================================================
   2026-09-04 v2/v3 修复
   1) 促销行（礼物图标 + "买2年送1年…"）必须同一行同一水平线
      ⚠️ Tailwind preflight 把 img 设 display:block → 图标被挤到文字上方独占一行
      → .promo-gift-row flex 水平排列 + img 强制非 block
   2) ⭐ v3：容器宽度有限时文字必须自适应折行、禁止戳破容器
      ⚠️ 之前 strong{white-space:nowrap} 强制单行 → 文字(210px) > 可用宽(197px) → 溢出戳破
      → strong 允许折行 + flex 收缩（min-width:0 + flex:1 1 auto）
   ============================================================ */
.mail-page-host .config-list .promo-gift-row{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:10px;
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
}
.mail-page-host .config-list .promo-gift-row img{
    display:inline-block !important;
    vertical-align:middle;
    width:16px;
    height:16px;
    flex:0 0 auto;
}
.mail-page-host .config-list .promo-gift-row strong{
    flex:1 1 auto;
    min-width:0;
    white-space:normal;      /* 允许折行 */
    word-break:break-word;   /* 极端长词也断行，杜绝戳破 */
    overflow-wrap:break-word;
    font-size:12px;
    font-weight:700;
    line-height:1.5;
}

/* ============================================================
   2026-09-04 v4 修复
   1) 红字警告行（"禁止使用我司邮局…"）—— west 原页实测 #f00
      （global.css 无 .red 规则，Tailwind body text-[#1D2129] 接管了颜色）
   ============================================================ */
.mail-page-host .red{
    color:#f00;
}

/* 2) 客户案例区对齐 west.cn：
      - 滑动式轮播：ul 横排 float，JS 控制 left 平移（每页滑 2 张 = 520px）
      - 一屏 4 张完整 + 第 5 张右缘截断露出（west 同款视觉）
      - wrapper 裁切横向溢出（箭头在 container 层不受影响）
      - 分页圆点：8x8 蓝色 #2086ee，margin 0 4px（west 实测样式） */
.mail-page-host .mail-case .case-slider .case-slider-viewport{
    overflow:hidden;
}
.mail-page-host .mail-case .case-list{
    position:relative;
    transition:left .5s ease;
}
.mail-page-host .mail-case .case-slider .case-dots{
    margin-top:0px;
    text-align:center;
}
.mail-page-host .mail-case .case-slider .case-dots ul{
    display:inline-block;
}
/* ⭐ v7 分页点 1:1 对齐 west 线上实测值：
   off 点 10×10 灰 rgb(159,158,158) 无边框；on 点 8×8 蓝 #2086ee 带边框；margin 0 4px */
.mail-page-host .mail-case .case-slider .case-dots ul li{
    display:inline-block;
    width:10px;
    height:10px;
    margin:0 4px;
    background:#9f9e9e;
    border:0;
    border-radius:16px;
    cursor:pointer;
    transition:none;
}
.mail-page-host .mail-case .case-slider .case-dots ul li.on{
    width:8px;
    height:8px;
    background:#2086ee;
    border:1px solid #2086ee;
}

/* ⭐ v7 修复案例区下方多余空白（实测 46px → 对齐 west 的 9px） */
.mail-page-host .mail-case{
    height:auto;
    min-height:290px;
    padding-bottom:8px;
    overflow:hidden;   /* 裁切第 5 张露边，同时兜住内部横向位移 */
}

/* ⭐ v15 修正（boss 2026-09-04 拍板）：赠送角标仅选中档显示，未选中不显示
   （撤销 v12 的"常显"覆盖——原版 dd.active .btn-desc{opacity:1} 即正确逻辑：
   用户点击选中某档 → 该档显示对应赠送时长；切档时旧档隐藏、新档显示，互不干扰） */