
/*** General *****************/
body {
	overflow-y: scroll;
}


/*** .Nav Class ************************/
.join-nav{
	width: 100%; max-width:960px; margin: 0 auto; 
	margin: 30px auto; margin-bottom: 50px;
	overflow:hidden;
	
	text-align: left;
	border:1px solid;
}

@media (max-width:992px) {
	.join-nav{width: calc(100% - 40px); }

}
.join-nav label{
	display: block;
	position: relative;
	padding: 5px 20px;

	height: 34px;
	cursor: pointer;
	z-index: 20;
	
	box-shadow: 0px 0px 0px 1px rgba(155,155,155,.5);
	-webkit-box-shadow: 0px 0px 0px 1px rgba(155,155,155,.5);
	-moz-box-shadow:0px 0px 0px 1px rgba(155,155,155,.5);
}
.join-nav label i{
	font-size:21px;
	padding:3px 10px 0 0;
}
.join-nav input:checked + label,
.join-nav input:checked + label:hover{
	box-shadow: 
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
	-webkit-box-shadow:
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
	-moz-box-shadow:
		0px 0px 0px 1px rgba(155,155,155,.3), 
		0px 2px 2px rgba(0,0,0,.1);
}
.join-nav label:hover:after,
.join-nav input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;	
}
.join-nav input{
	display: none;
}

/*** .content Class *********************/
.content{
	margin-top: -1px;
	overflow: hidden;
	height: auto;
	position: relative;
	z-index: 10;
	padding: 15px;
}
.content p{
	margin-top: 16px;
	
	
}
.content h4{
	padding:8px 0 7px 15px;
}
.content h6{
	padding:8px 15px 10px 15px;
	margin:10px;
	
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
}
.content h6 i{
	padding:0 5px;
	font-size:10px;
}

/*** For Change Animation Effects ****/
.join-nav input:checked ~ .content{       
	/* z-index:-1; */
	
	-webkit-animation-name: slideLeft;
	-webkit-animation-duration: .7s;
	-webkit-animation-iteration-count: 1;
	padding:20px 20px; 
}



/**** Color And Background **********************/
/* body{
	background-image:url(../../images/bg.jpg);
	background-repeat:repeat;
} */
a {
	color:#666666;
}

h4, p{
	color: #777777;
}
.join-nav label{
	color:#3B4E58;
}
.join-nav label:hover,
.join-nav input:checked + label,
.join-nav input:checked + label:hover{ 
	color:#FFFFFF;
}
.content{
	background: rgba(255, 255, 255, 0.5);
}
.content h6{
	color:#666666;
}



.content ul{width: 100%; border-bottom: 1px #999 solid; height: auto; overflow: hidden; padding-bottom: 10px; }
.content ul li{width: 33.3%; float: left; line-height: 16px; border-left: 16px #029946 solid; padding-left: 20px; margin-bottom: 14px;}
.content .hr-tel{border-top: 1px #999 solid; margin-top: 16px;}
.content .hr-tel a:hover{ color:  #029946; }


@media (max-width:600px) {
	.content ul li{width: 50%;}
}




.join-nav label span{float: right; font-size: 14px; color: #999; font-weight: 500;}
.join-nav label:hover span,
.join-nav input:checked + label span,
.join-nav input:checked + label:hover span{ 
	color:#FFFFFF;
}
/* For Change Style */
.join-nav label{                       /*Light Color*/
	background-color:#dbf8e8;
}
.join-nav label:hover,
.join-nav input:checked + label,
.join-nav input:checked + label:hover{ /*Dark Color*/
	background: #029946;
}

.join-nav{                             /*Dark Color*/
	border-color: #029946;
}
.content p{                       /*Dark Color*/
	border-left-color:#029946;
}
.content h6{                      /*Dark Color*/
	background-color:rgba(33, 203, 187, .1);
}
.join-nav label:hover:after,
.join-nav input:checked + label:hover:after{
	/*background: transparent url(../../images/arrow_down.png) no-repeat center center;*/
}
.join-nav input:checked + label:hover:after{
	background-image:url(../../images/arrow_up.png);
}
.join-nav label{margin-bottom: 0px;}




















