@charset "utf-8";

#subNav{
	margin-top: 100px;
}

#subNav .wrapper{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
}

#subNav .left-box{}

#subNav .left-box .breadcrumb{
	display: flex;
	flex-direction: row;
	align-items: center;
	background: transparent !important;
}

.breadcrumb>li+li:before{
	display: none !important;
}

#subNav .left-box .breadcrumb li{
	font-size: 1.125rem !important;
	font-weight: 600;
	padding: 0 20px;
	position: relative;
}

#subNav .left-box .breadcrumb li:not(.current)::after{
	content: "";
	width: 7px;
	height: 7px;
	font-size: inherit;
	font-weight: inherit;
	position: absolute;
	border-top: 2px solid var(--black);
	border-right: 2px solid var(--black);
	top: 50%; right: 0;
	transform: translateY(-50%) rotate(45deg)
}

#subNav .left-box .breadcrumb li a{
	font-size: inherit;
	font-weight: inherit;
}

#subNav .left-box .breadcrumb li a i{
	font-size: inherit;
	font-weight: inherit;
}

#subNav .left-box .breadcrumb li.home{
	padding-left: 0;
}

#subNav .left-box .breadcrumb li.current{
	color: var(--blue);
	padding-right: 0;
}

#subNav .left-box .tit{
	font-size: 4.5rem !important;
}



@media screen and (max-width: 1100px){
	#subNav{
		margin-top: 80px;
	}

	#subNav .left-box .tit{
		font-size: 4rem !important;
	}
}

@media screen and (max-width: 900px){
	#subNav{
		margin-top: 70px;
	}

	#subNav .left-box .breadcrumb li{
		font-size: 1.0625rem !important;
		padding: 0 17px;
	}

	#subNav .left-box .tit{
		font-size: 3.5625rem !important;
	}

	#subNav.cs .right-box figure{
		width: 180px;
	}
}

@media screen and (max-width: 767px){
	#subNav{
		margin-top: 60px;
	}
	
	#subNav .left-box .breadcrumb li{
		font-size: 1rem !important;
		padding: 0 15px;
	}

	#subNav .left-box .breadcrumb li:not(.current)::after{
		width: 6px; height: 6px;
	}

	#subNav .left-box .tit{
		font-size: 2.5rem !important;
	}

	#subNav .right-box figure{
		/* width: 100px; */
		display: none;
	}
}

@media screen and (max-width: 320px){
	#subNav{
		margin-top: 50px;
	}
	

	#subNav .right-box{
		display: none;
	}

}






#sub__content{}

#sub__content .content__top{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#sub__content .content__top .category_tab{
	display: flex;
	flex-direction: row;
	align-items: center;
	border-radius: 50px;
	background-color: var(--light-blue);
}

#sub__content .content__top .category_tab li{}

#sub__content .content__top .category_tab li a{
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
	border-radius: 50px;
	padding: 15px 50px;
	transition: 0.4s;
}

#sub__content .content__top .category_tab li a:hover{
	background-color: #dfecf8;
}

#sub__content .content__top .category_tab li.active a{
	background-color: var(--blue);
	color: var(--white);
}


#sub__content .content__top .search-box form{
	display: flex;
	flex-direction: row;
	align-items: center;
	position: relative;
	border-radius: 50px;
	border: 1px solid var(--gray05);
	padding: 15px 25px;
}

#sub__content .content__top .search-box form .nice-select{
	border: 0 !important;
	height: auto;
	line-height: 1;
	padding: 0 10px;
	width: 100px;
}

#sub__content .content__top .search-box form .nice-select .current{
	font-size: 1rem;
	font-weight: 500;
	color: var(--gray02);
}

#sub__content .content__top .search-box form .nice-select .list{
	top: calc( 100% + 15px + 1px );
	width: 100px;
}

#sub__content .content__top .search-box form input{
	font-size: 1rem;
	color: var(--gray02);
	border: 0;
	outline: none;
	padding: 0 15px;

	position: relative;
}

#sub__content .content__top .search-box form input::before{
	content: "";
	width: 1px; height: 100%;
	background-color: var(--gray03);
	position: absolute;
	top: 0; left: 0;
}

#sub__content .content__top .search-box form input::placeholder{
	font-size: inherit;
	color: var(--gray03);
}

#sub__content .content__top .search-box form .btn_search{
	display: flex;
	justify-content: center;
	align-items: center;
}

#sub__content .content__top .search-box form .btn_search i{
	font-size: 1.375rem;
	color: var(--gray02);
	transition: 0.4s;
}

#sub__content .content__top .search-box form .btn_search:hover i{
	color: var(--blue);
}



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

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

@media screen and (max-width: 1100px){
	#sub__content .content__top{
		width: 70%;
		flex-direction: column;
		gap: 20px;
	}
	#sub__content .content__top .category_tab{
		width: 100%;
	}
	#sub__content .content__top .category_tab li {
		width: calc( 100% / 3 );
	}

	#sub__content.news .content__top .category_tab li {
		width: calc( 100% / 2 );
	}

	#sub__content .content__top .category_tab li a{
		width: 100%;
		padding: 15px 0;
		text-align: center;
	}

	#sub__content .content__top .search-box form{
		width: 100%;
	}

	#sub__content .content__top .search-box form input{
		width: 85%;
	}
}

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

@media screen and (max-width: 767px){
	#sub__content .content__top{
		width: 90%;
		gap: 15px;
	}


	#sub__content .content__top .category_tab li a{
		width: 100%;
		padding: 12px 0;
		text-align: center;
		font-size: 1.0625rem;
	}


	#sub__content .content__top .search-box form{
		padding: 10px 20px;
	}
}

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