@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);

nanum {
	font-family: 'NanumSquare', sans-serif;
}

.normal {
	font-family: 'NanumSquare', sans-serif;
	font-weight: 400
}

.bold {
	font-family: 'NanumSquare', sans-serif;
	font-weight: 700
}

.bolder {
	font-family: 'NanumSquare', sans-serif;
	font-weight: 800
}

.light {
	font-family: 'NanumSquare', sans-serif;
	font-weight: 300
}
.black{
	color:#333 !important;
}
[class^="secBg"] {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.secBg1 {
	background-image: url("../image/secBg1.jpg");
}

.secBg2 {
	background-image: url("../image/secBg2.jpg");
}
#section5{
	background-color:#272727;
}
.root_daum_roughmap{
	width: 100% !important;
	margin: 30px 0 !important;
}
.table table{
	width: 100%;
	border-collapse: collapse;
}
.table th{
	font-size:14px;
	color:#fff;
	text-align: left;
	width: 33%;
	padding: 10px;
}
.table td{
	font-size:14px;
	color:#fff;
	text-align: left;
	width: 33%;
	padding: 10px;
	line-height: 24px;
}
@media (min-width: 1065px) {
	.BigFont {
		font-size: 60px;
		line-height: 74px;
	}

	.AreaTop {
		height: 50%;
		display: flex;
		align-items: center;
	}

	.leftText {
		float: left;
	}

	.rightText {
		float: left;
		color: #fff;
		margin-left: 120px;
		line-height: 28px;
		font-size: 18px;
	}

	.secBg1 .wrap {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.secFoot {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 50%;
		display: flex;
		align-items: center;
	}

	.secFoot [class^="img"] {
		float: left;
	}

	[class^="img"] {
		position: absolute;
	}

	.img1 {
		bottom: 40%;
		left: 0%;
	}

	.img2 {
		bottom: 10%;
		left: 15%;
	}

	.img3 {
		bottom: 30%;
		left: 30%;
	}

	.img4 {
		bottom: 30%;
		left: 58%;
	}

	.img5 {
		bottom: 50%;
		left: 70%;
	}

	.img6 {
		bottom: 30%;
		left: 83%;
	}

	.graphArea {
		width: 1200px;
		height: 400px;
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grap {
		width: 100%;
		height: 100%;
	}

	.grap [class^="area"] {
		width: 6.25%;
		height: 100%;
		float: left;
		position: relative;
	}

	.grap [class^="area"] .dot {
		width: 6px;
		border-radius: 6px;
		height: 6px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -3px;
	}

	.year {
		position: absolute;
		bottom: -20px;
		left: 50%;
		margin-left: -16px;
		color: #fff;
	}

	.graphArea [class^="graphHeight"] {
		position: absolute;
		bottom: 0;
		height: 0;
		width: 100%;
		/*		overflow: hidden;*/
		transition-duration: 0.5s;
	}

	.graphArea.on .graphHeight1 {
		height: 60px;
	}

	.graphArea.on .graphHeight2 {
		height: 90px;
	}

	.graphArea.on .graphHeight3 {
		height: 120px;
	}

	.graphArea.on .graphHeight4 {
		height: 80%;
	}

	.grap [class^="number"] {
		border-radius: 50%;
		background: #919191;
		z-index: 1;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		left: 50%;
		margin-left: -20px;
	}

	.grap .num {
		width: 30px;
		height: 30px;
		font-size: 18px;
		color: #000;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		background: #fff;
		box-shadow: 7px 5px 10px -4px;
		z-index: 1;
		margin: 0 auto;
	}

	.bar {
		height: 100%;
		width: 3px;
		background-color: #919191;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.grap .area16 [class^="number"] {
		width: 80px;
		height: 80px;
		left: 50%;
		margin-left: -40px;
		background: #bb874d;
	}

	.grap .area16 [class^="number"]::before {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 3s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 [class^="number"]::after {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 2.2s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 .num {
		width: 60px;
		height: 60px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #bb874d;
	}

	.grap .area16 .bar {
		height: 100%;
		width: 3px;
		background-color: #bb874d;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.area4 .Arrow {
		position: absolute;
		width: 0px;
		bottom: 170px;
		transform: rotate(-11deg);
		transition-duration: 0.8s;
	}

	.area4 .Arrow.on {
		width: 870px;
		transition-duration: 0.8s;
	}

	.area4 .Arrow img {
		width: 100%;
	}

	.smallText {
		font-size: 14px;
	}

	[class^="lineGraph"] {
		width: 100%;
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: absolute;
		left: 0;
	}

	.lineGraph1 {
		bottom: 0.5%;
	}

	.lineGraph2 {
		bottom: 14.5%;
	}

	.lineGraph3 {
		bottom: 28.5%;
	}

	.lineGraph4 {
		bottom: 42.5%;
	}

	.lineGraph5 {
		bottom: 56.5%;
	}

	.lineGraph6 {
		bottom: 70.5%;
	}

	.lineGraph7 {
		bottom: 84.5%;
	}

	/*Hover S*/
	#section3 {
		background-color: #272727;
	}

	.HoverBox {
		border: 1px solid #bb874d;
		border-right: 0;
		width: 19.9%;
		float: left;
		height: 200px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 20px;
		text-align: center;
		line-height: 24px;
		margin-top: 50px;
		position: relative;
		overflow: hidden;
	}

	.HoverBox:last-child {
		border-right: 1px solid #bb874d;
	}

	.HoverBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(185, 137, 83, 0.17);
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.HoverBox:hover::before {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
		transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	}

	.HoverBox::after {
		content: "";
		width: 0px;
		height: 0px;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 20px solid rgba(185, 137, 83, 1);
		position: absolute;
		bottom: -100%;
		z-index: 3;
		transition-duration: 0.5s;
	}

	.HoverBox:hover::after {
		content: "";
		bottom: 0;
		transition-duration: 0.5s;
	}

	.brownBox {
		width: 89.98%;
		padding: 0 5%;
		background-color: #bb874d;
		font-size: 14px;
		line-height: 24px;
		color: #fff;
		height: 0;
		overflow: hidden;
		transition-duration:0.5s;
	}

	.brownBox.on {
		padding: 3% 5%;
		height: auto;
		transition-duration:0.5s;
	}
	[class^="cursor"]{
		opacity:0;
		height:0;
	}
	[class^="cursor"].on{
		opacity:1;
		height:auto;
		transition-duration: 0.7s;
	}

	/*Hover E*/
	.circleBox{
		float: left;
		width: 20%;
		text-align: center;
	}
	.cirCle{
		width: 200px;
		height: 200px;
		border-radius: 50%;
		border: 5px solid #bb874d;
		margin: 30px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:20px;
	}
	.circleBox:nth-child(2) .cirCle, .circleBox:nth-child(4) .cirCle{
		width: 208px;
		height: 208px;
		border-radius: 50%;
		border: 1px solid #bb874d !important;
	}
	.text{
		text-align: left;
		font-size:14px;
		line-height: 24px;
		width: 150px;
		margin: 20px auto 0;
	}
}

@media (max-width: 1064px) and (min-width: 768px) {
	.BigFont {
		font-size: 60px;
		line-height: 74px;
	}

	.AreaTop {
		height: 50%;
		display: flex;
		align-items: center;
	}

	.leftText {
		/* float: left; */
	}

	.rightText {
		color: #fff;
		margin-left: 120px;
		line-height: 28px;
		font-size: 18px;
	}

	.secBg1 .wrap {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.secFoot {
		position: absolute;
		width: 100%;
		bottom: 0;
		height: 50%;
		display: flex;
		align-items: center;
	}

	.secFoot [class^="img"] {
		float: left;
    width: 23%;
	}

	[class^="img"] {
		position: absolute;
	}
	[class^="img"] img{
		width: 100%;
	}

	.img1 {
		bottom: 40%;
		left: 0%;
	}

	.img2 {
		bottom: 10%;
		left: 15%;
	}

	.img3 {
		bottom: 30%;
		left: 30%;
	}

	.img4 {
		bottom: 30%;
		left: 58%;
	}

	.img5 {
		bottom: 50%;
		left: 70%;
	}

	.img6 {
		bottom: 30%;
		left: 83%;
	}

	.graphArea {
		width: 100%;
		height: 400px;
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.grap {
		width: 100%;
		height: 100%;
	}

	.grap [class^="area"] {
		width: 6.45%;
height: 100%;
float: left;
position: relative;
}

	.grap [class^="area"] .dot {
		width: 6px;
		border-radius: 6px;
		height: 6px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -3px;
	}

	.year {
		position: absolute;
		bottom: -20px;
		left: 50%;
		margin-left: -16px;
		color: #fff;
	}

	.graphArea [class^="graphHeight"] {
		position: absolute;
		bottom: 0;
		height: 0;
		width: 100%;
		/*		overflow: hidden;*/
		transition-duration: 0.5s;
	}

	.graphArea.on .graphHeight1 {
		height: 60px;
	}

	.graphArea.on .graphHeight2 {
		height: 90px;
	}

	.graphArea.on .graphHeight3 {
		height: 120px;
	}

	.graphArea.on .graphHeight4 {
		height: 80%;
	}

	.grap [class^="number"] {
		border-radius: 50%;
		background: #919191;
		z-index: 1;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		left: 50%;
		margin-left: -20px;
	}

	.grap .num {
		width: 30px;
    height: 30px;
    font-size: 14px;
    color: #000;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    background: #fff;
    box-shadow: 7px 5px 10px -4px;
    z-index: 1;
    margin: 0 auto;
	}

	.bar {
		height: 100%;
		width: 3px;
		background-color: #919191;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.grap .area16 [class^="number"] {
		width: 50px;
    height: 50px;
    left: 50%;
    margin-left: -25px;
    background: #bb874d;
	}

	.grap .area16 [class^="number"]::before {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 3s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 [class^="number"]::after {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 2.2s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 .num {
		width: 40px;
		height: 40px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #bb874d;
	}
	.area15{
		display: none;
	}
	.grap .area16 .bar {
		height: 100%;
		width: 3px;
		background-color: #bb874d;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.area4 .Arrow {
	    position: absolute;
	    width: 0px;
	    bottom: 168px;
	    transform: rotate(-17deg);
	    transition-duration: 0.8s;
	}

	.area4 .Arrow.on {
		width: 51vh;
    transition-duration: 0.8s;
	}

	.area4 .Arrow img {
		width: 100%;
	}

	.smallText {
		font-size: 14px;
	}

	[class^="lineGraph"] {
		width: 100%;
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: absolute;
		left: 0;
	}

	.lineGraph1 {
		bottom: 0.5%;
	}

	.lineGraph2 {
		bottom: 14.5%;
	}

	.lineGraph3 {
		bottom: 28.5%;
	}

	.lineGraph4 {
		bottom: 42.5%;
	}

	.lineGraph5 {
		bottom: 56.5%;
	}

	.lineGraph6 {
		bottom: 70.5%;
	}

	.lineGraph7 {
		bottom: 84.5%;
	}

	/*Hover S*/
	#section3 {
		background-color: #272727;
	}

	.HoverBox {
		border: 1px solid #bb874d;
    border-right: 0;
    width: 19.8%;
    float: left;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 24px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
	}

	.HoverBox:last-child {
		border-right: 1px solid #bb874d;
	}

	.HoverBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(185, 137, 83, 0.17);
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.HoverBox:hover::before {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
		transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	}

	.HoverBox::after {
		content: "";
		width: 0px;
		height: 0px;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 20px solid rgba(185, 137, 83, 1);
		position: absolute;
		bottom: -100%;
		z-index: 3;
		transition-duration: 0.5s;
	}

	.HoverBox:hover::after {
		content: "";
		bottom: 0;
		transition-duration: 0.5s;
	}

	.brownBox {
		width: 89.98%;
		padding: 0 5%;
		background-color: #bb874d;
		font-size: 14px;
		line-height: 24px;
		color: #fff;
		height: 0;
		overflow: hidden;
		transition-duration:0.5s;
	}

	.brownBox.on {
		padding: 3% 5%;
		height: auto;
		transition-duration:0.5s;
	}
	[class^="cursor"]{
		opacity:0;
		height:0;
	}
	[class^="cursor"].on{
		opacity:1;
		height:auto;
		transition-duration: 0.7s;
	}

	/*Hover E*/
	.circleBox{
		margin-top:30px;
		float: left;
		width: 33%;
		height: 300px;
		text-align: center;
	}
	.cirCle{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: 5px solid #bb874d;
		margin: 30px auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:16px;
	}
	.circleBox:nth-child(2) .cirCle, .circleBox:nth-child(4) .cirCle{
		width: 108px;
		height: 108px;
		border-radius: 50%;
		border: 1px solid #bb874d !important;
	}
	.text{
		text-align: left;
		font-size:14px;
		line-height: 24px;
		width: 150px;
		margin: 20px auto 0;
	}


}

@media (max-width: 767px) {
	.BigFont {
		font-size: 40px;
		    line-height: 54px;
	}

	.AreaTop {
		margin-top:120px;
		/* margin-left:60px; */
		/* height: 50%;
		display: flex;
		align-items: center; */
	}

	.leftText {
		/* float: left; */
	}

	.rightText {
		color: #fff;
		line-height: 28px;
		font-size: 12px;
	}

	.secBg1 .wrap {
		position: relative;
		height: 100%;
		overflow: hidden;
	}

	.secFoot {
		width: 100%;
		bottom: 0;
	}

	.secFoot [class^="img"] {
		float: left;
	}

	[class^="img"] {
		display:none;
	}
/*
	.img1 {
		bottom: 40%;
		left: 0%;
	}

	.img2 {
		bottom: 10%;
		left: 15%;
	}

	.img3 {
		bottom: 30%;
		left: 30%;
	}

	.img4 {
		bottom: 30%;
		left: 58%;
	}

	.img5 {
		bottom: 50%;
		left: 70%;
	}

	.img6 {
		bottom: 30%;
		left: 83%;
	} */

	.graphArea {
		display: none;
		/* width: 100%;
		height: 400px;
		position: relative;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center; */
	}

	.grap {
		width: 100%;
		height: 100%;
	}

	.grap [class^="area"] {
		width: 6.25%;
		height: 100%;
		float: left;
		position: relative;
	}

	.grap [class^="area"] .dot {
		width: 6px;
		border-radius: 6px;
		height: 6px;
		background-color: white;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -3px;
	}

	.year {
		position: absolute;
		bottom: -20px;
		left: 50%;
		margin-left: -16px;
		color: #fff;
	}

	.graphArea [class^="graphHeight"] {
		position: absolute;
		bottom: 0;
		height: 0;
		width: 100%;
		/*		overflow: hidden;*/
		transition-duration: 0.5s;
	}

	.graphArea.on .graphHeight1 {
		height: 60px;
	}

	.graphArea.on .graphHeight2 {
		height: 90px;
	}

	.graphArea.on .graphHeight3 {
		height: 120px;
	}

	.graphArea.on .graphHeight4 {
		height: 80%;
	}

	.grap [class^="number"] {
		border-radius: 50%;
		background: #919191;
		z-index: 1;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;

		position: absolute;
		left: 50%;
		margin-left: -20px;
	}

	.grap .num {
		width: 30px;
		height: 30px;
		font-size: 18px;
		color: #000;
		line-height: 30px;
		text-align: center;
		border-radius: 50%;
		background: #fff;
		box-shadow: 7px 5px 10px -4px;
		z-index: 1;
		margin: 0 auto;
	}

	.bar {
		height: 100%;
		width: 3px;
		background-color: #919191;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.grap .area16 [class^="number"] {
		width: 80px;
		height: 80px;
		left: 50%;
		margin-left: -40px;
		background: #bb874d;
	}

	.grap .area16 [class^="number"]::before {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 3s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 [class^="number"]::after {
		-webkit-animation: scene infinite 2.4s ease-out;
		-moz-animation: scene infinite 2.4s ease-out;
		animation: scene infinite 2.4s ease-out;
		animation-delay: 2.2s;
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 100%;
		background: #bb874d;
		opacity: 1;
		content: '';
	}

	.grap .area16 .num {
		width: 60px;
		height: 60px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #bb874d;
	}

	.grap .area16 .bar {
		height: 100%;
		width: 3px;
		background-color: #bb874d;
		position: absolute;
		left: 50%;
		margin-left: -1.5px;
	}

	.area4 .Arrow {
		position: absolute;
		width: 0px;
		bottom: 170px;
		    transform: rotate(-29deg);
		transition-duration: 0.8s;
	}

	.area4 .Arrow.on {
    width: 35vh;
    transition-duration: 0.8s;
	}

	.area4 .Arrow img {
		width: 100%;
	}

	.smallText {
		font-size: 14px;
	}

	[class^="lineGraph"] {
		width: 100%;
		border: 1px solid rgba(255, 255, 255, 0.1);
		position: absolute;
		left: 0;
	}

	.lineGraph1 {
		bottom: 0.5%;
	}

	.lineGraph2 {
		bottom: 14.5%;
	}

	.lineGraph3 {
		bottom: 28.5%;
	}

	.lineGraph4 {
		bottom: 42.5%;
	}

	.lineGraph5 {
		bottom: 56.5%;
	}

	.lineGraph6 {
		bottom: 70.5%;
	}

	.lineGraph7 {
		bottom: 84.5%;
	}

	/*Hover S*/
	#section3 {
		background-color: #272727;
	}

	.HoverBox {
		border: 1px solid #bb874d;
    border-right: 0;
    width: 49%;
    float: left;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 16px;
    text-align: center;
    line-height: 20px;
    margin-top: 50px;
    position: relative;
    overflow: hidden;
}
	.HoverBox:nth-child(n+3) {
		margin-top:0;
	}
	.HoverBox:nth-child(2n) {
		border-right: 1px solid #bb874d;
	}
	.HoverBox:last-child {
		border-right: 1px solid #bb874d;

	}
	.brownBox {
		margin-bottom: 50px;
	}
	.HoverBox::before {
		content: "";
		position: absolute;
		z-index: 0;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(185, 137, 83, 0.17);
		-webkit-transform: scaleY(0);
		transform: scaleY(0);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transition-property: transform;
		transition-property: transform;
		-webkit-transition-duration: 0.5s;
		transition-duration: 0.5s;
		-webkit-transition-timing-function: ease-out;
		transition-timing-function: ease-out;
	}

	.HoverBox:hover::before {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
		transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
	}

	.HoverBox::after {
		content: "";
		width: 0px;
		height: 0px;
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 20px solid rgba(185, 137, 83, 1);
		position: absolute;
		bottom: -100%;
		z-index: 3;
		transition-duration: 0.5s;
		left:50%;
		margin-left:-10px;
	}

	.HoverBox:hover::after {
		content: "";
		bottom: 0;
		transition-duration: 0.5s;
	}

	.brownBox {
		width: 89.98%;
		padding: 0 5%;
		background-color: #bb874d;
		font-size: 14px;
		line-height: 24px;
		color: #fff;
		height: 0;
		overflow: hidden;
		transition-duration:0.5s;
	}

	.brownBox.on {
		padding: 3% 5%;
		height: auto;
		transition-duration:0.5s;
	}
	[class^="cursor"]{
		opacity:0;
		height:0;
	}
	[class^="cursor"].on{
		opacity:1;
		height:auto;
		transition-duration: 0.7s;
	}

	/*Hover E*/
	.circleBox{
		float: left;
    width: 100%;
    text-align: center;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.cirCle{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: 5px solid #bb874d;
		margin: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size:16px;
		float: left;
	}
	.circleBox:nth-child(2) .cirCle, .circleBox:nth-child(4) .cirCle{
		width: 108px;
		height: 108px;
		border-radius: 50%;
		border: 1px solid #bb874d !important;
	}
	.text{
		text-align: left;
		font-size:14px;
		line-height: 24px;
		width: 150px;
		/* margin: 20px auto 0; */
	}

	.fp-section,
	.fp-slide,
	.fp-tableCell {
			height: auto !important;
	}
	.fp-tableCell {
			padding: 50px 0;
	}
}
.hspeed1 {
  animation-duration: 0.5s !important;
  -webkit-animation-duration: 0.5s !important;
}

.hspeed2 {
  animation-duration: 0.6s !important;
  -webkit-animation-duration: 0.6s !important;
}

.hspeed3 {
  animation-duration: 0.8s !important;
  -webkit-animation-duration: 0.8s !important;
}

.hspeed4 {
  animation-duration: 1s !important;
  -webkit-animation-duration: 1s !important;
}

.hspeed5 {
  animation-duration: 1.2s !important;
  -webkit-animation-duration: 1.2s !important;
}
.hspeed6 {
  animation-duration: 1.4s !important;
  -webkit-animation-duration: 1.4s !important;
}