<template>
	<div style="width: 100%;overflow: hidden;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img src="public/img/services1.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/services1.png" style="width: 100%;">
				</swiper-slide>
			</swiper>
			<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
				<div class="flex-row justify-center align-center">
					<div>
						<img src="public/img/left.png" alt="">
					</div>
					<div style="margin: 0px 20px;">
						<img src="public/img/morse.png" alt="">
					</div>
					<div>
						<img src="public/img/right.png" alt="">
					</div>
				</div>
			</div> -->
		</div>
		<div class="group_2 flex-col"
			style="background-color: #ffffff;overflow: unset;position: relative;height: 629px;">
			<img src="public/img/service_01s.png" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
			<div class="service_top1">
				<div style="cursor: pointer;">
					<div style="color: #FC7428;margin-bottom: 20px;">内容创作与运营</div>
					<div style="background-color: #FC7428;width:40%;height: 8px;margin: 0 auto;"></div>
				</div>
				<div style="cursor: pointer;">
					<NuxtLink to="/proServices/">
             			专业技术服务
            		</NuxtLink>
				</div>
			</div>
			<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
				<div style="color: #768597;font-size: 16px;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
			</div>
			<div style="padding-top: 30px;z-index: 30;">
				<div style="display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 30px;">
					<div class="service_center_01s">
						<span class="service_center_01s_title">
							<img src="public/img/content_ds.png" alt="" style="margin-right: 10px;">
							覆盖各大主流平台
						</span>
						<span class="service_center_01s_text">定制【流量矩阵+内容策略+效果追踪】一体化方案</span>
						<div class="btn_lx">联系我们</div>
					</div>
					<div class="service_center_01s">
						<span class="service_center_01s_title">
							<img src="public/img/content_xx.png" alt="" style="margin-right: 10px;">
							平台搭建
						</span>
						<span class="service_center_01s_text">抖音、视频号、快手、B站、微信公众号、小红书等一站式布局</span>
						<div class="btn_lx">联系我们</div>
					</div>
					<div class="service_center_01s">
						<span class="service_center_01s_title">
							<img src="public/img/content_yy.png" alt="" style="margin-right: 10px;">
							精准运营
						</span>
						<span class="service_center_01s_text">行业大数据分析+账号定位+内容持续输出+流量裂变模型+账号运营变现</span>
						<div class="btn_lx">联系我们</div>
					</div>
				</div>
				<div style="margin-top: 30px;text-align: center;width: 100%;">
					<span class="more_bot">
						<span style="cursor: pointer;">了解更多解决方案</span>
						<img src="public/img/moreright.png" alt="" style="margin-left: 15px;width: 10px;cursor: pointer;">
					</span>
				</div>
			</div>
			
		</div>
		
		<div style="padding: 40px 0px 100px 0px;z-index: 30;background: url(/img/content_con.png) 100% no-repeat;height: 634px;">
			<div style="text-align: center;padding-top: 30px;z-index: 30;">
				<div style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
				<div class="flex-row justify-center align-center" style="margin-top: 30px;">
					<div class="video_platform ">
						<img src="public/img/mp4_video.png" alt="" style="margin-right: 10px;">
						视频平台
					</div>	
					<div class="video_wechat">
						<img src="public/img/video_wechat.png" alt="" style="margin-right: 10px;">
						微信账号
					</div>	
				</div>
			</div>
			<div
				style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">

				<div class="service-yw" style="position: relative;" v-for="(i,index) in 5" :key="index">
					<img :src="`/img/media/${i}.png`" style="width:216px;">
					<!-- <div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
						<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
						<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
							帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
					</div> -->
				</div>
				
			</div>
			<div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;margin-top: 20px;">全流程支持：脚本策划→专业拍摄→后期特效→精准投放→效果复盘</div>
		</div>
		
		<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;">
			<div>
				<img src="public/img/media/leftpeo.png" alt="">
			</div>
			<div class="flex-col">
				<div class="flex-col">
					<span class="mediat1">线上线下活动策划</span>
					<span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
				</div>
				<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
				<div>
					<div class="flex justify-center mediat3">
						<img src="public/img/media/left1.png" alt="">
						创意驱动，精准执行，从构思到落地，打通线上线下资源，一站式策划沉浸式活动，引爆品牌传播声量。
					</div>
					<div class="flex justify-center mediat3">
						<img src="public/img/media/left2.png" alt="">
						线上活动：聚焦行业热点打造爆款话题 （话题营销+直播连麦+裂变传播）助力品牌实现社交裂变传播，激活私域流量池。
					</div>
					<div class="flex justify-center mediat3">
						<img src="public/img/media/left3.png" alt="">
						线下活动：全案服务涵盖发布会、快闪店、行业峰会等多元形式，提供从创意策划、资源整合、现场执行到效果追踪的全流程专业落地解决方案。
					</div>
				</div>
			</div>
		</div>
		<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 559px;">
			
			<div class="flex-col">
				<div class="flex-col">
					<span class="mediat1">互联网新闻发布</span>
					<span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
				</div>
				<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
				<div>
					<div class="flex justify-center mediat3">
						<img src="public/img/media/right1.png" alt="">
						整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略，以专业视角与高效执行，让您的新闻迅速抢占舆论高地，第一时间触达目标受众。
					</div>
					<div class="flex justify-center mediat3">
						<img src="public/img/media/right2.png" alt="">
						权威媒体资源覆盖人民网、新浪、网易等、科技等垂直领域媒体，形成多渠道传播矩阵，深度触达目标受众，强化品牌公信力与行业影响力。
					</div>
					<div class="flex justify-center">
						<div class="group_28 flex-row justify-between numberTopBox" style="width: 390px;text-align: center;margin-left: 0;">
							<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
								<span class="text_55" style="font-size: 32px;text-align: center;width: auto;">
									<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
										:from="0" :to="1000"></n-number-animation>+</span>
								<span class="">权威媒体资源</span>
							</div>
							
							
							<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
								<span class="text_58" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
										ref="numberAnimationInstRefKH" :active="false" :from="0"
										:to="800"></n-number-animation>万</span>
								<span class="">单日曝光超</span>	
							</div>

							<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
								<span class="text_61" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
										ref="numberAnimationInstRefJS" :active="false" :from="0"
										:to="50"></n-number-animation>+</span>
								<span class="">媒体矩阵报道</span>	
							</div>
							
							
							
							
						</div>
					</div>
				</div>
			</div>
			<div>
				<img src="public/img/media/rightpeo.png" alt="">
			</div>
		</div>
		<div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 535px;width: 100%;">
			<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;"></div>
			<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;"></div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()

const serviceList = ref([
	{ name: '需求分析与规划' },
	{ name: '选址与场地设计' },
	{ name: '供配电系统' },
	{ name: '制冷系统' },
	{ name: '机柜布局' },
	{ name: '防静电设施' },
	{ name: '网络架构' },
	{ name: '安全防护' },
	{ name: '监控系统' },
	{ name: '应急预案' },
	{ name: '运维流程' },
])

const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()

const mousindex = ref(1);

const left1 = ref(0);
const top1 = ref(0);

const left2 = ref(310);
const top2 = ref(0);

const left3 = ref(620);
const top3 = ref(0);

const left4 = ref(930);
const top4 = ref(0);

const left5 = ref(310);
const top5 = ref(230);

const left6 = ref(620);
const top6 = ref(230);

const left7 = ref(930);
const top7 = ref(230);

const mous = (index: number, event: any) => {
	mousindex.value = index;
	const thisDiv = event.currentTarget;
	if (index == 1) {
		animateElement(document.querySelector('.box1'), {
			height: 428,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 196,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 310,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 196,
			left: 620,
			top: 230
		}, 200);
	}
	if (index == 2) {
		const box2 = document.querySelector('.box2');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box2).left ||
			box2.style.left ||
			box2.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 310) {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 196,
				left: 0,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
		} else {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 428,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
		}

	}
	if (index == 5) {
		const box5 = document.querySelector('.box5');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box5).left ||
			box5.style.left ||
			box5.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 310) {

			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 0,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 0,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
		} else {
			animateElement(document.querySelector('.box1'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box5'), {
				height: 428,
				left: 0,
				top: 0
			}, 200);
		}

	}
	if (index == 3) {
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 428,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box4'), {
			height: 196,
			left: 930,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 196,
			left: 310,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box7'), {
			height: 196,
			left: 930,
			top: 230
		}, 200);
	}
	if (index == 6) {
		const box6 = document.querySelector('.box6');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box6).left ||
			box6.style.left ||
			box6.offsetLeft
		);
		if (leftValue == 620) {
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 310,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 310,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 428,
				left: 620,
				top: 0
			}, 200);
		} else {
			animateElement(document.querySelector('.box2'), {
				height: 196,
				left: 620,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 230
			}, 200);
			animateElement(document.querySelector('.box6'), {
				height: 428,
				left: 310,
				top: 0
			}, 200);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);

		animateElement(document.querySelector('.box4'), {
			height: 196,
			left: 930,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);


	}
	if (index == 4) {
		const box4 = document.querySelector('.box4');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box4).left ||
			box4.style.left ||
			box4.offsetLeft
		);
		console.log(leftValue);
		if (leftValue == 930) {
			animateElement(document.querySelector('.box4'), {
				height: 428,
				left: 930,
				top: 0
			}, 200);
			animateElement(document.querySelector('.box7'), {
				height: 192,
				left: 620,
				top: 230
			}, 200);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box3'), {
			height: 196,
			left: 620,
			top: 0
		}, 200);
		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 200);
		animateElement(document.querySelector('.box6'), {
			height: 192,
			left: 310,
			top: 230
		}, 200);

	}
	if (index == 7) {
		const box7 = document.querySelector('.box7');
		//获取当前鼠标位置
		const leftValue = parseFloat(
			window.getComputedStyle(box7).left ||
			box7.style.left ||
			box7.offsetLeft
		);
		console.log(leftValue);
		//在左侧
		if (leftValue == 620) {
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 930,
				top: 0
			}, 100);
			animateElement(document.querySelector('.box4'), {
				height: 196,
				left: 930,
				top: 230
			}, 100);
			animateElement(document.querySelector('.box7'), {
				height: 428,
				left: 620,
				top: 0
			}, 100);
		} else {
			animateElement(document.querySelector('.box3'), {
				height: 196,
				left: 620,
				top: 230
			}, 100);
			animateElement(document.querySelector('.box4'), {
				height: 196,
				left: 620,
				top: 0
			}, 100);
			animateElement(document.querySelector('.box7'), {
				height: 428,
				left: 930,
				top: 0
			}, 100);
		}
		animateElement(document.querySelector('.box1'), {
			height: 196,
			left: 0,
			top: 0
		}, 100);
		animateElement(document.querySelector('.box2'), {
			height: 196,
			left: 310,
			top: 0
		}, 100);

		animateElement(document.querySelector('.box5'), {
			height: 196,
			left: 0,
			top: 230
		}, 100);
		animateElement(document.querySelector('.box6'), {
			height: 192,
			left: 310,
			top: 230
		}, 100);

	}
}


const animateElement = (element, target, duration) => {
	let start = null;
	const initialStyle = {
		width: parseFloat(getComputedStyle(element).width),
		height: parseFloat(getComputedStyle(element).height),
		left: parseFloat(getComputedStyle(element).left),
		top: parseFloat(getComputedStyle(element).top)
	};
	// 立即停止当前动画
	if (element.animationFrame) cancelAnimationFrame(element.animationFrame);

	const step = (timestamp) => {
		if (!start) start = timestamp;
		const progress = timestamp - start;
		const ratio = Math.min(progress / duration, 1);

		// 实时更新所有属性
		element.style.width = (initialStyle.width + (target.width - initialStyle.width) * ratio) + 'px';
		element.style.height = (initialStyle.height + (target.height - initialStyle.height) * ratio) + 'px';
		element.style.left = (initialStyle.left + (target.left - initialStyle.left) * ratio) + 'px';
		element.style.top = (initialStyle.top + (target.top - initialStyle.top) * ratio) + 'px';

		if (progress < duration) {
			element.animationFrame = requestAnimationFrame(step);
		} else {
			// 确保最终值精确 
			element.style.width = target.width + 'px';
			element.style.height = target.height + 'px';
			element.style.left = target.left + 'px';
			element.style.top = target.top + 'px';
		}
	}

	element.animationFrame = requestAnimationFrame(step);

}

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const swiperOptionsNews = {
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 500,
	effect: 'fade',
	loop: true,
	modules: [EffectFade, Autoplay, Navigation],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}

// 新闻数据
onMounted(() => {
	nextTick(() => {
		animate()
	})
})
const animate = () => {
	const sr = ScrollReveal();
	sr.reveal('.service-1', {
		origin: "bottom",
		distance: "50px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 30,
		mobile: true,
	})
	sr.reveal('.service-01', {
		origin: "right",
		distance: "550px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 130,
		mobile: true,
	})
	sr.reveal('.reveal-left', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 500,
		mobile: true,
	})
	sr.reveal('.service-yw', {
		origin: "left",
		distance: "50px",
		duration: 800,
		easing: 'cubic-bezier(0.5, 0, 0, 1)', // 缓动函数
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		useDelay: 500,
		mobile: true,
	})
	sr.reveal('.service-wl-a', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 200,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.service-wl-b', {
		origin: "left",
		distance: "50px",
		duration: 800,
		delay: 300,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	//service-item
	sr.reveal('.service-item', {
		duration: 800,
		delay: 300,
		opacity: 0,
		scale: 0.5,
		reset: true,
		mobile: true,
	})
	sr.reveal('.numberTopBox', {
		origin: "top",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
		beforeReveal: function (el: any) {
			numberAnimationInstRef.value.play()
			numberAnimationInstRefKH.value.play()
			numberAnimationInstRefJS.value.play()

		},
	})
}
</script>

<style scoped lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";

:deep(.dswper .swiper-slide-next) {
	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

:deep(.dswper .swiper-slide-prev) {
	transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}

.service_023 {
	background: url(/public/img/service_023.png) no-repeat center center;
	width: 100%;
	height: 100%;
	background-size: 100%;
	height: 645px;
	padding-top: 80px;
	z-index: 30;
}

.service_033 {
	background: url(/public/img/service_033.png) no-repeat center center;
	width: 100%;
	height: 100%;
	background-size: 100%;
	height: 800px;
}

.service_bottom {
	background: url('public/img/service_048.png') no-repeat center center;
	background-size: 100%;
	color: #ffffff !important;
}

.service_bottom_no {
	background-color: #F8F8F8;

}

.service_051 {
	background: url('public/img/service_051.png') no-repeat center center;
	background-size: 100%;
	color: #ffffff !important;
	height: 640px;
}

.service-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	/* 强制固定 3 列 */
	gap: 20px;
	max-width: 715px;
	margin: 80px 0px 0px 250px;
}

.service-item {
	display: flex;
	align-items: center;
	width: 225px;
	padding: 20px;
	border: 1px solid #FFFFFF;
	box-sizing: border-box;
	/* 确保宽度计算包含边框 */
	justify-self: start;
	cursor: pointer;
	/* 强制每个单元格左对齐 */
}

.service-item:hover {
	background-color: #4A4C5F;
}

.service-wl {
	position: relative;
	width: 380px;
	height: 236px;
	transition: all 0.3s ease;
	overflow: hidden;
	cursor: pointer;
}

.service-wl:hover {
	transform: scale(1.1);
}

.service-yw {
	position: relative;
	transition: all 0.3s ease;
	cursor: pointer;
	border-radius: 12px;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border: 2px solid transparent;
		border-radius: 12px;
		background: linear-gradient(45deg, #4D8FFF, #87CEFA) border-box;
		-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: destination-out;
		mask-composite: exclude;
		transform: scale(0.95);
		opacity: 0;
		transition: all 0.3s ease;
		pointer-events: none;
	}

	&:hover {
		transform: translateY(-5px);

		&::before {
			transform: scale(1);
			opacity: 1;
		}
	}
}

.service_top1 {
	font-size: 24px;
	padding-top: 30px;
	z-index: 30;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
}

.service_top1_width {
	width: 30%;
}

.service_bottom_01 {
	margin: 0 auto;
	width: 62%;
	position: relative;
	margin-top: 30px
}

.service-02 {
	text-align: center;
	padding-top: 30px;
	z-index: 30;
	color: #ffffff;
}
.service_center_02{
	width: 30%;
}
@media (max-width: 1440px) {
	.service_center_02{
		width: 40%;
	}
	.service_top1 {
		padding-top: 16px;
	}

	.service_top1_width {
		width: 40%;
	}

	.service_023 {
		height: 485px;
		padding-top: 0px;
	}

	.service_bottom_01 {
		width: 84%;
	}

	.service_051 {
		height: 480px;
	}

	.service-container {
		margin: 30px 0px 0px 140px;
	}
	.service-item{
		padding: 14px;
	}
}
.service_center_01s{
	background: url('/public/img/content_top.png') 100% no-repeat;
	width: 380px;
	height: 196px;
	display: flex;
	flex-direction: column;
	justify-content: start;
	padding-left: 30px;
	.service_center_01s_title{
		margin-top: 30px;
		width: 180px;
		height: 18px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 18px;
		color: #FC7428;
		line-height: 18px;
		text-align: left;
		font-style: normal;
		text-transform: none;
		display: flex;
		align-items: center;
	}
	.service_center_01s_text{
		margin-top: 20px;
		width: 325px;
		height: 20px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #768597;
		line-height: 20px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.btn_lx{
		margin-top: 40px;
		width: 90px;
		height: 32px;
		background: linear-gradient( 270deg, #FC7428 0%, #FFA06B 100%);
		border-radius: 116px 116px 116px 116px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 400;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 32px;
		text-align: center;
	}
}
.more_bot{
	height: 16px;
	font-family: Microsoft YaHei UI, Microsoft YaHei UI;
	font-weight: 400;
	font-size: 16px;
	color: #FC772D;
	line-height: 16px;
	font-style: normal;
	text-transform: none;
	display: flex;
    justify-content: center;
}
.video_platform{
	width: 179px;
	height: 48px;
	background: url(public/img/video.png) 100% no-repeat;
	line-height: 44px;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 700;
	font-size: 18px;
	color: #FC7428;
	font-style: normal;
	text-transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.video_wechat{
	width: 185px;
	height: 52px;
	background: url(public/img/wechat1.png) 100% no-repeat;
	line-height: 46px;
	font-family: Source Han Sans, Source Han Sans;
	font-weight: 700;
	font-size: 18px;
	color: #FFFFFF;
	font-style: normal;
	text-transform: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bottom-3s{
	width: 100%;
	.mediat1{
		width: 272px;
		height: 49px;
		font-family: Source Han Sans, Source Han Sans;
		font-weight: 700;
		font-size: 34px;
		color: #222222;
		line-height: 49px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.mediat2{
		margin-top: 20px;
		width: 272px;
		height: 16px;
		font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
		font-weight: 400;
		font-size: 16px;
		color: #768597;
		line-height: 16px;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}
	.mediat3{
		margin-top: 30px;
		width: 560px;
height: 40px;
font-family: Source Han Sans, Source Han Sans;
font-weight: 400;
font-size: 14px;
color: #3D3D3D;
line-height: 20px;
text-align: left;
font-style: normal;
text-transform: none;
img{
	margin-right: 30px;
}
	}
}
</style>
