* {
	padding: 0;
	margin: 0;
}

.shell {
	width: 100%;
	margin: 0 auto;
}

.box-one, .box-two {
	width: 100%;
	margin: 0 auto;
}

.box-in {
	max-width: 900px; 
	height: auto;
	margin: 0 auto;
	padding: 1% 1%;	

	display: flex;	
}

.left, .right {
	max-width: 450px;
	width: 100%;
	margin: auto;
}

.text {
	font-size: 14px;
	font-family: Verdana, sans-serif;
	line-height: 1.4;
	text-align: left;
	letter-spacing: -1px;

	padding: 3%;
	margin: 0 2%;
}

.photo {
	max-width: 80%;
	max-height: 450px;
	height: auto;

	margin: 0 auto;
	display: block;
}

.box-two .box-in .right p.text {
	padding: 5% 2% 2% 2%;

	font-size: 16px;
}

.box-two .box-in .right ul.text {
	padding-top: 2%;
	padding-left: 6%;
}

@media only screen and (max-width: 1024px) {
	.box-in, .left, .right, .photo {
		width: auto;
	}
}

@media only screen and (max-width: 770px) {
	.box-in {
		flex-direction: column;
	}

	.left, .right {
		max-width: 100%;
		margin: 0 auto;
	}

	.text {
		padding: 1% 5%;
		margin: 0 auto;

	}

	.box-two .box-in .right {
		width: 100%;
	}

	.box-two .box-in .right p.text {
		padding: 1% 5%;
	}

	.box-two .box-in .right ul.text {
		padding: 1% 5% 5% 10%;
	}
}