*{
	-webkit-tap-highlight-color:transparent;
}

body{
	margin:0;
}

body.lock{
	overflow: hidden;
}

a{
	text-decoration: none;
	color: inherit;
}

input[type=button],
input[type=submit],
input[type=reset],
button{
	-webkit-appearance: none;
	appearance: none;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #666;
}

::-webkit-scrollbar-corner {
    background: #179a16;
}

.inner{
	width:100%;
	max-width: 1530px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
	margin:auto;
	height: inherit;
}

.icon{
	width: 1em;
	height: 1em;
	fill: currentColor;
	overflow: hidden;
	vertical-align: -0.15em;
}

.button{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background-color: #134cb6;
	color: #fff;
	border-radius: 4px;
	line-height: 35px;
	padding: 0 15px;
	min-width: 95px;
	box-sizing: border-box;
	min-height: 35px;
}

.button.hide{
	visibility: hidden;
}

@keyframes rotate{
	0%{transform:rotate(0deg);}
	50%{transform:rotate(180deg);}
	100%{transform:rotate(360deg);}
}

.button svg{
	animation: rotate 1.2s linear infinite;
}

.button[disabled=disabled]{
	cursor: default;
	opacity: 0.6;
}

.richtext{
	overflow: hidden;
}

header{
	padding: 20px 0;
	background: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	position: relative;
	z-index: 2;
}

header .inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header .logo{
	margin:0;
}

header .logo a{
	display: block;
}

header .logo a img{
	display: block;
	height: 65px;
	width:auto;
}

header nav ul{
	list-style: none;
	padding:0;
	margin:0;
	display: flex;
}

header nav ul li{
	position: relative;
	padding:0 1vw;
}

header nav ul li + li:after{
	content: "";
	position: absolute;
	left:0;
	top:0;
	width:1px;
	height: 100%;
	background: #828282;
}

header nav ul li a{
	font-size: 17px;
}

header nav ul li a:hover{
	color:#134cb6;
}

header .ibox[ico=menu]{
	font-size: 22px;
	cursor: pointer;
	color:#666;
	display: none;
}

header ~ aside {
	position: fixed;
	top:0;
	left:0;
	width:65vw;
	height: 100vh;
	background-color: rgba(255,255,255,0.85);
	padding:20px;
	z-index: 9;
	transition: transform 0.3s ease;
	transform: translateX(-100%);
}

header ~ aside.show{
	transform: translateX(0);
}

header ~ aside ul{
	list-style: none;
	margin:0;
	padding:0;
}

header ~ aside ul li{
	color:#333;
	height: 40px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

header ~ aside ul li a{
	font-size: 15px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

header ~ .mask{
	position: fixed;
	z-index: 8;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color: rgba(0,0,0,.6);
}


@keyframes modalScale{
	0%{transform: translate(-50%,-50%) scale(0);}
	100%{transform: translate(-50%,-50%) scale(1);}
}

header ~ .modal{
	position: fixed;
	left:50%;
	top:50%;
	background: #fff;
	z-index: 9;
	padding: 40px 20px 20px 20px;
	box-sizing: border-box;
	max-width:95vw;
	max-height: 80vh;
	width: 1200px;
	border-radius: 4px;
	animation: modalScale 0.2s ease forwards;
	overflow: auto;
}

header ~ .modal .close{
	position: absolute;
	right:10px;
	top:10px;
	background: #fff;
	color: #999;
	cursor: pointer;
}

header ~ .modal img{
	max-width: 100%;
	margin:auto;
	display: block;
}

header ~ main{
	/*min-height: calc(100vh - (((100vw / 1920) * 650) + 337px));*/
	min-height: calc(100vh - 337px);
	box-sizing: border-box;
}

footer{
	background-color: #000;
	padding:25px 0;
}

footer h3{
	color: #fff;
	margin: 0;
	font-size: 16px;
	font-weight: normal;
}

footer p{
	line-height: 1.6;
	color:#fff;
	margin-top: 12px;
	margin-bottom: 0;
}

footer p:first-of-type{
	margin-top: 25px;
}

.banner ul{
	margin:0;
	padding:0;
	list-style: none;
}

.banner a{
	display: block;
	position: relative;
}

.banner img{
	display: block;
	width: 100%;
}

.banner .text{
	position: absolute;
	z-index: 2;
	left:11vw;
	top:5vw;
	background-color: rgba(30,49,84,0.5);
	border-radius: 15px;
	padding:3vw 7vw 3vw 3vw;
	box-sizing: border-box;
	max-width: 630px;
}

.banner .text p{
	font-size: 23px;
	color:#ccc;
	margin:0;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}

.banner .text h2{
	font-weight: normal;
	margin-top: 10px;
	margin-bottom: 0;
	color: #fff;
	font-size: calc(100vw / 1920 * 62);
	line-height: 1.3;
	text-align: right;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*首页*/
.index h2.title{
	display: flex;
	align-items: center;
	padding: 0 15px;
	background-color: #f1f1f1;
	height: 60px;
	margin:0;
}

.index h2.title ~ .content{
	margin-top: 20px;
}


.index .infomation{
	padding:2vw 0;
}

.index .infomation .inner{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.index .infomation .introduction{
	flex:1;
	margin-right: 5vw;
}

.index .infomation .introduction p{
	text-align: justify;
	margin-bottom: 0;
	text-indent: 2em;
}

.index .infomation .introduction p:first-child{
	margin-top: 0;
}

.index .infomation .photograph{
	flex:1;
}

.index .infomation .photograph .content ul{
	display: flex;
	margin:0;
	padding:0;
}

.index .infomation .photograph .content ul li{
	text-align: center;
	flex:1;
	list-style: none;
}

.index .infomation .photograph ul li img{
	display: block;
	width:auto;
	margin:auto;
	max-width: 100%;
	height: auto;
}

.index .infomation .photograph ul li p{
	font-size: 17px;
	line-height: 1.6;
	margin:0;
	margin-top: 10px;
}

.index .projects{
	padding:2vw 0;
}

.index .projects nav{
	margin-top: 20px;
}

.index .projects nav ul{
	list-style: none;
	margin-top:-10px;
	margin-left: -10px;
	padding:0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

.index .projects nav ul li{
	margin-top: 10px;
	margin-left: 10px;
}

.index .projects nav ul li input{
	display: none;
}

.index .projects nav ul li label{
	display: inline-flex;
	padding:0 15px;
	line-height: 30px;
	border:1px solid #134cb6;
	border-radius: 4px;
	cursor: pointer;
	color:#134cb6;
}

.index .projects nav ul li input:checked + label{
	color:#fff;
	background-color: #134cb6;
}

.index .projects .content ul{
	list-style: none;
	padding:0;
	margin:0;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	grid-row-gap: 2vw;
	grid-column-gap: 2vw;
}


@keyframes fadeIn{
	0%{opacity: 0;}
	100%{opacity: 1;}
}

.index .projects .content ul li{
	animation: fadeIn 0.6s linear forwards;
}

.index .projects .content ul li a{
	display: block;
	width:100%;
	height: 100%;
	position: relative;
}


.index .projects .content ul li .image{
	overflow: hidden;
	height: inherit;
}

.index .projects .content ul li img{
	display: block;
	width:100%;
	transition: transform 0.3s ease;
}

.index .projects .content ul li:hover img{
	transform: scale(1.3);
}

.index .projects .content ul li .mask{
	position: absolute;
	left:0;
	top:0;
	bottom:0;
	right: 0;
	background: rgba(0,0,0,0.6);
	display: flex;
	justify-content: center;
	align-items: center;
	padding:0 10px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.index .projects .content ul li:hover .mask{
	opacity: 1;
}

.index .projects .content ul li .mask p{
	margin:0;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.index .projects .content .buttons{
	margin-top: 30px;
	display: flex;
	justify-content: center;
}

.index .customers{
	padding:2vw 0;
}

.index .customers .content ul{
	padding: 0;
	margin:0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-row-gap: 20px;
	grid-column-gap: 20px;
}

.index .customers .content ul .image{
	display: block;
}

.index .customers .content ul img{
	display: block;
	max-width: 100%;
}

.about{
	padding:50px 0;
}

.about h2.title{
	margin:0;
	text-align: center;
}

.about .content{
	margin-top: 45px;
}


.project{
	padding:50px 0;
}

.project h2.title{
	margin:0;
	text-align: center;
}

.project nav{
	margin-top: 45px;
}

.project nav ul{
	list-style: none;
	margin-top:-10px;
	margin-left: -10px;
	padding:0;
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
}

.project nav ul li{
	margin-top: 10px;
	margin-left: 10px;
}

.project nav ul li input{
	display: none;
}

.project nav ul li label{
	display: inline-flex;
	padding:0 15px;
	line-height: 30px;
	border:1px solid #134cb6;
	border-radius: 4px;
	cursor: pointer;
	color:#134cb6;
}

.project nav ul li input:checked + label{
	color:#fff;
	background-color: #134cb6;
}

.project .content{
	margin-top: 20px;
}

.project .content ul{
	list-style: none;
	padding: 0;
    margin: 0;
	display: grid;
	grid-column-gap: 2vw;
	grid-row-gap: 2vw;
	grid-template-columns: repeat(4,1fr);
}

.project .content ul li{
	animation: fadeIn 0.6s linear forwards;
}

.project .content ul li a{
	display: block;
    position: relative;
    height: 100%;
}

.project .content ul li .image{
	overflow: hidden;
	height: inherit;
}

.project .content ul li:hover img{
	transform: scale(1.3);
}

.project .content ul li img{
	display: block;
	width:100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.project .content ul li .mask{
	position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.project .content ul li:hover .mask{
	opacity: 1;
}

.project .content ul li .mask p{
	margin:0;
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: justify;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}

.project .content .buttons{
	margin-top: 30px;
	text-align: center;
}

.contact{
	padding:50px 0;
}

.contact h2.title{
	text-align: center;
	margin:0;
	color: #444;
}

.contact .map{
	margin-top:50px;
}

.contact #map{
	height: 500px;
}

@media screen and (max-width: 980px){
	.index .infomation .introduction{
		flex:0 0 100%;
	}
	.index .infomation .photograph{
		flex:0 0 100%;
		margin-top: 30px
	}

	.project .content ul{
		grid-template-columns: repeat(3,1fr);
	}
}


@media screen and (max-width: 768px){
	header{
		padding:10px 0;
	}

	header .logo a img{
		height: 30px;
	}

	header nav{
		display: none;
	}

	header .ibox[ico=menu]{
		display: inline-flex;
	}

	header ~ main{
		/*min-height: calc(100vh - (((100vw / 1920) * 650) + 258px));*/
		min-height: calc(100vh - 258px);
	}

	footer p{
		font-size: 14px;
		margin-top: 8px;
	}

	.inner{
		padding-left: 8px;
		padding-right: 8px;
	}

	.banner .text{
		max-width: 46vw;
	}

	.banner .text p{
		font-size: 17px;
	}

	.banner .text h2{
		font-size: 19px;
		font-weight: bold;
		margin-top: 5px;
	}

	.index h2.title{
		height:40px;
		font-size: 18px;
		border-radius: 4px;
	}

	.index .infomation .photograph .content ul{
		flex-wrap: wrap;
	}

	.index .infomation .photograph .content ul li{
		flex:0 0 100%;
	}

	.index .infomation .photograph .content ul li + li{
		margin-top: 20px;
	}

	.index .infomation .photograph ul li img{
		margin:auto;
	}

	.index .projects .content ul{
		grid-template-columns: repeat(2,1fr);
	}

	.index .projects .content ul li .mask p{
		font-size: 17px;
	}

	.index .customers .content ul{
		grid-template-columns: repeat(4, 1fr);
	}

	.project{
		padding: 30px 0;
	}

	.project .content{
		margin-top: 30px;
	}

	.project .content ul{
		grid-template-columns: repeat(2,1fr);
	}

	.project .content ul li .mask p{
		font-size: 17px;
	}

	.contact{
		padding:30px 0;
	}

	.contact .map{
		margin-top: 30px;
	}

	.contact .info{
		margin-top: 30px;
	}

	.contact #map{
		height: calc((280 / 375) * 100vw);
	}
}