@charset "UTF-8";

.top_main_row,
.top_main_row *{
	box-sizing: border-box;
}

.top_main_row{
	display: flex;
	height: 100vh;
	font-size: 14px;
	min-height: 480px;
}

.top_main_col{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
	width: 50%;
}

.top_main_col.type_hardshake{
	background-color: #062042;
}

.top_main_col.type_build{
	background-color: #4C5C69;
}

.top_main_obj{
	width: 100%;
	max-width: 250px;
}

.top_main_vision{
	display: flex;
	justify-content: center;
	margin: 0 0 60px 0;
}

.top_main_logo{
	line-height: 0;
}

.top_main_btn_row{
	display: flex;
	justify-content: center;
}

.top_main_btn_wrap{
  position: relative;
	background-color: #ffffff;
	 position: relative;
  display: flex;
  flex-direction: column;
	width: 100%;
	max-width: 224px;
}

.top_main_btn{
  position: relative;
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none !important;
  cursor: pointer;
	height: 38px;
	border: 1px solid #fff;
	letter-spacing: 0.12em;
	line-height: 1;
	font-family: 'Roboto', sans-serif;
	transition: background-color 0.4s ease 0s,color 0.4s ease 0s;
}

.top_main_col.type_hardshake .top_main_btn{
	border-color: #495C74;
	color: #495C74;
	background-color: #062042;
}

.normal .top_main_col.type_hardshake .top_main_btn:hover{
	color: #062042;
	background-color:  #495C74;
}

.top_main_col.type_build .top_main_btn{
	border-color: #71889A;
	color: #71889A;
	background-color: #4C5C69;
}

.normal .top_main_col.type_build .top_main_btn:hover{
	color: #4C5C69;
	background-color:  #71889A;
}


@media screen and (max-width: 700px) {
	
	.top_main_row{
		flex-direction: column;
	}

	.top_main_col{
		width: 100%;
		height: 50%;
	}
	
	
	.top_main_vision{
		margin: 0 0 34px 0;
	}
}