/************ 轮播 ************/
/* 轮播容器 */
.swiper-container {	width: 100%; height: 540px;	margin: 0 auto; position:relative;}
.swiper-list { width: 100%; height: 100%;}
.swiper-item { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display:none;}
.swiper-item.active { display:block;}
.swiper-item img { width: 100%;	height: 100%; object-fit: cover;}

/* 左右切换按钮 */
.swiper-btn-container{ position:relative; top:-50%; display:flex; justify-content: space-between;}
.swiper-btn { width:50px; height:50px; background-color: rgba(0, 0, 0, 0.2); border-radius: 50%; cursor: pointer; transition: background-color 0.3s; display:flex; justify-content: center; align-items: center;}
.swiper-btn:hover { background-color: rgba(0, 0, 0, 0.8);}

/* 指示器（小圆点） */
.swiper-indicators { position: absolute; bottom: 80px; width:100%; display:flex; justify-content:center; display:none;}
.indicator { width: 12px; height: 12px; display:block; margin:0 5px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s;}
.indicator.active { background-color: rgba(255, 255, 255, 1);}

/************ 闪卡 ************/
.card-container{ position:relative; top:-50px; display:flex; justify-content: space-between;}
.card-item{ width:280px; height:145px; border-radius: 10px; overflow:hidden;}
.card-item img{ width:100%; height:100%; object-fit: cover; transition: transform 0.3s ease; transform-origin: center center;}
.card-item:hover img { transform: scale(1.2);}

/************ 介绍 ************/
/**/
.h2-title{ font-size:36px; font-weight:bold; text-align:center; color:#191c21; letter-spacing:2px;}
.h2-title span{ color:#4db571;}
.h2-detail{ margin:20px 0 50px; font-size: 18px; color: #666; text-align: center;}
.h3-title{ font-size:24px; font-weight:bold; margin-bottom:20px;}
.h3-title span{ color:#4db571;}
.h3-detail{ margin:20px 0 50px; font-size: 18px; color: #666; text-align: center;}

/**/
.ppjs{ padding:80px 0; margin-top:-5rem;}
.ppjs-cover{ display:flex; justify-content: center;}
.au-img{ width:360px; border-radius:30px; overflow:hidden;}
.au-img video{ width:100%;}
.au-con{ width:700px; margin-left:30px;}
.au-con p{ font-size:16px; line-height:2; color:#666; margin-bottom:18px; text-indent:34px;}

/**/
.syhc{ padding:80px 0; background-image: linear-gradient(94deg, #d5ecff .58%, #eaeaff 99.6%);}
.syhc-ls { display:flex; justify-content: center;}
.syhc-ls li{ margin:0 10px; transition:.5s; padding:230px 10px 10px 10px; width:240px;}
.syhc-ls li:hover{ box-shadow: 0 2px 14px 3px rgba(0, 0, 0, .1); transform:translateY(-30px); border-radius:5%;}
.syhc-ls li.syhc-icon1{ background:url(syhc/banner1616757907000.png) #FFF no-repeat; background-size:contain;}
.syhc-ls li.syhc-icon2{ background:url(syhc/banner1616757927000.png) #FFF no-repeat; background-size:contain;}
.syhc-ls li.syhc-icon3{ background:url(syhc/banner1616758037000.png) #FFF no-repeat; background-size:contain;}
.syhc-ls li.syhc-icon4{ background:url(syhc/banner1616758085000.png) #FFF no-repeat; background-size:contain;}
.syhc-tit{ font-size:24px; font-weight:bold; text-align:center; margin-bottom:20px;}
.syhc-ls p{ font-size:15px; line-height:1.8; color: #666;}

/**/
.why{ padding:80px 0;}
.why-ls{ display:flex; flex-wrap: wrap;}
.why-ls li{ margin:0 0 40px 40px; background:#FFF; display:flex; position:relative; overflow:hidden; transition: .5s; border:.1rem rgba(0, 0, 0, .1) solid; border-radius:10px;}
.why-ls li:hover{ box-shadow: 5px 5px 10px rgba(0, 0, 0, .1);}
.why-tit{ margin:20px 0 20px 20px; font-size:24px; font-weight:bold;}
.why-text{ width:250px;}
.why-text p{ margin-left:20px; line-height:1.6; font-size:16px; color:#999;}
.why-icon1, .why-icon2, .why-icon3, .why-icon4{ width:245px; height:208px; background-size:cover; border-radius:0 5% 5% 0;}
.why-icon1{ background:url(why/why-1.jpg) no-repeat;}
.why-icon2{ background:url(why/why-2.jpg) no-repeat;}
.why-icon3{ background:url(why/why-3.jpg) no-repeat;}
.why-icon4{ background:url(why/why-4.jpg) no-repeat;}

/**/
.product{padding:80px 0; background: radial-gradient(ellipse at top left, rgba(178, 245, 242, 0.6) 0%, transparent 60%), radial-gradient(ellipse at top right, rgba(255, 190, 205, 0.45) 0%, transparent 65%), radial-gradient(ellipse at bottom right, rgba(145, 210, 255, 0.55) 0%, transparent 70%), radial-gradient(ellipse at bottom center, rgba(255, 210, 218, 0.38) 0%, transparent 75%), radial-gradient(ellipse at bottom left, rgba(240, 232, 250, 0.4) 0%, transparent 65%), #f8fbff; filter: blur(0.5px);}
.pro-tabs{ display:flex; justify-content: center;}
.pro-tabs a{ background: rgba(77, 181, 113, 1); border-radius: 10px; padding: 10px 30px; font-size: 18px; color: #fff; margin:0 10px 30px 10px; display:inline-block; transition: .5s ease;}
.pro-tabs a:hover{ background: rgba(77, 181, 113, .8);}
.pro-fra{ display:flex; justify-content: center;}
#pro-img{ border-radius:10px; width:800px; height:100%;}
#pro-ls{ margin-left:16px;}
#pro-ls li{ width: 144px; height: 81px; margin-bottom:9px; border-radius:8px; border: 4px solid transparent; box-sizing: border-box; overflow:hidden;}
#pro-ls li:hover{ border:4px #4db571 solid;}
#pro-ls li img{ width:100%; height:100%;}

/**/
.store{ padding:80px 0; background:#f3f5ff;}
.store-items{ display:flex; justify-content: space-evenly;}
.store-items a{ width:180px; height:70px; background:#FFF; border-radius: 35px; transition:all .3s ease; display:flex; justify-content: center; align-items: center;}
.store-items a:hover{ transform: translateY(-10px); box-shadow: 0 4px 10px #0003;}
.store-items .item{ width:130px; height:40px; background:url(icon.png) no-repeat; background-size:600px;}
.store-items .tb{ background-position: 0 -40px;}
.store-items .bl{ background-position: 0 0;}
.store-items .dy{ background-position: -130px 0;}
.store-items .xhs{ background-position: -260px 0;}
.store-items .wb{ background-position: -390px 0;}
.store-items .gzh{ background-position: -260px -40px;}
.store-items .sph{ background-position: -390px -40px;}

/**/
.hzhb{ padding:80px 0;}
#partners{ margin-top:50px; height: 260px; background:url(logos.png) repeat-x 50%; background-size: auto 100%; transition: background-position 5s linear;}

/************ 侧面浮动 ************/
.slide-bar{ position: fixed; width: 80px; right: 5%; bottom: 10%; z-index: 999; background: #fff; box-shadow: 0 2px 14px 3px rgba(0, 0, 0, .1); border-radius: 4px 0 0 4px;}
.slide-bar_item { padding: 15px 0 15px; position: relative; text-align: center; cursor:pointer;}
.slide-bar_item:hover{ background: rgba(0, 0, 0, 0.6); color:#FFF;}
.slide-bar_item:hover .slide-bar_item_tips{ visibility:visible; left:-140px; opacity:1}
.slide-bar_item:hover .slide-bar_item_scan{ visibility:visible;}
.slide-bar_item_img { display: inline-block; height: 50px; width: 50px; background-repeat: no-repeat; background-size:cover;}
.slide-bar_item_img.vx{ background-image:url(slide/weixin.png);}
.slide-bar_item_img.zl{ background-image:url(slide/down.png);}
.slide-bar_item_img.tb{ background-image:url(slide/taobao.png);}
.slide-bar_item_img.sm{ background-image:url(slide/sm.png);}
.slide-bar_item_img.xk{ background-image:url(slide/xk.png);}
.slide-bar_item_img.gwc{ background-image:url(slide/gwc.png);}
.slide-bar_item_img.kf{ background-image:url(slide/kf.png);}
.slide-bar_item_img.fk{ background-image:url(slide/fk.png);}
.slide-bar_item_img.arrow{ background-image:url(slide/arrow.png);}
.slide-bar_item_scan { position: absolute; z-index: 1; background: #fff; border: 1px solid #e6e6e6; padding: 10px; left: -206px; color: #e02727; font-size: 14px; visibility:hidden; transform:translateY(-50%);}
.slide-bar_item_tips{ position:absolute; width:123px; height:56px; overflow:hidden; line-height:56px; text-align:center; font-size:18px; font-weight:600; border-radius:4px; z-index:1; color:#fff; top:50%; left:-180px; transform:translateY(-50%); opacity:0; visibility:hidden; background-color:#f13232; transition:left .3s ease-in-out .1s,opacity .3s ease-in-out .1s,visibility .3s}
.slide-bar_item_tips:after{ border-bottom:5px solid transparent; border-top:5px solid transparent; border-left:6px solid #f13232; right:-6px; content:""; height:0; position:absolute; top:2rem; width:0; z-index:1;}
.thin-line { margin: 0 auto; width: 4.2rem; height: .1rem; background: #eee;}