/* ============================================================
   首页专属样式 · 复刻自 swiftpass2018 index/page.less
   ============================================================ */

.mobile_only { display: none; }

/* ---------- Banner(固定定位 + 占位撑开) ---------- */
.index_wrap { min-width: 1200px; }
.index_banner { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: #F8FAFC; }
.index_top_swiper { height: 100%; }
.index_top_swiper .table { height: 100%; }
.index_top_swiper .swiper-wrapper { height: 100%; }
.index_top_swiper .swiper-slide { width: 100%; height: 100%; }
.index_top_swiper .inde_top_1 { background: url(../images/imgs/index_top_banner_02.jpg) no-repeat 50% 50%/cover; }
.index_top_swiper .inde_top_2 { background: url(../images/imgs/index_top_banner_01.jpg) no-repeat 50% 50%/cover; }
.top_swiper_cont { width: 1200px; margin: 0 auto; position: relative; top: 50px; }
.top_swiper_cont > p { font-size: 30px; color: #fff; line-height: 50px; }
.top_swiper_cont > p.banner_big { font-size: 50px; }
.top_swiper_cont > p.banner_small { font-size: 20px; line-height: 40px; }
.top_swiper_cont.one_txt { top: 0; }
.top_swiper_cont.one_txt > p { text-align: center; }
.top_swiper_cont.one_txt > p.one_txt_p1 { font-size: 50px; line-height: 70px; margin-bottom: 30px; }
.top_swiper_cont.one_txt > p.one_txt_p2 { font-size: 20px; line-height: 40px; }
#topBlank { height: 900px; }
.index_cont { position: relative; z-index: 1; background: #fff; }

/* Banner 分页圆点 */
.index_top_swiper .swiper-pagination { position: absolute; bottom: 40px; width: 100%; text-align: center; z-index: 5; }
.index_top_swiper .swiper-dot { display: inline-block; width: 40px; height: 4px; margin: 0 5px; border-radius: 2px;
  background: rgba(255,255,255,0.3); cursor: pointer; transition: all .3s; }
.index_top_swiper .swiper-dot.active { background: rgba(255,255,255,1); }

/* ---------- 新闻动态（swiper：每屏一行 3 张卡，圆点/拖拽切换） ---------- */
.news_swiper { width: 1120px; margin: 50px auto 0; position: relative; overflow: hidden; padding-bottom: 40px; }
.news_swiper .swiper-wrapper { display: flex; }
.news_swiper .swiper-slide { flex: 0 0 100%; }
.news_swiper .swiper-pagination { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 5; }
.news_swiper .swiper-dot { display: inline-block; width: 40px; height: 4px; margin: 0 5px; border-radius: 2px;
  background: rgba(0,0,0,0.15); cursor: pointer; transition: background .3s; }
.news_swiper .swiper-dot.active { background: var(--sp-blue); }
.news_wrap { margin: 20px; }
.news_wrap li { box-sizing: content-box; float: left; margin-right: 30px; background: #fff; border-radius: 6px;
  width: 300px; height: 364px; padding: 20px; position: relative; cursor: pointer; transition: all .3s ease; }
.news_wrap li:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.news_wrap li:nth-child(3n) { margin-right: 0; }
.news_wrap .news_img { height: 200px; overflow: hidden; border-radius: 4px; }
.news_wrap .news_img img { width: 100%; height: 100%; object-fit: cover; }
.news_wrap .news_txt { margin-top: 20px; text-align: left; }
.news_wrap .news_title { font-weight: normal; font-size: 20px; line-height: 26px; height: 26px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news_wrap .news_cont { font-size: 14px; line-height: 20px; color: #999; margin-top: 10px; height: 60px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.news_wrap .news_footer { font-size: 14px; position: absolute; left: 20px; right: 20px; bottom: 20px; }
.news_wrap .news_footer > span:nth-child(1) { font-family: Arial; color: #999; }

/* ---------- 支付接入能力 ---------- */
.logo_wrap { margin: 70px auto 0; width: 1130px; }
.logo_wrap > ul li { float: left; margin-right: 30px; margin-bottom: 30px; background: #fff;
  width: 258px; height: 210px; border-radius: 6px; border: 1px solid #dddddd; }
.logo_wrap > ul li:nth-child(4n) { margin-right: 0; }
.logo_wrap > ul li h2 { font-weight: normal; font-size: 20px; margin-top: 24px; }
.logo_wrap > ul li h3 { font-weight: normal; font-size: 14px; color: #999; margin-top: 16px; }

/* 各支付彩色圆标 */
.iconplus_wraper { display: inline-block; width: 70px; height: 70px; text-align: center;
  border-radius: 70px; position: relative; overflow: hidden; }
.iconplus_wraper.border { border: 1px solid #f1f1f1; }
.iconplus_wraper svg { position: absolute; }
.iconplus_wraper.qq svg { left: 13px; top: 13px; font-size: 45px; }
.iconplus_wraper.wx { background: #0ec355; }
.iconplus_wraper.wx svg { left: 13px; top: 13px; font-size: 45px; color: #fff; }
.iconplus_wraper.union svg { left: 8px; top: 8px; font-size: 55px; }
.iconplus_wraper.zfb { background: #00a0e8; }
.iconplus_wraper.zfb svg { left: 7px; top: 7px; font-size: 60px; color: #fff; }
.iconplus_wraper.apple svg { left: -10px; top: -6px; font-size: 90px; }
.iconplus_wraper.jd { background: linear-gradient(to bottom,#fd3d42,#d71121); }
.iconplus_wraper.jd svg { left: 10px; top: 9px; font-size: 52px; color: #fff; }
.iconplus_wraper.yzf { background: linear-gradient(to bottom,#fc4f51,#ff3059); }
.iconplus_wraper.yzf svg { left: 2px; top: 2px; font-size: 67px; color: #fff; }
.iconplus_wraper.hb { background: #D3136F; }
.iconplus_wraper.hb svg { left: 10px; top: 9px; font-size: 50px; color: #fff; }

/* ---------- 交易解决方案 ---------- */
.pay_wrap { margin: 70px auto 0; width: 1040px; }
.pay_wrap > ul li { float: left; margin-right: 190px; margin-bottom: 54px; width: 220px; height: 242px; }
.pay_wrap > ul li:nth-child(3n) { margin-right: 0; }
.pay_wrap > ul li h2 { font-weight: normal; font-size: 20px; margin-top: 24px; }
.pay_wrap > ul li h3 { font-weight: normal; font-size: 14px; color: #999; margin-top: 16px; }
.pay_icon_wraper { display: inline-block; width: 120px; height: 120px; border-radius: 120px; position: relative;
  background: linear-gradient(150deg,#25adff,#318fff 50%,#3b75ff 128px); box-shadow: 0 3px 7px rgba(56,124,255,0.2); }
.pay_icon_wraper svg { position: absolute; left: 28px; top: 28px; font-size: 65px; color: #fff; }

/* ---------- 技术支持 ---------- */
.tech_wrap2 { margin: 70px auto 130px; width: 1037px; height: 380px; position: relative; z-index: 3;
  background: url(../images/imgs/index_tech_support2.png) no-repeat; background-size: 100% 100%; }
/* #techImg 初始隐藏,视频起播 1400ms 后由 JS 加 .visible 淡入(老站行为) */
#techImg { visibility: hidden; }
#techImg.visible { visibility: visible; }
#techVideo { position: absolute; left: 50%; margin-left: -214px; bottom: 130px; }

/* ---------- 增值服务 ---------- */
.valueadd_wrap { margin: 70px auto 0; width: 1080px; }
.valueadd_wrap > ul li { float: left; margin-right: 30px; background: #fff; border-radius: 6px;
  width: 340px; height: 360px; cursor: pointer; transition: all .3s ease; overflow: hidden; }
.valueadd_wrap > ul li:hover { transform: scale(1.08); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.valueadd_wrap > ul li:nth-child(3n) { margin-right: 0; }
.valueadd_wrap > ul li h2 { font-weight: normal; font-size: 20px; }
.valueadd_wrap > ul li h3 { font-weight: normal; font-size: 14px; color: #999; margin: 9px auto auto; width: 220px; }
.valueadd_wrap .value_img { height: 220px; }
.valueadd_wrap .value_img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px 6px 0 0; }
.valueadd_wrap .value_txt { height: 140px; }

/* ---------- 跨境服务地图 ---------- */
.oversea_wrap { margin: 70px auto 0; width: 704px; }
.oversea_wrap .map { height: 400px; position: relative;
  background: url(../images/imgs/index_map.png) no-repeat center center; }
.map_beacon li { position: absolute; cursor: pointer; width: 16px; height: 22px;
  background: url(../images/imgs/icon_place.png) no-repeat; visibility: hidden; }
/* 信标进场后由 .visible 恢复可见；hover tooltip 的 span 单独控制,不受影响 */
.map_beacon li.visible { visibility: visible; }
.map_beacon li > span { position: absolute; top: -25px; left: 50%; margin-left: -50px; width: 100px;
  font-size: 14px; color: #3E6DFF; letter-spacing: 2px; visibility: hidden; font-weight: bold; text-align: center; }
.map_beacon li > span.left { top: 0; margin-left: -94px; }
.map_beacon li > span.right { top: 0; margin-left: -5px; }
.map_beacon li:hover > span { visibility: visible; }
.map_beacon li:nth-child(1){left:135px;top:124px}
.map_beacon li:nth-child(2){left:312px;top:70px}
.map_beacon li:nth-child(3){left:330px;top:100px}
.map_beacon li:nth-child(4){left:428px;top:170px;z-index:9}
.map_beacon li:nth-child(5){left:560px;top:170px;z-index:9}
.map_beacon li:nth-child(6){left:523px;top:218px;z-index:10}
.map_beacon li:nth-child(7){left:523px;top:197px;z-index:8}
.map_beacon li:nth-child(8){left:529px;top:190px;z-index:7}
.map_beacon li:nth-child(9){left:529px;top:138px;z-index:6}
.map_beacon li:nth-child(10){left:543px;top:178px;z-index:6}
.map_beacon li:nth-child(11){left:552px;top:174px;z-index:6}
.map_beacon li:nth-child(12){left:574px;top:140px;z-index:5}
.map_beacon li:nth-child(13){left:600px;top:132px}
.map_beacon li:nth-child(14){left:660px;top:340px}
.map_beacon li:nth-child(15){left:580px;top:295px}
.map_beacon li:nth-child(16){left:335px;top:92px;z-index:9}
.map_beacon li:nth-child(17){left:210px;top:254px}
.map_beacon li:nth-child(18){left:370px;top:125px}
.map_beacon li:nth-child(19){left:110px;top:74px}
.map_beacon li:nth-child(20){left:345px;top:72px;z-index:9}
.map_beacon li:nth-child(21){left:345px;top:97px;z-index:9}
.map_beacon li:nth-child(22){left:287px;top:52px}
.map_beacon li:nth-child(23){left:540px;top:250px}
.map_beacon li:nth-child(24){left:305px;top:90px;z-index:9}
.map_beacon li:nth-child(25){left:395px;top:155px}
.map_beacon li:nth-child(26){left:415px;top:160px}
.map_beacon li:nth-child(27){left:342px;top:116px;z-index:9}
.map_beacon li:nth-child(28){left:545px;top:230px}
.map_beacon li:nth-child(29){left:478px;top:213px;z-index:9}
.map_beacon li:nth-child(30){left:458px;top:243px;z-index:9}
.map_beacon li:nth-child(31){left:315px;top:125px}
.map_beacon li:nth-child(32){left:310px;top:145px}
.map_beacon li:nth-child(33){left:335px;top:82px}
.map_beacon li:nth-child(34){left:345px;top:58px}
.map_beacon li:nth-child(35){left:565px;top:210px}
.map_beacon li:nth-child(36){left:365px;top:90px;z-index:9}
.map_beacon li:nth-child(37){left:498px;top:60px}
.map_beacon li:nth-child(38){left:370px;top:305px}
/* 海外移动支付 / 海外增值业务 两列文本(原站 .oversea_wrap > ul) */
.oversea_wrap > ul { list-style: none; margin-top: 40px; }
.oversea_wrap > ul li { float: left; text-align: left; position: relative; }
.oversea_wrap > ul li:before { content: ""; position: absolute; left: 0; top: -20px; width: 40px; border-top: 3px solid #387EFF; }
.oversea_wrap > ul li:nth-child(1) { width: 62%; }
.oversea_wrap > ul li:nth-child(1) h2, .oversea_wrap > ul li:nth-child(1) h3 { margin-left: 40px; }
.oversea_wrap > ul li:nth-child(1):before { left: 40px; }
.oversea_wrap > ul li:nth-child(2) { width: 38%; }
.oversea_wrap > ul li h2, .oversea_wrap > ul li h3 { font-weight: normal; }
.oversea_wrap > ul li h2 { font-size: 20px; }
.oversea_wrap > ul li h3 { font-size: 14px; color: #999999; margin-top: 14px; width: 230px; }

/* ---------- 服务银行 ---------- */
.bank_swiper { width: 1100px; height: 550px; margin: 40px auto 0; position: relative; overflow: hidden; }
.bank_swiper .swiper-wrapper { height: 100%; }
.bank_swiper .swiper-slide { height: 100%; text-align: center; }
.bank_swiper .swiper-pagination { position: absolute; bottom: 10px; left: 0; width: 100%; text-align: center; z-index: 5; }
.bank_swiper .swiper-dot { display: inline-block; width: 40px; height: 4px; margin: 0 5px; border-radius: 2px;
  background: rgba(0,0,0,0.15); cursor: pointer; transition: background .3s; }
.bank_swiper .swiper-dot.active { background: var(--sp-blue); }

/* ---------- SVG 图标基础 ---------- */
.iconplus { width: 1em; height: 1em; fill: currentColor; overflow: hidden; }
.anchor_wallyt .iconfont { position: relative; left: -2px; }

/* 首屏进场动画的 keyframes 与类(bounceIn / bounceInDownShort / fadeIn* 等)
   统一由 swiftpass.css 提供,是与原站逐帧对齐的版本。
   此处原有一份简化副本会覆盖它(bounceIn 少了回弹段、bounceInDownShort 只滑不抖),已删除。 */