.util-box { display: flex; align-items: center; }

#tnb_index { }
#tnb_index h3 { position: absolute; font-size: 0; line-height: 0; overflow: hidden; }
#tnb_index ul { display: flex; justify-content: space-between; width: max-content; align-items: center; margin: unset; zoom: 1; }
#tnb_index ul::after { display: block; visibility: hidden; clear: both; content: ""; }
#tnb_index ul li { border-right: 1px solid rgba(255, 255, 255, 0.3); /* margin-bottom: -1px; */ }
#tnb_index ul li:last-child { border-right: none; }
#tnb_index ul li a { display: inline-block; padding: 0 10px; color: #eee; transition: all 0.3s; font-size: 12px; font-weight: 700; opacity: 0.7; }
#tnb_index ul li a i { margin-right: 5px; }
#tnb_index ul li a:focus,
#tnb_index ul li a:hover { /* color: #4ea1d3; */ /* background: #fafafa; */ opacity: 0.4; }
#tnb_index .tnb_index_admin a { color: #ff0000; }
#tnb_index .tnb_index_left { float: left; }
#tnb_index .tnb_index_left a { padding: 0 14px}
#tnb_index .tnb_index_cart { border-right: 1px solid #ddd; }
#tnb_index .tnb_index_community { border-right: 1px solid #ddd; }
#tnb_index .tnb_index_community i { font-size: 15px; }
#tnb_index .tnb_index_community { background: #e7e7e7; font-weight: bold; }
#tnb_index .tnb_index_community:focus,
#tnb_index .tnb_index_community:hover { color: #333; border-bottom: 0; }
#tnb_index .tnb_index_community a { color: #4ea1d3; border-bottom: 1px solid #e7e7e7; }
#tnb_index_left { display: flex; align-items: center; justify-content: center; margin-right: auto; width: max-content; white-space: nowrap; }
#tnb_index_left .sns_icon a { color: #ffffff; }

#header .logo-box { padding: 20px 0; }
#header .navbar-brand { margin: 0 0 0 20px; }
#header.fixed #tnb_index a { color: #222; }


/*sns_icon **********/

.sns_icon { list-style: none; text-align: center; cursor: pointer; display: inline; padding: 5px; }
.sns_icon .fab { font-size: 30px; }

.sns_icon .fa-facebook-f { color: #a2a2a2; font-size: 20px; }
.sns_icon .fa-instagram { color: #a2a2a2; font-size: 20px; }
.sns_icon .fa-twitter { color: #a2a2a2; font-size: 20px; }

.sns_icon a .fa-facebook-f:hover { color: #3b5998; font-size: 20px; }
.sns_icon a .fa-instagram:hover { color: #dd4b39; font-size: 20px; }
.sns_icon a .fa-twitter:hover { color: #55acee; font-size: 20px; }





/* mobile */
@media (min-width: 1px) and (max-width: 1089px) {

	.fixed-header { display: none; }
	.login { display: block}
	.mpage { display: block; }
	.spage { overflow-x: auto; white-space: nowrap; }

}



/* desktop */

@media (min-width: 1090px) {

	.fixed-header { display: block; }
	.login { display: none; }
	.mpage { display: none; }



	/* header */


	.fixed-header { position: relative; top: 0; right: 0; left: 0; z-index: 1030; }
	#header .top-line { display: none; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.3); background: transparent; /* height: 45px; */ }


}

.text-white01 { color: #036eb7 !important; }
.fixed-top { position: relative; /* top: 44px; */ right: 0; left: 0; z-index: 1030; }

.list-group-item:first-child { border-top-left-radius: 0px; border-top-right-radius: 0px; }

.list-group-first { padding: 50px 0px 50px 20px; background: #4c4f6f; font-size: 20px; color: #fff; font-weight: bold; border-top: 3px solid #313450; border-top-left-radius: 0px; border-top-right-radius: 0px; }

.carousel-item a { color: #fff; }

/* 네비게이션 수정 */
#header { position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; backdrop-filter: blur(0px); transition: all 0.3s; }

#header .dropdown-menu { border-radius: 0px; }

#header .dropdown-item { display: block; width: 100%; padding: 10px 10px; clear: both; font-weight: 600; color: #888; text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; font-size: 1rem; transition: all 0.3s; }
#header .dropdown-item:hover { /* background: #f5f5f5; */ color: #000; }

.color-gray { color: #666}
.color-red { color: #ff0000; }

#header .navbar { padding: 0rem 0rem !important; width: 100%; max-width: 100%; }
#header .navbar-nav .nav-link { position: relative; padding: 1rem 2rem; color: #fff; transition: all 0.3s; opacity: 1; }
#header .navbar-nav .nav-link::before { content: ""; position: absolute; left: 1.5rem; bottom: 0px; width: 0%; height: 1px; background: #fff; opacity: 0.5; transform: translate(0, 0); }
#header .navbar-nav .nav-link:hover { opacity: 0.5; }
#header .navbar-nav .nav-link:hover::before { width: calc(100% - 3rem); }

#header .dropdown-menu { width: 100%; background: rgba(255, 255, 255, 0.8); text-align: center; }

#header.fixed { backdrop-filter: blur(5px); background: rgba(255, 255, 255, 0.7); border-bottom: 1px solid rgba(0,0,0,0.05) }
#header.fixed .navbar-nav .nav-link { color: #000; }

#header .logo-box img { transition: all 0.3s; max-width: 150px; }
#header.fixed .logo-box img { filter: invert(100) contrast(1.8); }

.navbar-toggler-icon { width: 22px; aspect-ratio: 1; filter: brightness(1) contrast(1); transition: all 0.3s; }
#header.fixed .navbar-toggler-icon { filter: brightness(0) contrast(3); }


#header.fixed.on_bg .navbar-nav .nav-link { color: #fff; }
#header.fixed.on_bg .logo-box img { filter: invert(0) contrast(1); }

.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f17 { font-size: 17px; }
.f18 { font-size: 18px; }
.f19 { font-size: 2vw; text-align: center; }
.f20 { font-size: 20px; }
.f30 { font-size: 1.2rem; letter-spacing: -2px; font-weight: 600; }



/* pages */

.info-2 i { font-size: 20px; }
table th,
table td { font-weight: 400; font-size: 1rem; }

#bo_v_sns li span { display: none; }
#bo_v_sns { display: none; position: absolute; top: -50px; right: 0px; margin-left: -90px; width: 180px; padding: 0; list-style: none; zoom: 1; }

@media only screen and (max-width: 991px) {

	header nav { }
	header nav::before { content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 100%; height: 0; background: #222; transition: all 0.67s; }
	header.on_bg nav::before { height: 100%; }

	#header .dropdown-menu { background: transparent; text-align: left; border: none; text-indent: 1.5em; }
	.navbar-expand-lg > .container, .navbar-expand-lg > .container-fluid { padding-bottom: 0; }

}

@media only screen and (max-width: 768px) {

	.f30 { font-size: 1.1rem; line-height: 22px; }

	#header .logo-box img { max-width: 150px; }
	#header.fixed .logo-box img { max-width: 130px; }

}


@media only screen and (max-width: 568px) {

	.f19 { font-size: 4vw; }
	#header .logo-box { margin-left: 1rem; }

}

@media only screen and (max-width: 480px) {

	#header .logo-box img { max-width: 100px; }
	#header.fixed .logo-box img { max-width: 100px; }

}

@media only screen and (max-width: 350px) {

	.f19 { font-size: 5vw; }
	.f30 { font-size: 0.9rem; line-height: 22px; }

}