@media (max-width: 576px) {
	.container{
		width: 100%;
	}
	.flex_content{
		display: flex;
		flex-wrap: wrap
	}
	.l_area {
    width: 100%;
	}
	.l_area>ol,.l_area>ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
	margin: 0;
	padding: 0;
	}
	.l_area li:first-child {
    margin-bottom: -6px;
    margin-top: -4px;
    width: 100%;
	}
	.l_area li {
    width: calc(50% - 10px);
    /* height: 36px; */
    list-style: none;
    margin: 5px;
	}
	.l_area li img{
    width: 100%;
	}
	.r_area{
		width: 100%;
	}
	
}
/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
	.container{
		width: 540px;
	}
	.flex_content{
		flex-wrap: wrap
	}
	
	.bn_main{
		background: url(../../images/bn_RWD_small.jpg) no-repeat;
	}
	.l_area {
    width: 100%;
	}
	.l_area>ol,.l_area>ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
	padding: 0;
	}
	.l_area li:first-child {
    margin-bottom: -6px;
    margin-top: -4px;
    width: 100%;
	}
	.l_area li {
    width: calc(50% - 10px);
    /* height: 36px; */
    list-style: none;
    margin: 5px;
	}
	
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
	.container{
		width: 720px;
	}
	.flex_content{
		flex-wrap: nowrap
	}
	.l_area{
	width:194px;
	height:auto;
	float:left;
	margin:0 30px 0 10px;
}
.l_area li{
	width:194px;
	height:36px;
	list-style:none;
	margin:0 0 10px -30px;
}
.l_area li:first-child {
	margin-bottom:-6px;
	margin-top:-4px;
}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	.container{
		width: 960px;
	}
	.l_area{
	width:194px;
	height:auto;
	float:left;
	margin:0 30px 0 10px;
}
.l_area li{
	width:194px;
	height:36px;
	list-style:none;
	margin:0 0 10px -30px;
}
.l_area li:first-child {
	margin-bottom:-6px;
	margin-top:-4px;
}

.r_area_two{
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -o-flex;
	display: flex;
}
.r_area_two .col-6{
	width: 50%;
	padding: 10px;
}
}

/*Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
	.container{
		width: 1140px;
	}
	.l_area{
	width:194px;
	height:auto;
	float:left;
	margin:0 30px 0 10px;
}
.l_area li{
	width:194px;
	height:36px;
	list-style:none;
	margin:0 0 10px -30px;
}
.l_area li:first-child {
	margin-bottom:-6px;
	margin-top:-4px;
}
}
