@charset "UTF-8";


/** 01. Chart
 **************************************************************** **/
.myChart,.myChart2 {
	position: relative;
}

.myChart p{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	top: 45%;
	z-index: 9;
}

.myChart2 p{
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	text-align: center;
	top: 40%;
	z-index: 9;
	line-height: 1.5;
}

@media only screen and (max-width: 540px) {
	.myChart p, .myChart2 p {
		position: absolute;
		left: 0;
		right: 0;
		margin: auto;
		text-align: center;
		top: 45%;
		line-height: 1.2;
	}
}

.myChart .bk_w,.myChart2 .bk_w{
	width: 250px;
	height: 250px;
	background: #fff;
	border-radius: 50%;
	top: 29%;
	text-align: center;
	z-index: 8;
}

.myChart .bk_w2,.myChart2 .bk_w2{
	background: #fff;
	border-radius: 50%;
	top: 5%;
	text-align: center;
	z-index: 8;
}

.myChart .bk_w3,.myChart2 .bk_w3{
	background: #fff;
	top: 1%;
	text-align: center;
	z-index: 8;
}

#myChart,#myChart2 {
	z-index: 99;
	position: relative;
}



@media only screen and (max-width: 530px) {
	.myChart .bk_w2,.myChart2 .bk_w2{
		width: 460px;
		height: 460px;
		background: #fff;
		border-radius: 50%;
		top: 9%;
		text-align: center;
		z-index: 8;
	}

	.myChart .bk_w3,.myChart2 .bk_w3{
		background: #fff;
		top: 1%;
		text-align: center;
		z-index: 8;
	}
}

@media only screen and (max-width: 500px) {
	.myChart,.myChart2{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.myChart .bk_w2,.myChart2 .bk_w2{
		display: none;
	}
}


.btn:hover .topthum-hover{
	opacity: 1;
	text-decoration: none;
}

.btn{
	position: relative;
}

.topthum-hover{
	position: absolute;
	top: 0;
	left: 0;
	width:100%;
	height: 100%;
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-o-transition: all 0.3s;
	background-color:rgba(240,173,78,0.80);
	text-align: center;
	opacity: 0;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.topthum-hover.orange{
	background-color:rgba(240,173,78,0.80);
}
.topthum-hover.blue{
	background-color:rgba(91,192,222,0.80);
}
.topthum-hover.green{
	background-color:rgba(92,184,92,0.80);
}
#content .topthum-hover p{
	position: absolute;
	width:100%;
	top:50%;
	margin-top: -10px;
	text-align: center;
	font-size: 18px;
	color:#fff;
	text-transform: uppercase;
}


.h5, h5 {
    font-weight: 300;
    color: #313131;
    font-size: 130%;
}

hr.border_01 {
    margin-top: 10px;
    margin-bottom: 10px;
    border: solid 1px #333;
}

hr.border_02 {
    margin-top: 2em;
     margin-bottom: 2em;
    border: dotted 0.5px #4A4A4A;
}


/** 02. btn
 **************************************************************** **/

.btn-outline.btn-default,
.contact.gray a.btn.btn-default {background:#333;border:2px solid #fff;color:#fff;}
.btn-outline.btn-default:hover,
.btn-outline.btn-default:active,
.btn-outline.btn-default:focus,
.contact.gray a.btn.btn-default:hover,
.contact.gray a.btn.btn-default:active,
.contact.gray a.btn.btn-default:focus{color:#333;background:#fff;border:2px solid #333;}

.btn-outline.btn-default.reverse,
.contact.gray a.btn.btn-default.reverse {background:#fff;border:2px solid #333;color:#333;}
.btn-outline.btn-default.reverse:hover,
.btn-outline.btn-default.reverse:active,
.btn-outline.btn-default.reverse:focus,
.contact.gray a.btn.btn-default.reverse:hover,
.contact.gray a.btn.btn-default.reverse:active,
.contact.gray a.btn.btn-default.reverse:focus{color:#fff;background:#333;border:2px solid #333;}