﻿.clsMainBox{
	height: 478px;
	background: #032240 url(../images/rivhit/bg.png) no-repeat 54% 112px;
}

header{
	height:171px;
	padding:38px 0 0 0;
	background:transparent;
}

header img:nth-child(1){
	position:relative;
	margin-right:-48px;
	margin-left:20px;
}

header img{
	margin-left:35px;
}

/*********************************************/
.clsMainText{
	font-size:0;
	line-height:0;
}

.clsMainText .clsCol1{
	color: #ffffff;
	font-size: 24px;
	font-weight: 500;
	line-height: 28px;
		
	position:relative;
	display:inline-block;
	vertical-align:top;
	height:196px;
	width:270px;
	padding:;
}

.clsMainText .clsCol1:before{
	content:"";
	position:absolute;
	left:0;
	top:7px;
	height:200px;
	width:271px;
	border-left:1px solid #fcca44;
}


.clsMainText .clsCol1 h1{
	color: #ffffff;
	font-size: 60px;
	line-height: 48px;
	font-weight: 400;
	margin:0 0 10px 0;
}

.clsMainText strong{
	color: #fcca44;
	font-weight:bold;
}

.clsMainBox .clsCol2{
	font-size: 24px;
	line-height: 30px;
	color: #ffffff;
	font-weight: 400;

	display:inline-block;
	vertical-align:top;
	height: 196px;
	width:640px;
	padding:0 20px 0 0; 
}

/************************************************/
.clsJointText{
	font-size: 22px;
	font-weight: 400;
	line-height: 30px;

	height: 162px;
	padding:20px 0 0 0;
	background-color: #fcca44;
}

.clsJointText h2{
	color: #032240;
	line-height: 26px;
	font-size: 36px;
	font-weight: 700;
}

.clsJointText strong{
	font-weight: 700;
}

.clsJointText .clsPrice{
	color: #032240;
	font-size: 20px;
	font-weight: 500;
	line-height: 22px;
	text-align:center;

	position:absolute;
	left:190px;
	top:-80px;
	z-index:1;
	width: 144px;
	height: 144px;
	padding:45px 0 0 0;
	transform:rotate(-10deg);
	border-radius:100%;
	background-color: #53b165;
	transition:all 0.5s ease;
	opacity:0;
}


.clsJointText .clsPrice.animate{
	transform:rotate(10deg);
	opacity:1;
}

.clsJointText .clsPrice strong{
	color: #ffffff;
	font-size: 52px;
	direction:ltr;
}

.clsJointText .clsPrice strong span{
	color: #ffffff;
	font-size: 28px;
}

.clsJointText .clsMan{
	position:absolute;
	left:50px;
	bottom:-30px;
	z-index:2;
	width: 233px;
	height: 214px;
	background:url(../images/rivhit/man.png) no-repeat center;
}

.clsCredits a:link, .clsCredits a:visited, .clsCredits a:active, .clsCredits a:hover {
    display:inline-block;
	vertical-align:top;
	padding:0 13px 0 10px;
	background:url(../images/rivhit/arrow1.png) no-repeat right 4px;
}


/**********************************************************/
@media only screen and (max-width : 768px) {
	.clsMainBox{
		height:auto;
		background: #032240;
	}

	header{
		height:auto;
		padding:20px 20px 0 5px;
		background:transparent;
	}

	header img:nth-child(1){
		height:30px;
		margin-right:0;
		margin-left:5px;
	}

	header img:nth-child(2){
		height:20px;
	}

	header img:nth-child(3){
		height:30px;
	}

	header img{
		margin-left:10px;
	}

	/*********************************************/
	.clsMainText{
		font-size:0;
		line-height:0;
	}

	.clsMainText .clsCol1{
		display:block;
		height:auto;
		width:auto;
		padding:20px 20px 20px 20px;
	}

	.clsMainText .clsCol1:before{
		display:none;
	}

	.clsMainText .clsCol1 h1{
		font-size: 48px;
		line-height: 40px;
		margin:0 0 5px 0;
	}

	.clsMainBox .clsCol2{
		font-size:18px;
		line-height:24px;
		
		display:block;
		height:auto;
		width:auto;
		padding:0 20px 20px 20px; 
	}

	/************************************************/
	.clsJointText{
		font-size:18px;
		line-height:24px;

		height:auto;
		padding:40px 20px 20px 120px;
	}

	.clsJointText .clsPageAlign{
	}

	.clsJointText h2{
		color: #032240;
		line-height: 26px;
		font-size: 36px;
		font-weight: 700;
	}

	.clsJointText strong{
		font-weight: 700;
	}

	.clsJointText .clsPrice{
		left:-100px;
		top:-50px;
		width:100px;
		height:100px;

		font-size: 16px;
		line-height: 22px;
		letter-spacing:-1px;

		padding:30px 0 0 0;
	}

	.clsJointText .clsPrice strong{
		font-size: 30px;
		letter-spacing:0;
	}

	.clsJointText .clsPrice.animate{
		transform:rotate(-10deg);
	}

	.clsJointText .clsMan{
		position:absolute;
		left:-100px;
		bottom:-30px;
		width:133px;
		height:134px;
		background:url(../images/rivhit/man.png) no-repeat left bottom;
		background-size:contain;
	}



}