@charset "UTF-8";
@import url("https://use.typekit.net/rrn5qyz.css");
/* CSS Document */
body {
	font-family: "Lato", sans-serif;
	transition: background-color .5s;
	background-color: #0a6563;
	overflow-x: hidden;
	color: #333333;
	line-height: 1.5em;
	padding: 0;
	margin: 0;
}

a {
	cursor: pointer;
	color: #cc6646;
	text-decoration: none;
	transition: all 0.25s ease-in-out;
}

	a:hover {
		color: #d03c0e;
		text-decoration: underline;
	}

figure,
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
	padding: 0;
}

h1,
h2,
h3,
strong {
	font-weight: 700;
}

b,
h4,
h5,
h6 {
	font-weight: 500;
}

dl,
ol,
ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

li {
	list-style: none;
}

h1 {
	font-size: 2.25rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.75rem;
}

h4 {
	font-size: 1.375rem;
}

h5 {
	font-size: 1.125rem;
}

h6 {
	font-size: 1rem;
}

p {
	font-size: 1rem;
}

label {
	font-size: 0.9375rem;
}

b {
	font-weight: 500;
}

srtong {
	font-weight: 700;
}

em {
	font-style: italic;
}

small {
	font-size: 75%;
}

big {
	font-size: 125%;
}

.f-w-1 {
	font-weight: 100;
}

.f-w-2 {
	font-weight: 200;
}

.f-w-3 {
	font-weight: 300;
}

.f-w-4 {
	font-weight: 400;
}

.f-w-5 {
	font-weight: 500;
}

.f-w-6 {
	font-weight: 600;
}

.f-w-7 {
	font-weight: 700;
}

.f-w-8 {
	font-weight: 800;
}


.bg-gray {
	background-color: #f4f4f4;
}

.bg-lake {
	background-color: #00857a;
}

.text-lake {
	color: #00857a;
}

.font-niveau {
	font-family: "niveau-grotesk", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.font-ofelia {
	font-family: ofelia-text, sans-serif;
	font-weight: 500;
	font-style: normal;
}

.font-rooney {
	font-family: "rooney-web", serif;
	font-weight: 700;
	font-style: normal;
}

/*go to top*/
#gotoTop {
	display: none;
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 99;
	font-size: 18px;
	border: none;
	outline: none;
	background-image: linear-gradient(to top, #ff5a00, #ff9600);
	color: white;
	cursor: pointer;
	padding: 8px 10px;
	border-radius: 30px;
}

	#gotoTop:hover {
		background-image: linear-gradient(to left, #ff5a00, #ff9600);
	}

/*intro*/
#logo img {
	height: 60px;
	margin-top: 20px;
}

.intro {
	height: 635px;
	background-image: url("../images/intro-cover.svg"),linear-gradient(rgba(0, 81, 78, 0.5), rgba(0, 0, 0, 0.5)), url("../images/intro-bg.jpg");
	background-position: bottom, center,top center;
	background-repeat: no-repeat;
	background-size: 105%, cover;
	position: relative;
}

.intro-page {
	height: 150px;
	background-image: url("../images/pageHeader-cover.svg"), url("../images/pageHeader-bg.jpg");
	background-position: center bottom,top center;
	background-repeat: no-repeat;
	background-size: 105%, cover;
	position: relative;
}

@media screen and (min-width: 1440px) and (max-width: 2240px) {
	.intro {
		height: 835px;
		background-image: url("../images/intro-cover.svg"),linear-gradient(rgba(0, 81, 78, 0.5), rgba(0, 0, 0, 0.5)), url("../images/intro-bg.jpg");
		background-position: bottom, center,top center;
		background-repeat: no-repeat;
		background-size: 100%, cover;
		position: relative;
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
}

.intro-content {
	text-align: left;
	position: absolute;
	top: 30%;
	left: 10%;
	transform: translate(-0%, -20%);
}

.intro-texts h1 {
	color: #FFF;
}

.intro-texts ul {
	padding: 0;
	margin: 0;
}

	.intro-texts ul li {
		float: left;
		margin-right: 10px;
	}

		.intro-texts ul li a {
			color: #FFF;
			padding: 5px 20px;
			border: 1px solid #FFF;
			border-radius: 4px;
			background-color: rgba(255,255,255, 0.1);
		}

			.intro-texts ul li a:hover {
				background-color: #ffc600;
				text-decoration: none;
				color: #333333;
				border: 1px solid #cc9e00;
			}

@media screen and (min-width: 1440px) and (max-width: 2240px) {
	.intro-content {
		position: absolute;
		top: 30%;
		left: 20%;
		bottom: 20%;
		transform: translate(-0%, -20%);
	}
}

@media screen and (min-width: 768px) and (max-width: 960px) {
	.intro {
		height: 500px;
		background-size: 110%, cover;
	}

	.intro-content {
		osition: absolute;
		top: 40%;
		left: 12%;
		bottom: 0%;
		transform: translate(0%, -25%);
	}

	.intro-texts h1 {
		font-size: 1.5rem;
	}
}

@media screen and (min-width: 576px) and (max-width: 768px) {
	.intro {
		height: 400px;
		background-size: 110%, cover;
	}

	.intro-content {
		osition: absolute;
		top: 30%;
		left: 12%;
		bottom: 0%;
		transform: translate(0%, -25%);
	}

	.intro-texts h1 {
		font-size: 1.375rem;
		margin-bottom: 0;
	}

	.intro-texts ul li {
		float: none;
		margin-right: 0px;
		margin-top: 10px;
	}

		.intro-texts ul li a {
			color: #FFF;
			padding: 5px 10px;
		}
}

@media screen and (max-width: 576px) {
	#logo img {
		height: auto;
		width: 100%;
		margin-top: 30px;
	}

	.intro {
		height: 400px;
		background-size: 145%, cover;
	}

	.intro-content {
		width: 80%;
		osition: absolute;
		top: 30%;
		left: 2%;
		bottom: 0%;
		transform: translate(0%, -25%);
	}

	.intro-texts h1 {
		font-size: 1.375rem;
		margin-bottom: 0;
	}

	.intro-texts ul li {
		float: none;
		margin-right: 0px;
		margin: 5px 0;
	}

		.intro-texts ul li a {
			color: #FFF;
			padding: 2px 10px;
			margin: 0;
			width: 80%;
			display: block;
			text-align: center;
		}
}
/*side nav*/
.menu-bar {
	cursor: pointer;
	color: #FFF;
	float: right;
	margin-top: 30px;
}

	.menu-bar i {
		font-size: 2rem;
	}

.sidenav {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	background-color: #FFF;
	overflow-x: hidden;
	transition: 0.5s;
}

	.sidenav h5 {
		margin-left: 22px;
		margin-top: 20px;
		width: 70%;
	}

	.sidenav hr.top-line {
		border-top: 1px solid #1da5d7;
		width: 70%;
		margin-left: 22px;
	}

	.sidenav hr.bottom-line {
		border-top: 1px solid #cacaca;
		width: 70%;
		margin-left: 22px;
	}

	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 1.125rem;
		color: #333333;
		display: block;
		transition: 0.3s;
	}

		.sidenav a:hover {
			color: #1da5d7;
		}

	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 20px;
		font-size: 2rem;
		margin-left: 20px;
	}

#main {
	transition: margin-left .5s;
	padding: 0;
}

	#main .breadcrumb {
		color: #666666;
		background: url("../images/icon-dot.svg") center left no-repeat;
		padding-left: 15px;
	}

		#main .breadcrumb a {
			color: #666666;
			padding: 0 5px;
		}

			#main .breadcrumb a:hover {
				color: #0099c1;
			}

@media screen and (max-height: 450px) {
	.sidenav {
		padding-top: 15px;
	}

		.sidenav a {
			font-size: 18px;
		}
}

h1.index-title {
	font-family: rooney-web, serif;
	font-weight: 700;
	font-style: normal;
	background: url("../images/icon-indexTitle.svg") top right no-repeat;
	padding-right: 40px;
	display: inline-block;
	color: #4F4F4F;
}

.section_content {
	text-align: justify;
}

	.section_content ol li {
		list-style: decimal;
		padding-bottom: 8px;
	}

a.section-link {
	padding: 5px;
	border-bottom: 1px solid #a3a3a3;
	width: 200px;
	display: block;
	color: #4f4f4f;
	text-align: left;
	font-size: 0.9375rem;
}

	a.section-link i {
		float: right;
		vertical-align: bottom;
		padding-top: 5px;
	}

	a.section-link:hover {
		background-color: #ffc600;
		color: #FFF;
		text-decoration: none;
	}

		a.section-link:hover i {
			transform: rotate(45deg);
		}


/*Chair Man*/
.chairman {
	padding-bottom: 40px;
}

	.chairman .chairman-photo {
		margin-top: 4rem;
		z-index: 1;
	}

	.chairman .chairman-note {
		color: #00857a;
		font-size: 0.9375rem;
	}

@media screen and (max-width: 576px) {
	.chairman .chairman-photo {
		margin: 4rem auto;
		text-align: center;
	}

	.chairman h1 {
		margin-top: 0;
		padding-top: 0;
	}
}

/*news Card*/
.news-card .news-date {
	color: #ff6600;
	font-size: 0.9375rem;
}

.news-card h3 {
	margin-top: 5px;
	margin-bottom: 1.5rem;
	color: #333333;
}

	.news-card h3 a {
		color: #333333;
	}

		.news-card h3 a:hover {
			color: #d03c0e;
			text-decoration: underline;
		}

.news-card .news-content {
	height: 5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.page-content {
	color: #333333;
	margin-bottom: 30px;
	overflow: auto;
}

	.page-content ol li {
		list-style: decimal;
		padding-bottom: 10px;
	}

.news-option {
	border-top: 1px solid #acacac;
}

	.news-option h4 {
		margin: 0;
		font-size: 1.125rem;
		padding: 20px 0 10px;
		color: #333333;
	}

	.news-option ul {
		padding: 0;
		margin: 0 0 40px 0;
	}

		.news-option ul li {
			margin: 2px 0;
			padding: 0;
		}

a.news-link {
	border-bottom: 1px solid #a3a3a3;
	display: block;
	padding: 5px;
	font-size: 0.9375rem;
	color: #4f4f4f;
}

	a.news-link:hover {
		background-color: #a3a3a3;
		color: #FFF;
		text-decoration: none;
	}

@media screen and (max-width: 576px) {
	.news-card {
		margin-bottom: 3rem;
		overflow: auto;
	}

		.news-card .news-content {
			font-size: 1.25rem;
		}

	a.news-link {
		width: 200px;
	}
}


/*committee*/
.committee .item .comm-card {
	border: 1px solid #C1C1C1;
	border-radius: 30px;
	text-align: center;
	padding: 15px 10px;
	height: 210px;
}

.committee .item img {
	max-width: 100px;
	margin: 10px auto;
	padding-top: 5px;
}

.committee .item .comm-card:hover {
	background-color: #ffd74b;
	border: 1px solid #e4bc30;
	transition: all 0.25s ease-in-out;
}

.committee .item a p {
	font-size: 1.125rem;
}

.committee .item a:hover {
	color: #000;
	text-decoration: none;
}

ul.comm {
	padding: 0;
	margin: 0 0 40px 0;
	overflow: auto;
}

	ul.comm li {
		float: left;
		padding: 10px;
		margin: 0;
		width: 25%;
	}

h2.comm-title {
	font-size: 1.875rem;
	padding: 0;
	margin: 0;
	font-weight: bold;
}

	h2.comm-title img {
		width: 70px;
	}

	h2.comm-title .comm-img {
		width: 120px;
		height: 120px;
		padding: 25px;
		margin-right: 20px;
		display: inline-block;
		background-color: #FFD74B;
		border-radius: 60px;
	}

.comm-ms {
	margin-left: 140px;
}

@media screen and (min-width: 768px) and (max-width: 960px) {
	ul.comm li {
		width: 33.33%;
	}

	h2.comm-title img {
		width: 50px;
	}

	h2.comm-title .comm-img {
		width: 80px;
		height: 80px;
		padding: 15px;
		margin-right: 20px;
		display: inline-block;
		background-color: #FFD74B;
		border-radius: 45px;
	}

	.comm-ms {
		margin-left: 100px;
	}
}

@media screen and (max-width: 768px) {
	ul.comm li {
		width: 50%;
	}

	h2.comm-title {
		text-align: center;
		margin-bottom: 20px;
	}

		h2.comm-title img {
			width: 70px;
		}

		h2.comm-title .comm-img {
			width: 110px;
			height: 110px;
			padding: 20px;
			margin: 10px auto;
			display: block;
			background-color: #FFD74B;
			border-radius: 70px;
		}

	.comm-ms {
		margin-left: 0;
	}
}


/*footer*/
footer.bg-footer {
	background-color: #0a6563;
	overflow: auto;
	font-size: 0.8125rem;
}

footer ul li a {
	color: #FFF;
}

footer p {
	color: #FFF;
	font-size: 0.8125rem;
	font-weight: 200;
}


/*news-list*/
ul.news-list {
	padding: 0;
	margin: 0 0 5px 0;
}

	ul.news-list li {
		border-bottom: 1px solid #DDDDDD;
		margin: 0;
		padding: 15px 0;
		list-style: none;
	}

.news-list .news-date {
	color: #ff6600;
	font-size: 1rem;
	float: left;
	padding: 2px 1.2rem 0 0;
}

.news-list p {
	padding: 0;
	margin: 0;
	color: #333333;
}

	.news-list p a {
		color: #333333;
	}

		.news-list p a:hover {
			color: #d03c0e;
			text-decoration: underline;
		}


.table-news {
	border: none;
}

	.table-news td {
		padding: 15px 10px;
		border-top: none;
		border-left: none;
		border-right: none;
		border-bottom: 1px solid #DDDDDD;
		line-height: 1.6rem;
	}

	.table-news .news-date {
		color: #ff6600;
		font-size: 1rem;
		text-align: center;
	}

	.table-news a {
		color: #333333;
		font-size: 1.125rem;
	}

		.table-news a:hover {
			color: #d03c0e;
			text-decoration: underline;
		}

.pager {
	border-bottom: 1px solid #A3A3A3;
	color: #4F4F4F;
	margin: 20px 0;
	padding: 10px 4px;
	display: inline-block;
	font-size: 0.9375rem;
}

	.pager a {
		color: #4F4F4F;
		padding: 0 2px;
	}

		.pager a.active {
			font-weight: 600;
			color: #00a8d4;
		}


@media screen and (max-width: 768px) {
	.news-list .news-date {
		font-size: 1.125rem;
		float: none;
	}

	.pager {
		margin: 20px auto;
		text-align: center;
		display: block;
		border-bottom: none;
	}
}


.chairman-card {
	padding: 15px;
	margin-bottom: 15px;
	border: 1px solid #707070;
	border-radius: 6px;
}

	.chairman-card:hover {
		border: #FF6600 1px solid;
		box-shadow: 0 5px 10px rgba(0,0,0,.1);
	}

	.chairman-card .chairman-number {
		color: #FF6600;
		margin-top: 10px;
		font-size: 0.9375rem;
	}

	.chairman-card .name {
		text-align: center;
		font-size: 0.9375rem;
	}

	.chairman-card .period {
		font-size: 0.8125rem;
		color: #666;
		text-align: center;
	}