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

.border{
	border:#CCC solid 1px;
}

body{
	width:80%;
	margin:auto;
	background-image:url(../image/bg.png);
}

h1{
	color:#FFF;
	font-size:11px;
	font-weight:normal;
	background-color:#ff4d4d;
	padding-left:1em;
}

h2{
	margin-bottom:2em;
	padding:0.25em 0;
	background-color:#ff4d4d;
}


h2 {
  position: relative;
  margin-left: -22px; /* 15px padding + 7px border ribbon shadow*/
  margin-right: -22px;
  padding: 5px;
  /*background: #e5e5e5;*/
  background: linear-gradient(#ffe1e1, #ff4d4d);
  box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset;
  text-shadow: 0 1px 0 #fff;
  margin-bottom:30px;
}
 
/*h2:before,
h2:after {
  position: absolute;
  left: 0;
  bottom: -6px;
  content:'';
  border-top: 6px solid #ff4d4d;
  border-left: 6px solid transparent;
}
*/ 
/*h2:before {
  border-top: 6px solid #ff4d4d;
  border-right: 6px solid transparent;
  border-left: none;
  left: auto;
  right: 0;
  bottom: -6px;
}
*/
#pointTitle{
	padding-top:1em;
}

header{
	margin:auto;
	margin-bottom:50px;
}

img.bg {
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
}

.w100{
	width:100%;
}

.w90{
	width:90%;
	margin:auto;
}

.w70{
	width:70%;
}

.w45{
	width:40%;
}

.w30{
	width:30%;
}

.w25{
	width:25%;
}

.w18{
	width:18%;
}

.w15{
	width:15%;
}

.w5{
	width:5%;
}

.title{
	display:block;
	margin-left:auto;
	margin-right:auto;
	/*margin-top:50px;*/
}

.fl{
	float:left;
}

.flowImage{
	margin-top:2em;
}

.flow{
	text-align:center;
	font-size:90%;
	color:#51a2c1;
	font-weight:bold;
	text-shadow: 1px 1px 1px #fff;
}

/*.point{
	text-align:center;
	font-size:100%;
	color:#ff4c4c;
	font-weight:bold;
}*/

.point {
	text-align:center;
    position:relative;
	padding:9px;
	font-weight: bold;
	font-size: 18px;
	background-color: #d7eaf1;
	color: #51a2c1;
	text-shadow: 1px 1px 1px #fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	margin-bottom:10px;
}
 
.point:before {
    content:''; 
	height:0; 
	width:0; 
	display:block; 
	border:13px transparent solid; 
	border-right-width:0; 
	border-left-color:#d7eaf1; 
	position:absolute; 
	top:30px; 
	left:15px;
	transform:rotate(-270deg);
}

#flowCntents{
	width:95%;
	margin:auto;
	margin-left:6.5%;
}

#pointContents{
	width:95%;
	margin:auto;
}

#flow1{
	background-image:url(../image/flow1-2.png);
	background-repeat:no-repeat;
	background-position:right;
}

#flow2{
	background-image:url(../image/flow2-2.png);
	background-repeat:no-repeat;
	background-position:right;
}

#flow3{
	background-image:url(../image/flow3-2.png);
	background-repeat:no-repeat;
	background-position:right;
}

#flow4{
	background-image:url(../image/flow4-2.png);
	background-repeat:no-repeat;
	background-position:right;
}

.ml{
	margin-left:1%;
}

.text{
	color:#666;
	font-size:80%;
	margin-bottom:30px;
}

.pointImage{
	margin-bottom:1em;
}

#point1,#point3{
	margin-right:20%;
}

#point{
	margin-bottom:20px;
}

footer{
	margin-top:80px;
}