/* sub-nav.css */
main {
	overflow: visible;
}
.sub_nav .btn_toggle_1 {
	background: #666666 url(/common/img/common/icon_arrow_white.png) no-repeat 95% center;
	background-size: 5px auto;
	color: #FFF;
	padding: 12px 10px;
	border-bottom: solid 1px #FFF;
	font-size: 15px;
	cursor: pointer;
	text-align: center;
}
.sub_nav .btn_toggle_1.open {
	background: #666666 url(/common/img/common/icon_arrow_white_open.png) no-repeat 95% center;
	background-size: 18px auto;
}
.sub_nav .item>span {
	display: block;
	background: #666666 url(/common/img/common/icon_arrow_white.png) no-repeat 10px center;
	background-size: 5px auto;
	color: #FFF;
	padding: 12px 10px;
	border-bottom: solid 1px #FFF;
	font-size: 13px;
	padding-left: 32px;
	cursor: pointer;
}
.sub_nav .item.open>span {
	background: #666666 url(/common/img/common/icon_arrow_white_open.png) no-repeat 8px center;
	background-size: 18px auto;
}
.sub_nav .item.open>span,
.sub_nav .item.open>div>a>span, .sub_nav .item.open>div>span {
	background-color: #84CFE8;
}
/* ADD 180305 -> */
.sub_nav .item>span.on {
	background-color: #84CFE8;
}
/* ADD 180305 <- */
.sub_nav .item>div>a:hover {
	text-decoration: none;
}
.sub_nav .item>div>a>span, .sub_nav .item>div>span {
	display: block;
	background: #666666 url(/common/img/common/icon_arrow_white.png) no-repeat 32px center;
	background-size: 5px auto;
	color: #FFF;
	padding: 12px 10px;
	border-bottom: solid 1px #FFF;
	font-size: 13px;
	padding-left: 54px;
}
.sub_nav .item>div {
	display: none;
}
.sub_nav .toggle_1 {
	display: none;
}
.sub_nav .item>div>a.selected>span {
	background: #FFF url(/common/img/common/icon_arrow_gray.png) no-repeat 32px center;
	background-size: 5px auto;
	color: #000;
}
@media screen and (min-width:800px) {
	.sub_nav .btn_toggle_1 {
		display: none;
	}
	.sub_nav .toggle_1 {
		display: block !important;
		max-width: 900px;
		margin: auto;
		font-size: 11px;
	}
	.sub_nav .toggle_1:after {
		content: "";
		display: block;
		clear: both;
	}
	.sub_nav .item {
		position: relative;
		margin: 0.5%;
		width: 19%;
		float: left;
	}
	.sub_nav .item>span {
		display: block;
		background: #ECECEC url(/common/img/common/icon_arrow2.png) no-repeat 10px center;
		color: #000;
		background-size: 6px auto;
		padding: 7px 7px 7px 20px;
		line-height: 1.2;
		cursor: pointer;
		font-size: 11px;
	}
	.sub_nav .item>span.on {
		background: #84CFE8 url(/common/img/common/icon_arrow2_white.png) no-repeat 10px center;
		background-size: 6px auto;
		color: #FFF;
	}
	.sub_nav .item.open>span.on {
		background: #84CFE8 url(/common/img/common/icon_arrow2_down_white.png) no-repeat 8px center;;
		background-size: 8px auto;
	}
	.sub_nav .item>div {
		position: absolute;
		width: 100%;
		top: 36px;
		left: 0;
		z-index: 20;
		box-sizing: border-box;
		background: #ECECEC;
	}
	.sub_nav .item>div>a>span, .sub_nav .item>div>span {
		display: block;
		background: #ECECEC url(/common/img/common/icon_arrow2.png) no-repeat 10px center;
		color: #000;
		background-size: 6px auto;
		padding: 0px 7px 7px 20px;
		line-height: 1.2;
		cursor: pointer;
		border-bottom: none;
		font-size: 11px;
	}
	.sub_nav .item>div>a>span:before, .sub_nav .item>div>span:before {
		content: "";
		display: block;
		height: 10px;
		border-top: 1px solid #ccc;
		margin-left: -13px;
	}
	.sub_nav .item>div>a>span.top:before, .sub_nav .item>div>span.top:before {
		border-top: none;
	}
	.sub_nav .item.open>span {
		background: #84CFE8 url(/common/img/common/icon_arrow2_down.png) no-repeat 8px center;;
		background-size: 8px auto;
	}
	.sub_nav .item.open>span,
	.sub_nav .item.open>div>a>span, .sub_nav .item.open>div>span {
		background-color: #ECECEC;
	}
	.sub_nav .item>div>a>span:hover, .sub_nav .item>div>span:hover {
		background-color: #84CFE8;
	}
	.sub_nav .item>div>a.selected>span {
		background: #ECECEC url(/common/img/common/icon_arrow2.png) no-repeat 10px center;
		background-size: 6px auto;
		color: #000;
	}
}