@charset "utf-8";
/* CSS Document */

/* =================================================================================

   flow
 
=================================================================================== */
.flow {
	position: relative;
	background:url(/contract/images/bg_dot2.png) repeat;
	text-align:center;
	padding:0 0 5%;
	margin: 8% 0 5%;
	}

.flow-mt10 {
	margin-top: 10%;
	}

.flow .flowNumber {
	width: 8%;
	position:absolute;
	top: -40px;
	left:0;
	right:0;
	margin:auto;
	}

.flow h3 {
	font-size:1.813em;
	padding: 5% 0 0;
    margin: 0 0 .5%;
	}

.flow .flowTxt {
	width:80%;
	font-size: 1.063em;
	margin:auto;
	}

.flow .flowSub {
	width:80%;
	background:#fff;
	font-size: 1.063em;
	padding:3% 0;
	margin: 2% auto;
	}

.arrow {
	display:block;
	width: 5%;
	margin:0 auto;
	}


@media only screen and (max-width: 768px) {
.flow .flowNumber {
    top: -25px;
	}

.flow-mt10 {
    margin-top: 12%;
	}
}


@media only screen and (max-width: 480px) {
.flow {
    margin: 15% 0 8%;
	}

.flow-mt10 {
    margin-top: 26%;
	}
	
.flow h3 {
    font-size: 1.625em;
	padding: 8% 0 0;
	}

.flow .flowNumber {
    width: 16%;
    top: -28px;
	}

.flow .flowTxt {
	text-align:left;
	}

.arrow {
	width: 10%;
	}
}


@media only screen and (max-width: 320px) {
.flow .flowNumber {
    top: -21px;
	}

}