@charset "utf-8";

body {
	background:#FFF;
}
.homeContent {
	padding: 60px 0 0 0; text-align: left; font-size: 1.2em; line-height: 1.5em;
}
.userContent {
    padding: 20px 20px 20px 20px; text-align: left; font-size: 1.2em; line-height: 1.5em;
}
.userContent img {
	max-width: 100%;
}
.contentTitle {
	text-align: left; font-weight: bold; width: 100%; border-bottom: #CCC 1px solid;
}



.topBg {
	position: fixed; z-index: 5; top: 0; background: #FFF; border-bottom: #EEE 1px solid;
	width:100%; display: grid; grid-template-columns: 20% 70% 10%;
}
.logo {
	margin: 10px 0 10px 60px;
}
.logo > div {
	display: table-cell; width: 160px; height: 50px; text-align: center; vertical-align: middle;
}
.logo img {
	max-width: 100%; max-height: 100%;
}
.menu {
	text-align: center; margin: 5px 0 0 0;
}
.menu > ul {
	list-style-type:none; display:inline-flex; justify-content: center;
}
.menu > ul > li {
	display: list-item; padding: 5px 10px; margin: 0 3px; text-align: center;
}
.menu > ul > li > a {
	color: #000; font-size: 1.3em;
	transition:color .2s ease-in;
}
.menu > ul > li > a:hover, .menu > ul > .over > a {
	color: #16771a; font-size: 1.3em;
}
.menu > .icon {
	width: 40px; height: 40px; padding: 15px 10px 10px 10px; display: none; cursor: pointer; background: #FFF;
	position: fixed; z-index: 6; right: 0; top: 0;
}
.menu > .icon > img {
	max-width: 100%; max-height: 100%;
}
.language {
	text-align: right; margin: 25px 30px 10px 0;
}
.language > a {
	color: #000;
}
.language > a.active,
.language > a:hover {
	color: #16771a;
}


.serviceList {
	display: block; width: 100%; line-height: 1.5em;
}
.serviceList > .listItem {
	display: inline-block; width: 46%; height: 100px; border: #DDD 4px solid; margin: 5px 1%; padding: 5px; cursor: pointer; background-color: #FFF;
	transition:background-color .2s ease-in;
}
.serviceList > .listItem:hover {
	background-color: #DDD;
}
.serviceList > .listItem > div {
	display: table-cell; width: inherit; height: 100px; text-align: center; vertical-align: middle; font-size: 2em; line-height: 1.5em;
}
.serviceList > .listItem > div > a {
	color: #000;
}
.serviceTitle {
	display: table; width: 100%; text-align: center; vertical-align: middle; margin: 0 0 0 0;
}
.serviceTitle > div {
	display: table-cell; width: 100%; text-align: center; vertical-align: middle;
	font-family: "Gill Sans", Arial; color: #000; text-shadow: 1px 1px 3px #AAA; font-size: 2em; letter-spacing: 0; line-height: 1.5em;
}
.serviceDetails {
	display: block; text-align: left; font-size: 1.3em; line-height: 1.5em; padding: 20px 260px;
}

.dataList {
	display: block; width: 100%; line-height: 1.5em;
}
.dataList > .catContent {
	display: inline-block; width: 96%; padding: 20px 2% 40px 2%; text-align: left; font-size: 1.3em; line-height: 1.5em;
}
.dataList > .catContent > ul {
	list-style-type:none; display: inline-block; width: 190px; padding:0 25px 30px 25px; margin:0; vertical-align: top;
}
.dataList > .catContent > ul > .videoName {
	display: inline-block; width: 190px; padding: 5px 0; text-align: left; font-size: 1.2em; line-height: 1.2em;
}
.dataList > .catContent > ul > .video {
	display: inline-block; width: 190px; height: 120px; padding: 0; text-align: left; cursor: pointer;
	background-repeat:no-repeat; background-position: center center; background-size: cover;
	opacity: 1; transition:opacity 0.3s ease-in;
}
.dataList > .catContent > ul > .video:hover {
	opacity: 0.6;
}
.dataList > .catContent > ul a {
	color: #000;
}

.album {
	display: block; width: 96%; font-size: 1.3em; line-height: 1.5em; margin: 20px 2% 40px 2%; text-align: left;
}
.album > .photo {
	display: inline-block; width: 190px; height: 120px; overflow: hidden; margin: 10px; box-shadow: 0px 0px 2px #CCC; cursor: pointer;
	background-repeat:no-repeat; background-position: center center; background-size: cover;
	opacity: 1; transition:opacity 0.3s ease-in;
}
.album > .photo:hover {
	opacity: 0.6;
}

.homeVideo {
	width: 100%; height: 640px;
}
.topBanner {
	width: 100%; padding: 20px 0 0 0;
}
.topBanner > img {
	max-width: 100%;
}


@media only screen and (max-width:980px) {
	.contentTitle > div {
		height: 300px;
	}
	.serviceList > .listItem {
		width: 96%; height: auto;
	}
	.serviceDetails {
		padding: 20px 20px;
	}
	.dataList > .catContent {
		padding: 20px 1% 40px 1%;
	}
	.dataList > .catContent > ul {
		width: 48%; padding:0 1% 30px 1%;
	}
	.dataList > .catContent > ul > .videoName {
		width: 100%;
	}
	.dataList > .catContent > ul > .video {
		width: 100%;
	}
	.homeVideo {
		width: 100%;
		height: 460px;
	}
}

@media only screen and (max-width:840px) {
	.contentTitle > div {
		height: 240px; vertical-align: top; padding: 100px 0 0 0;
	}
	.userContent {
	    padding: 20px 10px 20px 10px;
	}
	.topBg {
		grid-template-columns: 50% 40% 10%;
	}
	.logo {
		margin: 10px 0 10px 0;
	}
	.menu {
		position: fixed; top: 0; right: -280px;  z-index: 6; width: 280px; margin: 0;
		transition:right 0.3s ease-in;
	}
	.topBg > .active {
		right: -20px;
	}
	.menu > ul {
		width: 300px; display: inline-block; margin: 0; padding: 10px 0; background: #FFF; box-shadow: #CCC 1px 1px 5px;
	}
	.menu > ul > li {
		display: list-item; padding: 5px 10px; margin: 0 3px; text-align: left; font-size: 1.5em; line-height: 2em;
	}
	.menu > ul > li > a {
		color: #545855;
	}
	.menu > ul > li > a:hover, .menu > ul > .over > a {
		color: #AAA;
	}
	.menu > .icon {
		display: inline-block;
	}
	.serviceDetails {
		padding: 20px 10px;
	}
	.album {
		width: 98%; margin: 20px 1% 40px 1%;
	}
	.album > .photo {
		width: 48%; margin: 10px 1%;
	}

	.homeVideo {
		width: 100%;
		height: 420px;
	}
	.topBanner {
		width: 100%; overflow: hidden;
	}
	.topBanner > img {
		width: auto; max-width: none; height: 140px;
	}

	.bookImage {
		width: 70% !important;
	}
}

@media only screen and (max-width:640px) {
	.dataList > .catContent > ul {
		width: 98%; padding:0 1% 30px 1%;
	}

	.homeVideo {
		width: 100%;
		height: 280px;
	}
}