/*--------------------------------------------------------------
#category-top-area
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#category-top-area {
		background: url("images/main_image.png") bottom center no-repeat;
		background-size: cover;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	

}

/*--------------------------------------------------------------
#bus_nav
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#bus_nav {
		margin: 0;
		padding: 0 0 20px 0;
	}
	
	#bus_nav ul {
		margin: 0;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
	}
	
	#bus_nav li {
		margin: 0;
		padding: 0;
		width: 33.3%;
	}
	
	#bus_nav dl {
		margin: 0;
		padding: 10px 0 5px 0;
		transition: 0.3s;
	}
	
	#bus_nav dl:hover {
		background-color: rgba(242,248,255,1.00);
	}
	
	#bus_nav li:nth-child(1) dl {
		border-top: 1px solid #567EA5;
		border-bottom: 1px solid #567EA5;
		border-left: 1px solid #567EA5;
		border-right: none;
		text-align: center;
		color: #567EA5;
	}
	
	#bus_nav li:nth-child(2) dl {
		border: 1px solid #45A1C3;
		text-align: center;
		color: #45A1C3;
	}
	
	#bus_nav li:nth-child(3) dl {
		border-top: 1px solid #457FC3;
		border-bottom: 1px solid #457FC3;
		border-left: none;
		border-right: 1px solid #457FC3;
		text-align: center;
		color: #457FC3;
	}
	
	#bus_nav dt {
		margin: 0 0 5px 0;
		padding: 0;
		font-size: 14px;
		font-weight: bold;
	}
	
	#bus_nav dt span {
		margin: 5px 0 0 0;
		padding: 0;
		font-size: 10px;
		font-family: 'Outfit', sans-serif;
		font-weight: 300;
		display: block;
	}
	
	#bus_nav dd {
		margin: 0;
		padding: 0;
		font-size: 13px;
	}
	
	#bus_nav a:link,
	#bus_nav a:visited {
		text-decoration: none;
	}
	
	#bus_nav a:hover,
	#bus_nav a:active,
	#bus_nav a:focus {
		text-decoration: none;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#bus_nav {
		margin: 0;
		padding: 0 0 50px 0;
	}
	
	#bus_nav ul {
		margin: 0 10%;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
	}
	
	#bus_nav li {
		margin: 0;
		padding: 0;
		width: 33.3%;
	}
	
	#bus_nav dl {
		margin: 0 15px;
		padding: 2vw 0 1vw 0;
		transition: 0.3s;
	}
	
	#bus_nav dl:hover {
		background-color: rgba(242,248,255,1.00);
	}
	
	#bus_nav li:nth-child(1) dl {
		border: 1px solid #567EA5;
		text-align: center;
		color: #567EA5;
	}
	
	#bus_nav li:nth-child(2) dl {
		border: 1px solid #45A1C3;
		text-align: center;
		color: #45A1C3;
	}
	
	#bus_nav li:nth-child(3) dl {
		border: 1px solid #457FC3;
		text-align: center;
		color: #457FC3;
	}
	
	#bus_nav dt {
		margin: 0 0 10px 0;
		padding: 0;
		font-size: 17px;
		font-weight: bold;
	}
	
	#bus_nav dt span {
		margin: 0;
		padding: 0;
		font-size: 13px;
		font-family: 'Outfit', sans-serif;
		font-weight: 300;
		display: block;
	}

}


/*--------------------------------------------------------------
.grade
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	dl.grade {
		margin: 0 0 50px 0;
		padding: 20px 0;
		text-align: center;
		color: #FFF;
	}
	
	#large {
		background-color: #567EA5;
	}
	
	#midium {
		background-color: #45A1C3;
	}
	
	#micro {
		background-color: #457FC3;
	}
	
	dl.grade dt {
		margin: 0 auto 10px auto;
		padding: 0;
		width: 120px
	}
	
	dl.grade dd h3 {
		margin: 0;
		padding: 0;
		font-size: 20px;
		font-weight: bold;
	}
	
	dl.grade dd span {
		margin: 10px 0 0 0;
		padding: 0;
		display: block;
		font-size: 13px;
		font-family: 'Outfit', sans-serif;
		font-weight: 300;
	}
	

}

/* Small than tablet */
@media (min-width: 768px) {
	
	
	
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	dl.grade {
		margin: 0 0 50px 0;
		padding: 30px 0;
		text-align: center;
		color: #FFF;
	}
	
	dl.grade dt {
		margin: 0 auto 20px auto;
		padding: 0;
		width: 135px
	}
	
	dl.grade dd h3 {
		margin: 0;
		padding: 0;
		font-size: 25px;
		font-weight: bold;
	}
	
	dl.grade dd span {
		margin: 10px 0 0 0;
		padding: 0;
		display: block;
		font-size: 15px;
		font-family: 'Outfit', sans-serif;
		font-weight: 300;
	}

}

/*--------------------------------------------------------------
#outline
--------------------------------------------------------------*/

/* mobile */
@media (min-width: 300px) {
	
	#outline_l,
	#outline_m {
		margin: 0 0 50px 0;
		padding: 0;
	}
	
	#outline_s {
		margin: 0 0 100px 0;
		padding: 0;
	}
	
	.side {
		margin: 0 5% 30px 5%;
		padding: 0;
		width: auto;
	}
	
	#outline_l ul,
	#outline_m ul,
	#outline_s ul {
		margin: 0 5%;
		padding: 0;
		width: auto;
	}
	
	#outline_l li,
	#outline_m li,
	#outline_s li {
		margin: 0;
		padding: 0;
	}
	
	#outline_l li:first-child dl,
	#outline_m li:first-child dl,
	#outline_s li:first-child dl {
		margin: 0 0 30px 0;
		padding: 0;
		width: auto;
		box-sizing: border-box;
	}
	
	#outline_l li:first-child dl {
		background: url("images/grade_large_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 120px 100%;
		background-size: 120px 100%;
	}
	
	#outline_m li:first-child dl {
		background: url("images/grade_midium_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 120px 100%;
		background-size: 120px 100%;
	}
	
	#outline_s li:first-child dl {
		background: url("images/grade_micro_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 120px 100%;
		background-size: 120px 100%;
	}
	
	#outline_l li:first-child dt,
	#outline_m li:first-child dt,
	#outline_s li:first-child dt {
		margin: 0;
		padding: 20px;
		float: left;
		width: 120px;
		font-size: 14px;
		color: #567EA5;
		text-align: center;
	}
	
	#outline_l li:first-child dd,
	#outline_m li:first-child dd,
	#outline_s li:first-child dd {
		margin: 0;
		padding: 20px 20px 20px 130px;
		font-size: 14px;
		border-bottom: 5px solid #FFF;
		line-height: 1.8;
	}
	
	#outline_l li:first-child dd span,
	#outline_m li:first-child dd span,
	#outline_s li:first-child dd span {
		margin: 0;
		padding: 0;
		font-size: 13px;
		display: block;
	}
	
	#outline_l li:last-child dl,
	#outline_m li:last-child dl,
	#outline_s li:last-child dl {
		margin: 0 10%;
		padding: 0;
	}
	
	#outline_l li:last-child dt,
	#outline_m li:last-child dt,
	#outline_s li:last-child dt {
		margin: 0 0 10px 0;
		padding: 0;
	}
	
	#outline_l li:last-child dd,
	#outline_m li:last-child dd,
	#outline_s li:last-child dd {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 13px;
	}
	
	#outline_s p {
		margin: 50px 10% 0 10%;
		padding: 0;
		font-size: 13px;
		width: auto;
		line-height: 1.8;
	}

}

/* Small than tablet */
@media (min-width: 768px) {
	
	#outline_s {
		margin: 0 0 100px 0;
		padding: 0;
	}
	
	#outline_l li:last-child dl,
	#outline_m li:last-child dl,
	#outline_s li:last-child dl {
		margin: 0 20%;
		padding: 0;
	}
}


/* Larger than tablet */
@media (min-width: 992px) {
	
	#outline_l,
	#outline_m,
	#outline_s {
		margin: 0 0 100px 0;
		padding: 0;
	}
	
	.side {
		margin: 0 auto 30px auto;
		padding: 0;
		width: 800px;
	}
	
	#outline_l ul,
	#outline_m ul,
	#outline_s ul {
		margin: 0 auto;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: center;
		justify-content: center;
		width: 800px;
	}
	
	#outline_l li:first-child dl,
	#outline_m li:first-child dl,
	#outline_s li:first-child dl {
		margin: 0;
		padding: 0 50px 0 0;
		width: 550px;
		box-sizing: border-box;
	}
	
	#outline_l li:first-child dl {
		background: url("images/grade_large_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 150px 100%;
		background-size: 150px 100%;
	}
	
	#outline_m li:first-child dl {
		background: url("images/grade_midium_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 150px 100%;
		background-size: 150px 100%;
	}
	
	#outline_s li:first-child dl {
		background: url("images/grade_micro_bus_bg.png") top left repeat-y ;
		-webkit-background-size: 150px 100%;
		background-size: 150px 100%;
	}
	
	#outline_l li:first-child dt,
	#outline_m li:first-child dt,
	#outline_s li:first-child dt {
		margin: 0;
		padding: 20px;
		float: left;
		width: 150px;
		font-size: 15px;
		color: #567EA5;
		text-align: center;
	}
	
	#outline_l li:first-child dd,
	#outline_m li:first-child dd,
	#outline_s li:first-child dd {
		margin: 0;
		padding: 20px 20px 20px 170px;
		font-size: 15px;
		border-bottom: 5px solid #FFF;
		line-height: 1.8;
	}
	
	#outline_l li:first-child dd span,
	#outline_m li:first-child dd span,
	#outline_s li:first-child dd span {
		margin: 0;
		padding: 0;
		font-size: 13px;
		display: block;
	}
	
	#outline_l li:last-child dl,
	#outline_m li:last-child dl,
	#outline_s li:last-child dl {
		margin: 0;
		padding: 0;
	}
	
	#outline_l li:last-child dt,
	#outline_m li:last-child dt,
	#outline_s li:last-child dt {
		margin: 0 0 10px 0;
		padding: 0;
	}
	
	#outline_l li:last-child dd,
	#outline_m li:last-child dd,
	#outline_s li:last-child dd {
		margin: 0 0 20px 0;
		padding: 0;
		font-size: 13px;
	}
	
	#outline_s p {
		margin: 50px auto 0 auto;
		padding: 0;
		font-size: 15px;
		width: 800px;
		line-height: 1.8;
	}

}