lingrui-web/pages/phone_index.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 219px;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<video class="video_1" :autoplay="true" :loop="true" :muted="true" :playsinline="true"
						:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;"></video>
				</swiper-slide>
				<swiper-slide>
					<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;height: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;height: 100%;">
				</swiper-slide>
			</swiper>
		</div>
		<div class="group_2 flex-col">
			<div class="box_2 flex-col">
				<div class="group_3 ">
					<div class="group_4 flex-col leftBox">
						<div class="text-group_1 flex-col justify-between">
							<div class="text_7">灵睿的互联网之道</div>
							<div class="text_8">
								The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
							</div>
						</div>
						<div style="gap: 50px;;display: flex;justify-content: center;margin-top: 50px;">
							<div @click="openType(1)" :class="typeId == 1 ? 'text_9' : 'text_11'">公司简介</div>
							<div @click="openType(2)" :class="typeId == 2 ? 'text_9' : 'text_11'">运营方法论</div>
							<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
						</div>
						<div class="box_3 flex-col" style="justify-content: center;">
							<div v-if="typeId == 1" class="box_4 flex-col"></div>
							<div v-if="typeId == 2" class="box_4 flex-col" style="margin-left: 120px;"></div>
							<div v-if="typeId == 3" class="box_4 flex-col" style="margin-left: 250px;"></div>
						</div>
						<div class="text_12" v-if="typeId == 1">
							洛阳灵睿网络技术有限公司
							<br>
							——智慧信息化与数字内容服务领航者
							<br>
							洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以"技术赋能场景，内容驱动价值"为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
							<br>
							专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
						</div>
						<div class="text_12" v-if="typeId == 2">

							在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong>
							我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。
							灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong>
						</div>
						<div class="text_12" v-if="typeId == 3">
							在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong>
							我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
							灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
						</div>
						<div class="text-wrapper_2 flex-col">
							<nuxt-link to="/aboutUs/" class="text_13">
								<span>查看全部</span>
							</nuxt-link>
						</div>
					</div>
					<div @click="videoShow = true"
						class="group_5 flex-col justify-center align-center rightBox cursor-pointer">
						<div class="section_1 flex-col">
							<div class="image-wrapper_2 flex-col">
								<img class="image_5" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/bf.png`" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="group_2 flex-col">
			<div class="box_5 flex-col">
				<span class="text_14 topBox">我们的业务</span>
				<span class="text_15 topBox">
					Our&nbsp;BusinessWay
				</span>
				<div style="padding: 20px;">
					<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
						<div class="group_6 flex-col">
							<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
								<div class="text-group_2 flex-col justify-between">
									<span class="text_17" style="color: #0256FF;">
										专业技术服务
									</span>
									<span class="text_16" style="color: #0256FF;">
										专业提供互联网技术支持，助力企业高效发展
									</span>
								</div>
								<div class="image-wrapper_3s flex-col align-center">
									<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1s.png`" />
								</div>

							</div>
						</div>
						<div class="group_10s flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/aiyingyong.png`" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">AI应用与落地</span>
								<span class="text_19">
									从模型选型、数据处理、算法优化到应用集成与部署的全栈服务
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/kaifapeizhi.png`" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">定制软件开发</span>
								<span class="text_19">
									为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/a-yunweishuju1x.png`" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">IT运维服务</span>
								<span class="text_19">
									专业守护数据，防御威胁，护航企业数字安全
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/wangluoanquanshebei.png`" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">网络与信息安全</span>
								<span class="text_19">
									专业提供网络信息安全防护、实时监测与风险处置服务
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/yekuogongdianfangan.png`" />
							</div>
							<div class="text-group_3 flex-col justify-between">
								<span class="text_18">智慧化解决方案</span>
								<span class="text_19">
									利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
								</span>
							</div>
						</div>
					</div>

					<div class="rightBox section_2sa flex-col">
						<div class="group_6s flex-col">
							<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
								<div class="text-group_2 flex-col justify-between">
									<span class="text_17">
										内容创作与运营
									</span>
									<span class="text_16" style="color: #FC7428;">
										构建全域影响力，赋能品牌长效增长
									</span>
								</div>
								<div class="image-wrapper_3s flex-col align-center">
									<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1.png`" />
								</div>

							</div>
						</div>
						<div class="group_10s flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/quanmeiti.png`" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">全媒体推广解决方案</span>
								<span class="text_19">
									覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/pingpai.png`" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">品牌账号代运营</span>
								<span class="text_19">
									全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer"
									:src="`${cdnUrl}/img/xianshang.png`" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">线上线下活动策划</span>
								<span class="text_19">
									专业守护数据，防御威胁，护航企业数字安全
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/news.png`" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">互联网新闻发布</span>
								<span class="text_19">
									整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
								</span>
							</div>
						</div>
						<div class="group_10 flex-col"></div>
						<div class="group_7 flex-row justify-between">
							<div class="image-wrapper_5 flex-col">
								<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/daren.png`" />
							</div>
							<div class="text-group_3_3 flex-col justify-between">
								<span class="text_18">IP孵化与达人合作</span>
								<span class="text_19">
									深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
								</span>
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div style="background-color: #ffffff;">
			<div class="box_7 flex-col">
				<span class="text_24 topBox">行业案例</span>
				<span class="text_15 topBox">Industry&nbsp;Cases</span>
				<div class="dswper">
					<swiper ref="swiper_exp" 
						:slidesPerView="isMobile ? 1 : 2" 
						loop 
						:autoplay="false" 
						:modules="modules"
						:watchSlidesProgress="true" 
						@swiper="onSwiperExp">
						<swiper-slide v-for="(item, index) in 14" :key="index">
							<div style="padding: 20px;">
								<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
							</div>
						</swiper-slide>
					</swiper>
					<div class="flex-row justify-center align-center w-full" style="gap: 30px;height:40px;">
						<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
							:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="box_11 flex-col">
			<div class="text-wrapper_10">
				<span class="text_41">新闻动态</span>
			</div>
			<div class="text-wrapper_11">
				<span class="text_42">news information</span>
			</div>
			<div v-for="item in newsList">
				<div class="box_12 flex-row justify-center">
				<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
					:src="item.image" style="cursor: pointer;;object-fit: cover;" />
				<div class="box_13 flex-col" @click="openUrl(item.id)">
					<div class="text-group_6">
						<div class="one-line-ellipsis news_title_home">
							{{ item.title }}
						</div>
						<div class="two-line-ellipsis"
							style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
							{{ item.subtitle }}
						</div>
					</div>
					<div class="group_22 flex-row">
						<div class="section_6 flex-col"></div>
						<span class="text_44">{{ item.cate.name }}</span>
						<span class="text_45">{{ retTime(item.release_time_text) }}</span>
					</div>
				</div>
			</div>
			</div>
			<div class="box_16 flex-row">
				<div class="text-wrapper_12 flex-col">
					<nuxt-link to="/societyDutyNew/" class="text_52">
						<span>查看更多</span>
					</nuxt-link>
				</div>
			</div>
		</div>
		<div class="box_18 flex-col" style="overflow: hidden;">
			<span class="text_53" style="color: #fff;">联系我们</span>
			<span class="text_54" style="color: #fff;">cooperative&nbsp;partner&nbsp;</span>

			<div class="numberTopBox" style="margin:0 auto;padding-bottom: 30px;">
				<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
					<div class="inputform">
						<input v-model="formData.name" class="contactInput  mt-[15px] md:mt-[30px] w-full md:w-[700px]"
							type="text" placeholder="输入您的姓名" />
						<input v-model="formData.mobile"
							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
							placeholder="请输入您的联系电话" />
						<input v-model="formData.emil"
							class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
							placeholder="请输入您的邮箱" />
					</div>
					<div class="relative w-full" style="padding:0px 20px;">
						<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
							maxlength="100" class="w-full"></textarea>
						<button type="submit" class="contactBut">
							{{ '提交' }}
						</button>
					</div>
				</form>
			</div>
		</div>
		<div v-if="videoShow" class="pop" style="display: block;">
			<div class="abs popCont pop_video_cont" :style="isMobile ? { width: '90%' } : {}">
				<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
				<video 
					:x5-playsinline="true" 
					:playsinline="true" 
					:webkit-playsinline="true" 
					preload="auto"
					x5-video-orientation="portraint" 
					:controls="true" 
					:autoplay="true" 
					:src="`${cdnUrl}/img/222.mp4`"
					:draggable="true"></video>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref, onMounted, onUnmounted } 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 cdnUrl = useCdn()

const { locale } = useI18n()

const typeId = ref(1);

interface NewsItem {
	id: number;
	title: string;
	subtitle: string;
	image: string;
	cate: {
		name: string;
	};
	release_time_text: string;
}

const newsList = ref<NewsItem[]>([])

const openType = (type: number) => {
	console.log(type);
	typeId.value = type;
}

const videoShow = ref(false)

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

let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
	vesSwiper = swiper
	// 监听幻灯片变化事件
	swiper.on('slideChange', () => {
		// 更新当前活动幻灯片索引
		activeSlideIndex.value = swiper.realIndex % 3
	})
}
const swiper_exp = ref();
const activeSlideIndex = ref(0);
// 表单数据
const formData = reactive({
	name: '',
	mobile: '',
	emil: '',
	message: ''
})
const router = useRouter()
// 新闻数据
const isMobile = ref(false)

const checkMobile = () => {
	isMobile.value = window.innerWidth <= 768
}

onMounted(() => {
	checkMobile()
	window.addEventListener('resize', checkMobile)
	getIndexNews();
	nextTick(() => {
		// 初始化 ScrollReveal
		setTimeout(() => {
			animate()
		}, 500)
	})
})

onUnmounted(() => {
	window.removeEventListener('resize', checkMobile)
})

const animate = () => {

	const sr = ScrollReveal();
	sr.reveal('.leftBoxTop', {
		origin: "left",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.leftBox', {
		origin: "left",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.rightBox', {
		origin: "right",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.topBox', {
		origin: "top",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.bottomBox', {
		origin: "bottom",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
	})
	sr.reveal('.numberTopBox', {
		origin: "top",
		distance: "1000px",
		duration: 1300,
		delay: 100,
		opacity: 0,
		scale: 0.9,
		reset: false,
		mobile: true,
		beforeReveal: function (el: any) {
			// numberAnimationInstRef.value.play()
			// numberAnimationInstRefKH.value.play()
			// numberAnimationInstRefJS.value.play()
			// numberAnimationInstRefHY.value.play()
		},
	})
	sr.reveal('.group_29 ', {
		origin: "bottom",
		distance: "500px",
		opacity: 0,
		scale: 0.9,
		reset: false,
		mobile: true,
	})
}
// 表单提交方法
const submitForm = () => {
	console.log(formData);

	// 这里可以添加表单验证逻辑
	if (!formData.name) {
		alert('请输入您的姓名')
		return
	}

	if (!formData.mobile) {
		alert('请输入您的手机号码')
		return
	}

	if (!formData.message) {
		alert('请输入您的留言内容')
		return
	}
	$api.post("/api/home.leave_word/add", formData)
		.then((res: any) => {
			console.log(res)
			if (res.status == 200) {
				alert('留言成功')
			} else {
				alert('失败')
			}
			formData.name = '';
			formData.mobile = '';
			formData.emil = '';
			formData.message = '';
		})
		.catch((err) => {
			console.dir(err)
		})
	// 重置表单
	// formData.name = ''
	// formData.mobile = ''
	// formData.content = ''
}
const getIndexNews = () => {
	$api.get("/api/home.news/index?page=1&limit=3")
		.then((res: any) => {
			console.log(res)
			newsList.value = res.data.data.list
		})
		.catch((err) => {
			console.dir(err)
		})
}

const retTime = (dateTimeStr: string) => {
	return dateTimeStr.split(' ')[0]; // 分割后取日期部分 
}
const openUrl = (id: number) => {
	window.open(`/info/${id}`)
}
</script>

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

.text_7, .text_8 {
	text-align: center;
	width: 100%;
}

.text_9, .text_11 {
	font-size: 16px !important;
	text-align: center;
	padding-right:0px
}

.text_12 {
	font-size: 14px !important;
	line-height: 1.6;
	padding: 0 15px;
	width: 100%;
}
.text-wrapper_2{
	margin: 0 auto;
}
.leftBox, .rightBox {
	width: 100% !important;
	margin: 10px 0 !important;
}

.content_box {
	width: 100% !important;
	height: 300px !important;
	position: relative !important;
	right: 0 !important;
	bottom: 0 !important;
}

.hy_my_home {
	width: 100% !important;
	height: auto !important;
}
.section_1{
	height: 323px;
    width: 100%;
}
.image-wrapper_2{
	border-radius: 10px;
}
.contactForm {
	.inputform {
		flex-direction: column !important;
		width: 100% !important;
		padding:20px 20px 10px 20px;
	}

	.contactInput {
		width: 100% !important;
		margin: 10px 0 !important;
		height: 40px !important;
		font-size: 14px !important;
		border-radius: 6px!important;
		background: #FFFFFF;
		padding-left: 10px;
	}

	#myTextarea {
		width: 100% !important;
		height: 120px !important;
		font-size: 14px !important;
		border-radius: 6px!important;
		padding: 10px;
	}
}

.box_12, .box_14 {
	flex-direction: column !important;
}
.box_3{
	width: 100%;
}
.box_7,.box_13,.box_18{
	height: 100%;
}

.image_7, .image_8, .image_9 {
	width: 100% !important;
}
.text_24{
	margin-top: 30px;
}
.group_22{
	width: 100%;
	margin: 27px 0 23px 15px;
}
.news_my_home {
	width: 100% !important;
	margin: 10px 0 !important;
	padding: 15px !important;
}
.contactBut {
	width: 108px;
	border-radius: 4px 4px 4px 4px;
	position: absolute;
	bottom: 20px;
	right: 30px;
	height: 36px;
	background-color: #222222;
	border: none;
	font-weight: 400;
	font-size: 16px;
	line-height: 28px;
	color: #FFFFFF;
}
.group_29 {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 10px !important;
	padding: 0 15px !important;
}

.bottom_imgs {
	width: 100% !important;
	height: auto !important;
}

.pop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .8);
	z-index: 200;
	display: none;
}

.popCont {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.pop_video_close {
	border-radius: 50%;
	position: absolute;
	top: -73px;
	right: 0px;
	width: 40px;
	height: 40px;
	background: var(--close) no-repeat 0 0;
	background-size: 100% auto;
	border: 6px solid #979797;
}

.pop_video_cont {
	width: 600px;
	border: 6px solid #979797;
	background: #000;
}

.pop_video_cont video {
	display: block;
	width: 100%;
	height: 100%;
}
.text_17, .text_16 {
	font-size: 16px !important;
}

.text_18 {
	font-size: 15px !important;
}

.text_19 {
	font-size: 13px !important;
}

.group_7 {
	padding: 10px !important;
	margin: 5px 0 !important;
}
.section_2sa{
	height: 700px;
}
.image-wrapper_5 {
	width: 40px !important;
	height: 40px !important;
	margin-right: 10px !important;
}

.text-group_3, .text-group_3_3 {
	flex: 1 !important;
}

.contactBut {
	width: 100% !important;
	height: 40px !important;
	font-size: 16px !important;
	margin-top: 10px !important;
	position: relative !important;
	right: 0 !important;
	bottom: 0 !important;
}

// 移除所有hover效果
.hy_my_home:hover,
.news_my_home:hover .news_title_home {
	transform: none !important;
	color: inherit !important;
}
.text-group_1,.group_7,.group_6s{
	width: 100%;
}
.text_19{
	width: 100%;
	line-height: 25px;
}
.box_12{
	height: 100%;
	margin-top: 0px;
}
.group_6 {
	width: 100%;
}
.box_13{
	width: 100%;
	margin:0px;
}
.section_2s{
	height: 710px;
}
.box_5{
	height: auto;
}
.text-group_2{
	width: 55%;
	height: auto;
}
.text_17,.text_16{
	width: auto;
}
.box_6{
	padding:0px 15px 15px 15px;
	height: 100%;
}
.image-wrapper_5{
	width: 30%;
}
.text-group_3{
	width: 70%;
}
.group_10s {
	width: 100%;
}
.dswper{
	margin-top: 10px;
}
.text-wrapper_10{
	margin-top: 30px;
}
@media (max-width: 768px) {
	.group_3 {
		height: auto;
		padding: 20px;
		background-size:auto;
	}
	
}
</style>