#readBox ul {
margin: 10px 0 0;
padding: 0;
list-style: none;
}

#readBox ul li {
font-size: 16px;
margin-top: 10px;
padding: 12px 20px;
background: #DFE5E7;
letter-spacing: .4px;
}

#readBox ul li strong {
font-size: 18px;
color: #044E87;
}

#readBox ul li::before {
display: inline-block;
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #000;
font-size: 22px;
margin-right: 10px;
}

.mfcFlowList {
padding: 20px 0 0;
margin: 0;
list-style: none;
}

.mfcFlowList li {
position: relative;
margin: 0;
padding-bottom: 10px;
}

.mfcFlowList li:not(:first-child) {
margin-top: 30px;
padding-top: 40px;
border-top: 1px solid #CCC;
}

.mfcFlowList li:not(:last-child)::after {
position: absolute;
content: "\f107";
font-family: "Font Awesome 5 Free";
z-index: 2;
color: #000000;
font-weight: 900;
left: 47%;
bottom: -50px;
font-size: 42px;
line-height: 0;
padding: 20px 0;
}

.mfcFlowList li .flowImg {
width: 100%;
height: auto;
}

.mfcFlowList .flowImg img {
width: 100%;
height: auto;
}

.mfcFlowList li .flowTxtBox p {
letter-spacing: .2px;
}

.flowTitBg {
display: inline-block;
background: rgba(2,53,92,0.90);
position: relative;
margin-left: -33px;
margin-right: -33px;
padding: 5px 50px 5px 34px;
line-height: 1.3;
z-index: 2;
}

.flowTitBg::after {
position: absolute;
content: '';
right: -3px;
top: -7px;
width: 0;
height: 0;
border: none;
border-left: solid 40px transparent;
border-bottom: solid 60px white;
z-index: -1;
}

.flowTxtBox h3.flowTit {
padding: 0;
font-size: 20px;
letter-spacing: .5px;
color: #FFF;
margin: 0;
}

		@media screen and (max-width: 767px) {
		
		#readBox ul li {
		font-size: 15px;
		margin-top: 15px;
		margin-bottom: 0;
		padding: 15px 20px 25px 20px;
		}
		
		.flowTxtBox h3.flowTit {
		font-size: 18px;
		}
		
		.flowTitBg {
		margin-top: 18px;
		margin-left: -33px;
		margin-right: -33px;
		padding: 5px 36px 5px 20px;
		line-height: 1.3;
		z-index: 2;
		}
		
		.flowTxtBox {
		padding-top: 10px;
		}
		
		.flowNum {
		display: inline-block;
		vertical-align: top;
		width: auto;
		height: 56px;
		}

		
		.flowNum img {
		width: auto;
		height: 100%;;
		}
		
		.flowTitBg {
		left: 15px;
		}
		
		}


		@media screen and (min-width: 768px), print {
			
		#manufacture .mainTit {
		padding-top: 60px;
		}
		
		#readBox ul {
		margin: 10px 0 0;
		padding: 0;
		}
		
		.mfcFlowList li {
		display: flex;
		-ms-display: flex;
		align-items: center;
		-ms-align-items: center;
		}
		
		.mfcFlowList li:nth-child(2n) {
		flex-direction: row-reverse;
		-ms-flex-direction: row-reverse;
		}
		
		.mfcFlowList li .flowImg {
		width: 45%;
		}
		
		.mfcFlowList li .flowTxtBox {
		width: 55%;
		padding-left: 30px;
		}
		
		.mfcFlowList li::after {
    padding-top: 46px;
    left: 50%;
    font-size: 60px;
		}
		
		.mfcFlowList li:nth-child(2n-1) .flowTitBg {
		left: -22px;
		}

		.mfcFlowList li:nth-child(2n) .flowTitBg {
		left: 0;
		margin-left: 0;
		}
		
		.mfcFlowList li .flowTxtBox p {
		padding-top: 20px;
		}

		.mfcFlowList li:nth-child(2n) .flowTxtBox {
		padding-left: 0;
		padding-right: 30px;
		}

		.mfcFlowList li:nth-child(2n) .flowTxtBox p {
		padding-left: 30px;
		}
		
		.flowTitBg {
		width: 230px;
		}
		
		.mfcFlowList li:nth-child(2n) .flowNum {
		margin-left: 116px;
		}
	 .mfcFlowList li:nth-child(2n-1) .flowNum {
		margin-left: 61px;
		}
		
		.flowTxtBox h3.flowTit {
		letter-spacing: 0px;
		}
		
/*		.flowTitBg::after {
		border-left: solid 40px transparent;
		border-bottom: solid 60px white;
		}*/
		
		.flowNum {
		width: 150px;
		height: auto;
		}
		
		.flowNum img {
		width: 100%;
		height: auto;
		}
		
		}