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

.processDiv{
	padding:80px 0 30px 0;
	}
.processDiv h3{
font-weight:bold;
	font-size:3.3em;
line-height:1.2;
text-align:left !important;
}
.processDiv h4{
margin:0;
padding:0;
font-size:1.2em;
line-height:1.1;
text-align:left !important;}

ul.processArea{
	/*background: url(../process/images/process.jpg) no-repeat top left;*/
	padding: 50px 0 100px 0;
	width: 100%;
	min-height: 100px;
	position: relative;
}

ul li {
list-style-type:none;
}

ul.processArea li{
position:absolute;
min-width:310px;}


ul.processArea li img{
display:none;
width:100%;
padding-bottom:20px;
}

ul.processArea li.step1{
left:20px;
top:-20px;}

ul.processArea li.step2{
left:20px;
top: 150px;}

ul.processArea li.step3{
left:20px;
top: 320px;}

ul.processArea li.step4{
left:20px;
top: 490px;}

ul.processArea li.step5{
left:20px;
top: 660px;}

ul.processArea li.step6{
left:20px;
top: 830px;}

ul.processArea li.step7{
left:20px;
top: 1000px;}

ul.processArea li.step8{
left:20px;
top: 1170px;}

ul.processArea li.step9{
left:20px;
top: 1340px;}

ul.processArea li.step10{
left:20px;
top: 1510px;}

ul.processArea li .colorBox{
overflow:hidden;
float:left;
font-weight:bold;
width:40px;
height:40px;
line-height:1.2;
text-align:center;
background:#69F;
font-size:30px;}

ul.processArea li .colorBox span{
font-size:11px;
padding-top:20px;
display:block;}
ul.processArea li h5{
text-align:left;
font-size:20px;
font-weight:none;
width:230px;
float:left;
/* 標題的位置 */
margin:-5px 0px;
}
ul.processArea li h5:after{
display:block;
width:100%;
height:14px;
line-height:14px;
overflow:hidden;
font-size:11px;

height:14px;
/* content:"WEBSITE PROCESS"; */
content:"";
background:url(./line.jpg) no-repeat top center;}
ul.processArea li p.note{
padding-top:5px;
font-size:18px;
color:#656565;}


@media screen and (max-width:1446px){
.processDiv {
    padding: 80px 0 30px 0;
}
ul.processArea{
overflow:hidden;
width:100%;
padding: 50px 0 50px 0;
	background:none;
	min-height:auto;
}

/*
ul.processArea li div.border{
border:1px solid #D4D4D4;
height:100%;
padding:20px 10px;
-webkit-box-shadow: 1px 1px 2px rgba(200,200,200,0.30);
	box-shadow: 1px 1px 2px rgba(200,200,200,0.30);}
*/
ul.processArea li img{
display:block;

}


ul.processArea li{
top:auto !important;
left:auto !important;
position:relative;
min-width:31%;
width:31%;
height:430px;
margin:0px 1% 60px 1%;
float:left;


}

}



@media screen and (max-width:1115px){


ul.processArea li{
min-width:48%;
width:48%;
height:500px;
margin:0px 1% 60px 1%;

}

}

@media screen and (max-width:779px){


ul.processArea li{
float:none;
min-width:100%;
width:100%;
height:auto;
margin:0px 0 60px 0;

}

}