:root {
  --teal: #009985;
}
.bird{
	background-image: url('../images/home/bird@3x.png'),url('../images/home/dot@3x.png');
	background-size: auto 50%;
	background-repeat: no-repeat;
	background-position: 1% 30%,95% 100%;
}
.title{
	width : 50%;
	font-size: 2em;
	color : #009985;
	margin : 0 auto;
	text-align: center;
	font-weight: bold;
}
.about{
	background-image: url('../images/home/tonnam@3x.png'),url('../images/home/dot@3x.png');
	background-size: auto 40%,auto 10%;
	background-repeat: no-repeat;
	background-position: 0% 100%,69% 97%;
}
.about_txt{
	font-size: 1.3em;
	line-height: 1.8;
	font-weight: 100;
}
.about_txt strong{
	font-weight: bold;
}
.about_readmore{
	text-align: right;
	font-size: 0.9em;
	color: #009985;
}
.about_readmore a{
	text-decoration: underline;
	color: #009985;
}
.about-img{
	background-image: url('../images/home/dot@3x.png');
	background-size: auto 11%;
    background-repeat: no-repeat;
    background-position: 84% 0%;
}
.about-img img{
	max-width: 90%;
	margin-left: 3%;
	margin-top: 5%;
}
.goal{
	background-image: url('../images/home/fi-001@3x.png');
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
	min-height: 555px;
}
.goal .goal_title{
	font-size: 3.5em;
	color:#fff;
	font-weight: bold;
	letter-spacing: 2px;
}
.goal .achievement{
	font-size: 2.5em;
	color:#fff;
	letter-spacing: 2px;
}
.register{
	background-image: url('../images/home/water-bg@3x.png');
	background-size: cover;
	background-position: top left;
	background-repeat: no-repeat;
}
.register_text{
	padding-bottom: 6%;
	margin-top:auto;
	margin-bottom:auto;
}
.register_title{
	font-size: 4em;
	color:#009985;
	font-weight: bold;
	letter-spacing: 1px;
}
.register_desc{
	font-size: 2.5em;
	font-weight: 100;
}
.register_button{
	/*width:30%;*/
	margin-top: 5%;
	padding:1% 8%;
	background-color: #009985;
	border:none;
	font-size: 1.2em
}
.btn-primary.register_button:hover{
	background-color: #009985;
}
.slideout {
    position: fixed;
    top: 40%;
    left: 0;
    width: 300px;
    height: 50px;
    margin-left: -135px;
    padding-top:0.5%;
    text-align: center;
    background: #6DAD53;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-image: linear-gradient(to right, #00c4e4, #009985);
    color:#fff;
    font-size: 1.3em;
    z-index:1;
}
.slideout a{
	text-decoration: none;
	color:#fff;
}
.slideout.relative{
	position : relative;
	top:200px;
	left:-10px;
}

.text_rotate {
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.slideout .fab{
	font-size: 1.3em;
}
.footer{
	background-color: #F5F5F5;
}
.highlight{
	background-image: url('../images/home/r-asset-6.png'),url('../images/home/water-bg@3x.png');
	background-size: auto 33%,auto 100%;
	background-repeat: no-repeat;
	/* background-position: 1% 100%,0% 100%; */
	background-position: 1% 73%,0% 100%;
	margin-top: 3%;
}
.highligh_title{
	width : 50%;
	font-size: 3em;
	color : #009985;
	margin : 0 auto;
	text-align: center;
	font-weight: bold
}
.content_list{
	padding: 2% 5%;
	margin-top: 2%;
	width: 200%;
}
.content_item{
	height: auto;
	padding: 1%;
	cursor: pointer;
}
.content_item:hover{
	background-color: #169C86;
}
.content_list .list_text{
	width: 94%;
	padding: 3%;
	background-color: #FFFFFF;
	margin: 0 auto;
	margin-top:-10%;
	position: relative;
	line-height: 1.8;
	height: 13em;
}
.content_list .title{
	width: 100%;
	margin: 0 auto;
	font-weight: bold;
	margin-bottom: 4%;
	max-height: 11em;
	/* height: 3.6em; */
	font-size: 1.1em;
}
.content_list .title a{
	text-decoration: none;
	color: #000000;
}
.content_list .desc{
	height: 5.4em;
	word-wrap: break-word;
	overflow: hidden;
    text-overflow: ellipsis;
}
.highlight .loadmore {
	width: 15%;
	padding: 1% 0%;
	color: #FFFFFF;
	font-size: 1.4em;
	margin : 1% auto 5% auto;
	border-radius: 6px;
	background-image: linear-gradient(to right, #00c4e4, #009985);
	background-image: linear-gradient(to right, #00c4e4, var(--teal));
	box-shadow: 0px 3px #4a4a4a;
	-webkit-box-shadow: 0px 3px #4a4a4a;
	-moz-box-shadow:    0px 3px #4a4a4a;
}
.highlight .loadmore a{
	text-decoration: none;
	color: #FFFFFF;
}
@media(max-width:992px){
	.bird{
		background-image: url('../images/home/bird@3x.png');
		background-size: auto 50%;
		background-repeat: no-repeat;
		background-position: 1% 30%;
	}
	.about{
		background-image: none;
		background-size: auto 10%;
		background-position: 69% 97%;
	}
	.about-img{
		text-align: center;
	}
	.about-img img{
		max-width: 90%;
		margin-left: 3%;
		margin-top: 5%;
	}
	.about-story{
		margin:0 3%;
	}
	.goal{
		text-align: center;
	}
	.goal_title{
		margin-top: 20px;
	}
	.register{
		background-image: url('../images/home/r-asset-6-m@3x.png'),url('../images/home/water-bg@3x.png');
		background-size: auto 100%,cover;
		background-position: 2% 100%,top left;
		background-repeat: no-repeat;
		min-height: 700px;
	}
	.footer{
		background-color: transparent;
		margin-top:-10%;
	}
	.register_text{
		text-align: center;
	}
	.register_text button{
		width:50%;
	}
	.highlight .loadmore {
		width: 70%;
		margin-bottom: 10%;
	}
}
@media(max-width:768px){
	.bird{
		background-size: auto 20%;
		background-repeat: no-repeat;
		background-position: 1% 10%;
	}
	.title{
		width : 94%;
		font-size: 1.5em;
	}
	.slideout {
		display: none;
	}
	.goal{
		text-align: left;
		padding:0 5%;
	}
	.goal img{
		margin-top: -10%;
		width:100%;
	}
	.goal .goal_title{
		font-size: 2.5em;
	}
	.goal .achievement{
		font-size: 1.3em;
	}
	.register{
		background-size: auto 100%,cover;
		background-position: 2% 100%,top left;
		background-repeat: no-repeat;
		min-height: 400px;
	}
	.register_title{
		font-size: 2em;
	}
	.register_desc{
		font-size: 1.5em;
	}
	.register_text{
		margin-top:0;
		margin-bottom:0;
	}
	.register_text button{
		width: 90%;
	}
	.highlight{
		margin-bottom: 10%;
	}
	.highligh_title{
		font-size: 2em;
	}
	.highlight .loadmore {
		width: 70%;
		margin-bottom: 5%;
	}
}