*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}
img{
	width: 100%;
}
:root {
	--primary-color: #ff434f;
	--secondary-color: #e3e3e3;
	--text-color-lightest: #e7e9ec;
	--text-color-darker: #2e2e2e;
	--text-color-dark: #494949;
	--text-color-gary: #8b8b8b;
	--text-color-dark-gray: #727272;
	--text-color-light-gray: #c6c6c6;
	--backdrop-color: rgba(42,42,42,0.6);
}

header{
	width: 100%;
	background-color: rgb(0, 0, 0, .6);
	position: relative;
	z-index: 200;
}
header nav {
	justify-self: end;
}
header nav i{
	color: var(--text-color-lightest);
}
header nav a {
	color: var(--text-color-lightest);
	text-decoration: none;
	margin:0 24px;
}
header .logo{
	font-size: 24px;
	font-weight: 600;
	color: var(--text-color-lightest);
}
header .inside{
	max-width: 88%;
	height: 80px;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
header .burger{
	display: none;
}
.sticky{
	position: fixed;
	background-color: white;
	box-shadow: 0 0 18px rgba(0, 0, 0, 0.2);
	animation: dropDown 0.5s ease-in-out forwards;
}
.sticky .logo, 
.sticky nav a,
.sticky nav i{
	color: var(--text-color-darker);
}
@keyframes dropDown{
	from{
		transform: translateY(-100px);
	}
	to{
		transform: translateY(0);
	}
}

/* 轮播图 */
.glide{
	position: relative;
	top:-80px;
	z-index: 50 ;
}
.glide__slide {
	display: flex;
	align-items: center;
	justify-content: center;
}
.glide__slide img{
	width: 100vw;
	height: 100vh;
	object-fit: cover;

}
.glide__slide video{
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}
.glide__slide .backdrop{
	background: var(--backdrop-color);
	z-index: 60;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	opacity: 0.4;
}
/* 轮播图里面内容 */
.slide-caption{
	max-width: 45%;
	text-align: center;
	position: absolute;
	z-index: 70;
	color: var(--text-color-lightest);
}
.slide-caption h1 {
	font-size: 48px;
	font-weight: 600;
}
.slide-caption h3 {
	font-size: 24px;
	margin: 48px 0;
}
.explore-btn{
	background-color: var(--primary-color);
	color: var(--text-color-lightest);
	padding: 14px 32px;
	border-radius: 4px;
	font-size: 18px;
	cursor: pointer;
	outline: none;
	border: 0;
}

/* 内容区域通用样式 */
.content-wrapper{
	
}
section {
	max-width: 1200px;
	margin: auto;
	display: grid;
	justify-items: center;
	margin-top: 80px;
}
.title1 {
	font-size: 34px;
	color: var(--text-color-darker);
}
.title1::after{
	display: block;
	width: 80%;
	height: 4px;
	content: "";
	margin-top: 14px;
	transform: translatex(10%);
	background-color: var(--primary-color);
}
.intro {
	font-size: 18px;
	margin: 24px 24px 36px;
	color: var(--text-color-dark-gray);
}

/* 主营业务 */
.feature-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 126px 126px;
	column-gap: 5vw;
	row-gap: 2vh;
}
.feature-item {
	display: grid;
	grid-template-areas: 
	"icon title" 
	"icon content";
	grid-template-columns: 60px 1fr;
	grid-template-rows: 1fr 3fr;
}
.feature-item i {
	grid-area: icon;
	font-size: 34px;
	color: var(--primary-color);
}
.feature-title{
	grid-area: title;
	font-size: 20px;
	color: var(--text-color-darker);
}
.feature-content{
	grid-area: content;
	color: var(--text-color-gary);
	margin-top: 8px;
}


/* 服务流程 */
.service-list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 36px;
	row-gap: 36px;
}
.service-item{
	display: grid;
	grid-template-areas:
	"icon title"
	"icon content";
	grid-template-columns: 70px 1fr;
	grid-template-rows: 1fr 3fr;
	padding: 24px;
	box-shadow: 0px 0px 18px rgba(0, 0, 0, 0.06);
}
.service-item i{
	grid-area: icon;
	color: var(--primary-color);
	font-size: 32px;
}
.service-item .service-title{
	grid-area: title;
	font-size: 20px;
	color: var(--text-color-darker);
}
.service-item .service-content{
	grid-area: content;
	color: var(--text-color-gary);
	font-size: 16px;
	line-height: 30px;
	margin-top: 8px;
}

/* 团队介绍 */
.team-list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 36px;
	row-gap: 36px;
}
.team-item{
	display: grid;
	text-align: center;
	justify-items: center;
	padding-bottom: 28px;
	background-color: white;
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
	transition: 0.4s;
}
.team-item .photo{
	/*overflow: hidden;*/
}
.team-item .photo img{
	width: 100%;
	height: 100%;
	/*object-fit: cover;*/
	/*object-position: center center;*/
}
.team-item .name{
	margin-top: 18px;
	font-size: 18px;
	font-weight: 500;
	color: var(--text-color-dark);
}
.team-item .position{
	color: var(--text-color-dark-gray);
	margin-top: 12px;
	margin-bottom: 18px;
}
.team-item .social-links{
	width: 100%;
	padding: 0 42px;
	max-width: 200px;
	display: flex;
	justify-content: space-between;
}
.team-item .social-links li{
	list-style: none;
}
.team-item:hover{
	cursor: pointer;
	transform: translateY(-20px) scale(1.05);
	box-shadow: 0px 0px 36px rgba(0, 0, 0, 0.1);
}

/* 数据部分 */
.data-section{
	max-width: unset;
	width: 100%;
	height: 260px;
	background-image: url(images/office.jpg);
	background-size: cover;
	background-position: center;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 20;
}
.data-section::before{
	content: "";
	display: block;
	position: absolute;
	background-color: var(--backdrop-color);
	width: 100%;
	height: 100%;
	z-index: 1;
	left: 0;
}
.data-piece{
	text-align: center;
	width: 250px;
	color: white;
	z-index: 40;
}
.data-piece i{
	font-size: 42px;
}
.data-piece .num{
	margin: 10px 0;
	font-size: 40px;
	font-weight: 600;
}
.data-piece .data-desc{
	font-size: 18px;
	font-weight: 500;
}


/* 技术理念 */
/* 资质证书 */
.case-list {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 32px;
	row-gap: 32px;
}
.case-item{
	overflow: hidden;
	padding: 10px;
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.2);
}
.case-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 产品展示 */
.shop-list{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	column-gap: 32px;
	row-gap: 32px;
}
.shop-item{
	box-shadow: 0px 0px 24px rgba(0, 0, 0, 0.1);
	padding: 12px;
	transition: 0.4s;
	transition: all 0.4s ease;
}
.shop-item .act-image-wrapper{
	overflow: hidden;
}
.shop-item .act-image-wrapper img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: bottom;
}
.shop-item .meta{
	margin-top: 20px;
	margin-bottom: 12px;
	color: var(--text-color-light-gray);
	font-size: 16px;
	display: flex;
	justify-content: space-between;
}
.shop-item .meta .price{
	color: #C00000;
	font-size: 20px;
	font-weight: bold;
}
.shop-item .meta .price::before{
	content: "¥";
	font-size: 16px;
	margin-right: 2px;
}
.shop-item .meta .sales{
	font-size: 14px;
}
.shop-item .act-title{
	color: var(--text-color-dark);
	font-size: 18px;
	margin-bottom: 8px;
}
.shop-item article{
	color: var(--text-color-gary);
	letter-spacing: 0.54px;
	line-height: 24px;
	font-size: 14px;
}
.shop-item .read-more-btn{
	border: 0;
	color: white;
	outline: none;
	cursor: pointer;
	background-color: var(--primary-color);
	border-radius: 4px;
	padding: 6px 14px;
	margin-top: 16px;
}
.shop-item .read-more-see{
	border: 0;
	color: white;
	outline: none;
	cursor: pointer;
	background-color: #ff6700;
	border-radius: 4px;
	padding: 6px 14px;
	margin-top: 16px;
	float: right;
}
.shop-item:hover{
	/*transform: translateY(-20px) scale(1.05);*/
	/*box-shadow: 0px 0px 36px rgba(0, 0, 0,0.1) ;*/
}

/* 弹窗基础样式 */
.shop-item .modal-box {
	padding: 30px;
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 50%;
	z-index: 1000;
	background: white;
	border-radius: 8px;
	box-shadow: 0 5px 20px rgba(0,0,0,0.3);
	transform: translate(-50%, -50%) scale(0.9);
	transition: transform 0.4s ease, opacity 0.4s ease;
}

/* 链接内容 */
.shop-item .modal-box .link-text{
	max-height: 500px;
	overflow-y: auto;
	line-height: 30px;
	color: #666;
}

/* 激活状态 */
.shop-item .modal-box.active {
	display: block;
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* 关闭按钮 */
.shop-item .modal-box .close-btn{
	width: 40px;
	height: 40px;
	cursor: pointer;
	position: absolute;
	right: -10px;
	top: -10px;
}

/* 筛选按钮 */
.filter-btns{
	margin-bottom: 40px;
}
.filter-btn{
	margin: 0 8px 8px;
	background-color: var(--secondary-color);
	color: var(--text-color-dark-gray);
	padding: 8px 18px;
	border-radius: 4px;
	transition: 0.4s;
	cursor: pointer;
	outline: none;
	border: 0;
}
.filter-btn.active, .filter-btn:hover{
	background-color: var(--primary-color);
	color: white;
}

/* 背景遮罩 */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	z-index: 999;
	display: none;
}
.modal-overlay.active {
	display: block;
}

/* 底部信息 */
footer{
	background-color: #181818;
	margin-top: 60px;
	padding: 60px 0;
}
.footer-menus{
	position: relative;
	max-width: 1200px;
	margin: auto;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
}
.menu-title{
	font-size: 16px;
	color: white;
	margin-bottom: 20px;
}
.menu-items li{
	list-style: none;
	padding-bottom: 8px;
	color: white;
}
.menu-items li a{
	text-decoration: none;
	font-weight: 300;
	color: var(--text-color-lightest);
}
.icp-info{
	margin-top: 24px;
	margin-bottom: 16px;
}
.icp-info, .rights{
	grid-column: 1 / -1;
	justify-self: center;
	color: white;
}
.scrollToTop {
	display: none;
	z-index: 60;
}
.scrollToTop a{
	width: 32px;
	height: 32px;
	color: white;
	border-radius: 4px;
	text-decoration: none;
	background-color: var(--primary-color);
	position: fixed;
	right: 6%;
	bottom: 6%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1000px) {
		header{
				grid-template-columns: 1fr 1fr;
				/*padding: 0 30px;*/
		}
		header nav {
				display: none;
		}
		header .burger{
				display: block;
				position: relative;
				justify-self: end;
				cursor: pointer;
		}
		header .burger-line1,
		header .burger-line2,
		header .burger-line3{
				width: 20px;
				height: 2px;
				background-color: var(--text-color-lightest);
		}
		header .burger-line1 {
				position: absolute;
				top: -6px;
		}
		header .burger-line3{
				position: absolute;
				top: 6px;
		}
		header.open nav {
				display: grid;
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 100vh;
				background-color: white;
				grid-auto-rows: max-content;
				padding: 0 30px;
				opacity: 0;
				animation:slideDown 0.6s ease-out forwards;
		}
		header.open nav > * {
				color: var(--text-color-darker);
				animation:showMenu 0.5s linear forwards 0.4s;
				font-size: 18px;
				margin: 10px 0;
				opacity: 0;
                padding-bottom: 20px;
                border-bottom: 1px solid #e5e5e5;
		}
		header.open nav i {
				margin-top: 10px;
		}
		header.open nav a {
				color: var(--text-color-darker);
		}
		header.open .burger-line1,
		header.open .burger-line2,
		header.open .burger-line3,
		header.sticky .burger-line1,
		header.sticky .burger-line2,
		header.sticky .burger-line3{
				background-color: var(--text-color-darker);
				transition: 0.4s ease;
		}
		header.open .burger-line1 {
				transform: rotate(45deg) translate(3px, 5px);
		}
		header.open .burger-line2{
				transform: translateX(5px);
				opacity: 0;
		}
		header.open .burger-line3{
				transform: rotate(-45deg) translate(3px,-5px);
		}
		header.open .logo{
				z-index: 40;
				color: var(--text-color-darker);
		}
		@keyframes slideDown {
				from {
						height: 0;
						opacity: 0;
				}
				to{
						height: 100vh;
						padding-top: 80px;
						opacity: 1;
				}
		}
		@keyframes showMenu {
				from {
						opacity: 0;
						transform: translateY(-1vh);
				}
				to {
						opacity: 1;
						transform: translateY(0);
				}
		}
}

@media(max-width: 1000px){
	section{
		padding: 0 40px;
	}
	.title1 {
    	font-size: 30px;
    }
	.slide-caption h1 {
		font-size: 32px;
	}
	.slide-caption h3 {
		font-size: 18px;
	}
	.explore-btn {
		font-size: 16px;
		padding: 14px 26px;
	}
	.data-section {
		grid-template-columns: repeat(2,minmax(200px, auto));
		padding: 40px 0 24px;
		row-gap: 24px;
		height: auto;
	}
	.feature-list, .service-list, .team-list, .case-list, .shop-list {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: unset;
	}
	.footer-menus{
		grid-template-columns: 2fr 1fr 1fr;
		column-gap: 42px;
		row-gap: 36px;
	    padding: 0 40px;
	}
}

@media(max-width:500px){
		section{
			padding: 0 20px;
		}
    	.title1 {
        	font-size: 26px;
        }
		.slide-caption h1 {
			width: 200px;
			font-size: 24px;
		}
		.slide-caption h3{
			font-size: 14px;
		}
		.explore-btn {
			font-size: 14px;
			padding: 10px 16px;
		}
		.filter-btns {
			margin-bottom: 20px;
		}
		.modal-box {
			width: 80%;
		}
		.footer-menus {
			grid-template-columns: 1fr;
		}
		.feature-list, .service-list, .team-list, .data-section, .shop-list, .case-list {
			grid-template-columns: 1fr;
			padding: 0 20px;
		}
		.data-section {
		    padding: 40px;
		}
}