@charset "utf-8";
/* CSS Document */
@media (min-width:750px){
	*{
		font-family: "Century Gothic";
		color: #949494;
	}
	#div1{
		width: 50%;
		height: 100%;
		box-sizing: border-box;
		background: #E4E4E4;
		position: fixed;
		
	}
	#div2{
		width: 50%;
		height: auto;
		box-sizing: border-box;
		background: #E4E4E4;
		position: absolute;
		left: 50%;
	}
	a{
		font-size: 18px;
		text-decoration: none;
	}
	h2{ 
		font-weight: normal;
		font-size: 16px;
	}
	h4{
		font-weight: normal;
		font-size: 14px;
	}
	p{
		font-size: 14px;
		color: #c9c9c9;
		margin: 10px 0px 10px 0px;
	}
	a:hover{
		color:#FFFCFC;
	}
	h2:hover{
		color:#FFFCFC;
	}
	h3:hover{
		color: #FFFCFC;
	}
	h4:hover{
		color:#FFFCFC;
	}
	P:hover{
		color:#FFFCFC;
	}
	span:hover{
		color: #FFFCFC;
	}
	.logo img{
		position: absolute;
		left: 4%;
		top: 2%;
	}
	.list{
		color: #949494;
		width: 40%;
		height:auto;
		padding: 10%
	}
	.list a{
		font-size: 16px;
	}
	ul{
		position: absolute;
		left: 20%;
		top: 16%;
		color: #949494;
		list-style-type: none;
		border-left: solid 1px #949494;
		padding: 5% 5% 5% 15%;
	}
	li{
		padding: 12% 0 12% 0;
	}
	.title{
		color: #FFFCFC;
	}
	.icon{
		margin-left: 4%;
		widih:100%;
		height:30px;
		color: #666666;
		position: absolute;
		bottom: 2%;
	}
	.icon a{
		padding-right: 10px;
	}
	.icon span{
		padding-right:40px;
		font-size: 14px;
	}
	.main{
		width: 100%;
		height: 100%;
		background:#E4E4E4;
		margin-bottom: 120px;
		display: block;
	}
	.main1{
		box-sizing: border-box;
		width: 100%;
		height: 750px;
		display:block;
	}
	.case1:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case2:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case3:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case3:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case4:hover{
		transform: scale(1.05);
	}
	.case5:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.main2 img:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case{
		box-sizing: border-box;
		width: 100%;
		height: 16%;
		text-align:center;
		margin: 0% 0 6% 0;
		display: inline-block;
	}
	.case1{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 8% 2% 1% 6%;
		display: inline-block;
		position: relative;
	}
	.case2{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 8% 2% 1% 1%;
		display: inline-block;
		position: relative;
	}
	.case3{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 6%;
		display: inline-block;
		position: relative;
	}
	.case4{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 1%;
		display: inline-block;
		position: relative;
	}
	.case5{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 1%;
		display: inline-block;
		position: relative;
	}
	.input{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(209,209,209,0.6);
		opacity:0;
	}
	.input span{
		font-size: 14px;
		color: #FBFBFB;
		position: absolute;
		bottom: 10%;
		left: 10%;
	}
	.case1 a:hover .input{
		opacity: 1;
	}
	.case2 a:hover .input{
		opacity: 1;
	}
	.case3 a:hover .input{
		opacity: 1;
	}
	.case4 a:hover .input{
		opacity: 1;
	}
	.case5 a:hover .input{
		opacity: 1;
	}
	.main2{
		box-sizing: border-box;
		width: 100%;
		height:auto;
		background: #e4e4e4;
		display: block;
	}
	.main3{
		box-sizing: border-box;
		width: 100%;
		height:auto;
		padding: 0% 2% 160px 4%;
		background: #e4e4e4;
		display: flex;
		flex-flow: row wrap;
	}
	.main3 a{
		font-size:30px;
	}
	.main3 p{
		color: #949494;
		font-size: 16px;
	}
	.pic{
		width: 92%;
		height: auto;
		margin: 0% 4% 160px 4%;
	}
	.pic1{
		background: #E4E4E4;
		width: 96%;
		height: auto;
		padding: 2%;
	}
	.pic2{
		background: #E4E4E4;
		width: 40%;
		height: auto;
		padding-bottom:2%;
	}
	.pic3{
		background: #E4E4E4;
		width: 50%;
		height: auto;
		padding-left:8%;
	}
	.main4{
		box-sizing: border-box;
		width: 100%;
		height:120px;
		background: #E0E0E0;
		text-align: center;
		line-height: 120px;
		display: block;
	}
	.main4 a{
		font-size: 14px;
	}
}
@media (max-width:750px){
	*{
		font-family: "Century Gothic";
		color: #949494;
	}
	#div2{
		width: 50%;
		height: auto;
		box-sizing: border-box;
		background: #E4E4E4;
		position: absolute;
		left: 50%;
	}
	a{
		font-size: 18px;
		text-decoration: none;
	}
	h2{ 
		font-weight: normal;
		font-size: 16px;
	}
	h4{
		font-weight: normal;
		font-size: 14px;
	}
	p{
		font-size: 14px;
		color: #c9c9c9;
		margin: 10px 0px 10px 0px;
	}
	a:hover{
		color:#FFFCFC;
	}
	h2:hover{
		color:#FFFCFC;
	}
	h3:hover{
		color: #FFFCFC;
	}
	h4:hover{
		color:#FFFCFC;
	}
	P:hover{
		color:#FFFCFC;
	}
	span:hover{
		color: #FFFCFC;
	}
	.logo img{
		position: absolute;
		left: 4%;
		top: 2%;
	}
	.list{
		color: #949494;
		width: 40%;
		height:auto;
		padding: 10%
	}
	.list a{
		font-size: 16px;
	}
	ul{
		position: absolute;
		left: 20%;
		top: 16%;
		color: #949494;
		list-style-type: none;
		border-left: solid 1px #949494;
		padding: 5% 5% 5% 15%;
	}
	li{
		padding: 12% 0 12% 0;
	}
	.title{
		color: #FFFCFC;
	}
	.icon{
		margin-left: 4%;
		widih:100%;
		height:30px;
		color: #666666;
		position: absolute;
		bottom: 2%;
	}
	.icon a{
		padding-right: 10px;
	}
	.icon span{
		padding-right:40px;
		font-size: 14px;
	}
	.main{
		width: 100%;
		height: 100%;
		background:#E4E4E4;
		margin-bottom: 120px;
		display: block;
	}
	
	.mian1{
		box-sizing: border-box;
		width: calc(100% - 40px);
		margin: 0 auto 50px auto;
		/* height: 750px; */
		display:block;
	}
	.mian1 .windowImgLi{
		width: calc(50% - 5px);
		margin: 0;
		margin-right: 5px;
		margin-bottom: 5px;
	}
	.mian1 .windowImgLi:nth-of-type(2n+1){
		margin: 0;
	}
	.case1:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case2:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case3:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case3:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case4:hover{
		transform: scale(1.05);
	}
	.case5:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.main2 img:hover{
		transition: all 0.3s;
		transform: scale(1.05);
	}
	.case{
		box-sizing: border-box;
		width: 100%;
		height: 16%;
		text-align:center;
		margin: 0% 0 6% 0;
		display: inline-block;
	}
	.case1{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 8% 2% 1% 4%;
		display: inline-block;
		position: relative;
	}
	.case2{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 8% 2% 1% 1%;
		display: inline-block;
		position: relative;
	}
	.case3{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 4%;
		display: inline-block;
		position: relative;
	}
	.case4{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 1%;
		display: inline-block;
		position: relative;
	}
	.case5{
		box-sizing: border-box;
		width: 15%;
		height: 15%;
		margin: 1% 2% 20% 1%;
		display: inline-block;
		position: relative;
	}
	.input{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(209,209,209,0.6);
		opacity:0;
	}
	.input span{
		font-size: 14px;
		color: #FBFBFB;
		position: absolute;
		bottom: 10%;
		left: 10%;
	}
	.case1 a:hover .input{
		opacity: 1;
	}
	.case2 a:hover .input{
		opacity: 1;
	}
	.case3 a:hover .input{
		opacity: 1;
	}
	.case4 a:hover .input{
		opacity: 1;
	}
	.case5 a:hover .input{
		opacity: 1;
	}
	.main2{
		box-sizing: border-box;
		width: 100%;
		height:auto;
		background: #e4e4e4;
		display: block;
	}
	.main3{
		box-sizing: border-box;
		width: 100%;
		height:auto;
		padding: 0% 2% 80px 4%;
		background: #e4e4e4;
		display: flex;
		flex-flow: row wrap;
	}
	.main3 a{
		font-size:30px;
	}
	.main3 p{
		color: #949494;
		font-size: 16px;
	}
	.pic{
		width: 92%;
		height: auto;
		margin: 0% 4% 50px 4%;
	}
	.pic1{
		background: #E4E4E4;
		width: 96%;
		height: auto;
		padding: 2%;
	}
	.pic2{
		background: #E4E4E4;
		width: 100%;
		height: auto;
		padding-bottom:2%;
	}
	.pic3{
		background: #E4E4E4;
		width:calc(100% - 40px);
		height: auto;
		margin: 0 auto;
	}
	.main4{
		box-sizing: border-box;
		width: 100%;
		height:120px;
		background: #E0E0E0;
		text-align: center;
		line-height: 120px;
		display: block;
	}
	.main4 a{
		font-size: 14px;
	}
}