@charset "utf-8";


.collapse {
	display:none;
}

.collapse.in {
	display:block;
}

tr.collapse.in {
	display:table-row;
}

tbody.collapse.in {
	display:table-row-group;
}

.collapsing {
	position:relative;
	height:0;
	overflow:hidden;
	-webkit-transition-timing-function:ease;
	-o-transition-timing-function:ease;
	transition-timing-function:ease;
	-webkit-transition-duration:.35s;
	-o-transition-duration:.35s;
	transition-duration:.35s;
	-webkit-transition-property:height,visibility;
	-o-transition-property:height,visibility;
	transition-property:height,visibility;
}

@media (max-device-width:480px)and (orientation:landscape){ 
	.navbar-fixed-bottom .nav,
	.navbar-fixed-top .nav {
		max-height:200px;
	} 
} 
 
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.nav:after,
.nav:before,
.nav:after,
.nav:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before {
	display:table;
	content:" ";
}

.clearfix:after,
.container-fluid:after,
.container:after,
.nav:after,
.nav:after,
.navbar-header:after,
.navbar:after {
	clear:both;
}



/* layout */
#menu-container { 
	position: fixed; 
	width: 100%; 	
	z-index: 999; 
	-webkit-transition: 0.2s all; transition: 0.2s all;
}
#menu-container:hover { 
	background: #fff;
}
#menu-container .container { 
	display: flex; justify-content: space-between; align-items: center;
	width: 100%; height: 100px; 
	padding: 0 2.5%;
}

	@media (min-width:901px){
		#menu-container.fixed {
			background: #fff; 
			box-shadow: 3px 3px 3px rgba(0,0,0,0.1); 
			-webkit-transition: 0.2s all; transition: 0.2s all;
		}
	}
	@media only screen and (max-width: 900px) {
		/* layout */
		#header {
			height: 60px;
		}
		#menu-container .container {
			height: 60px;
			background: #fff;
			box-shadow: 0 0 8px rgba(0,0,0,.3);
		}
	}



/* 로고 */
#menu-container:hover h1,
#menu-container.fixed h1,
h1.fixed { 
	display: none;
}
#menu-container:hover h1.fixed,
#menu-container.fixed h1.fixed { 
	display: block;
}

	@media (min-width:901px){
		/* 로고 */
		.navbar-brand {
			width: 20%; 
		}
	}
	@media only screen and (max-width: 1400px) {
		/* 로고 */
		.navbar-brand h1 img {
			width: 160px;
		}
	}
	@media only screen and (max-width: 1200px) {
		/* 로고 */
		.navbar-brand h1 img {
			width: 150px;
		}
	}
	@media only screen and (max-width: 900px) {
		/* 로고 */
		.navbar-brand {
			width: 100%;
		}
		.navbar-brand h1 {
			display: none;
		}
		.navbar-brand h1.fixed {
			display: block;
		}
		#header .navbar-brand h1 img {
			width: 140px;
		} 
	}



/* Top Menu */
.util-menu { 
	display: none; 
	float: left; 
	width: 100%; height: 32px; 
	line-height: 0; 
	background: #f3f3f3;
}
.util-menu ul { 
	float: right; 
	margin: 0 auto;
}
.util-menu li { 
	display: inline-block; 
	height: 32px; 
	padding: 10px 20px; 
	border-right: 1px solid #e3e3e3;
}
.util-menu li:first-child { 
	border-left: 1px solid #e3e3e3;
}
.util-menu li a { 
	padding:0; 
	font-size:12px; 
	font-weight:400; 
	color:#999; 
}
.util-menu li a:hover { 
	color:#3264c7; 
	background:none;
}

	@media screen and (max-width: 1200px) {
		.util-menu li:last-child {
			border-right:none;
		}
	}
	@media only screen and (max-width: 1024px) {
		/* 최상단 바로가기 메뉴 */
		.util-menu,
		.util-menu li {
			height:30px;
		}
		.util-menu li {
			padding:10px 15px;
		}
	}



/* GNB */
/* 1차 메뉴 */
.nav > li a { 
	font-size: 19px; font-weight: 500; color: #fff; letter-spacing: -0.4px; 	
}
#menu-container:hover .nav > li a,
.fixed .nav > li a { 
	color: #2b3747; 
}
.nav > li > a:focus,
.nav > li > a:hover {
	text-decoration: none;
}
#menu-container:hover .nav li a:hover,
#menu-container.fixed .nav > .active > a,
#menu-container.fixed .nav > .active > a:focus,
#menu-container.fixed .nav > .active > a:hover {
	color: #3163c7;
}

/* 2차 메뉴 */
ul.sub-menu {
	display: none; 
	position: absolute; 
	top: 100px; left:0; 
	width: 100%; 
	margin: 0; padding: 0;
	list-style: none;
	box-shadow: none; 
	z-index: 999;
}
ul.sub-menu li a {
	display: block;
	padding: 15px 20px; 
	font-size: 16px; font-weight: 400; color:#fff;
}
#menu-container:hover ul.sub-menu li a:hover, 
#menu-container:hover ul.sub-menu li a:focus {	
	color: #fff;
	background:#3163c7; 
}

	@media screen and (min-width: 901px) {
		/* GNB */
		.navbar-collapse {
			display: block !important;
		}
		.nav,
		.nav > li {
			display: flex;
			height: 100px;
		}

		/* 1차 메뉴 */	
		.nav > li > a {
			display: flex; align-content: center; align-items: stretch; flex-wrap: wrap;
			padding: 0 25px;
		}	
		.nav > li:first-child > a { 
			padding-left: 0;
		}
		.nav > li > a > i {
			display: none
		}	
		.nav > li > a > img {
			max-width: none;
		}

		/* 2차 메뉴 */
		ul.sub-menu {
			box-sizing: border-box;
			padding-left: calc(20% + 2.5% - 40px);
		}
		li:hover > ul.sub-menu {
			display: block; 
			background: #f0f0f0;
			-webkit-animation: fadeInDown 400ms; 
			animation: fadeInDown 400ms;
		}
		ul.sub-menu li {
			display: inline-block;
		}
	}

	@media screen and (min-width: 1400px) {
		/* 2차 메뉴 */		
		.nav li:nth-child(3) li:first-child {
			margin-left: 270px;
		}
		.nav li:nth-child(4) li:first-child {
			margin-left: 485px;
		}
		.nav li:nth-child(5) li:first-child {
			margin-left: 450px;
		}
	}

	@media only screen and (max-width: 1400px) {
		/* 1차 메뉴 폰트 & 심플로우 */	
		.nav > li > a {		
			padding: 0 20px;
			font-size: 18px;
		}
		/* 2차 메뉴 */	
		ul.sub-menu {
			padding-left: calc(20% + 2.5% - 22px);
		}
		.nav li:nth-child(3) li:first-child {
			margin-left: 240px;
		}
		.nav li:nth-child(4) li:first-child {
			margin-left: 440px;
		}
		.nav li:nth-child(5) li:first-child {
			margin-left: 400px;
		}
		/* 2차 메뉴 */
		ul.sub-menu li a {
			padding: 12px 15px;
			font-size: 15px;
		}
	}

	@media only screen and (max-width: 1200px) and (min-width: 901px) {
		/* layout */
		#menu-container .container {
			height: 80px;
		}
		/* GNB */
		.nav,
		.nav > li {
			display: flex;
			height: 80px;
		}
		/* 1차 메뉴 */
		.nav > li > a {
			font-size: 17px;
		}
		/* 2차 메뉴 */	
		ul.sub-menu {
			top: 80px;
		}
		.nav li:nth-child(3) li:first-child {
			margin-left: 225px;
		}
		.nav li:nth-child(4) li:first-child {
			margin-left: 420px;
		}
		.nav li:nth-child(5) li:first-child {
			margin-left: 300px;
		}
		ul.sub-menu li a {
			padding: 8px 10px;
		}
	}

	@media only screen and (min-width: 1025px) {
		.navbar-collapse {
			width: calc(80% - 160px);
		}	
	}

	@media only screen and (max-width: 1024px) {
		.navbar-collapse {
			width: calc(80% - 140px);
		}
		/* 1차 메뉴 */
		.nav > li > a {
			padding: 0 10px;
		}
		/* 2차 메뉴 */
		ul.sub-menu {
			padding-left: calc(20% + 2.5% - 28px);
		}
		.nav li:nth-child(3) li:first-child {
			margin-left: 210px;
		}
		.nav li:nth-child(4) li:first-child {
			margin-left: 360px;
		}
		.nav li li a {
			padding: 10px 8px; 
			font-size: 14px;
		}
	}

	@media only screen and (max-width: 900px) {
		/* GNB */
		.navbar-collapse {
			position: absolute;
			top: 59px; left: 0;
			width: 100%; 
		}
		.collapse.in {
			height: calc(100vh - 59px);
		}
		.in .nav {		
			overflow-x: visible; overflow-y: auto;
			width: 100%;
			-webkit-overflow-scrolling: touch;
			-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
			box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
		}		
		.in .nav:before {
			content: "";
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			background: rgba(0,0,0,.5);
		}

		/* 1차 메뉴 */	
		.nav > li {
			position: relative;
			width: 100%; 
			text-align: left; 		
			border-bottom:1px solid #ddd;
			background: #fff;
		}
		.nav > li:first-child {
			border-top: 1px solid #ddd;
		}
		.fixed .nav > li > a,
		.nav > li > a {
			display: block;
			padding: 10px 20px !important;
			font-size: 15px; 
			color: #2b3747;
		}
		.nav li > a > i {		
			display: inline-block; 
			float: right; 
			padding: 3px 10px; 
			border: 1px solid #ddd; 
			border-radius: 4px;
		}

		/* 2차 메뉴 폰트 */		
		ul.sub-menu {
			display: none;
			position: relative; 
			top:0; left:0; 
			width: 100%; 
			padding: 0; 
			border: 0;
			box-shadow: none;  
			z-index: 999; 
		}
		ul.sub-menu li {
			border-bottom: 1px solid #666;
			background: #555;
		}
		ul.sub-menu li:first-child {
			margin-left: 0 !important;
		}
		ul.sub-menu li:last-child {
			border-bottom: none;
		}
		#menu-container:hover .nav li li a,
		.fixed .nav li li a,
		.nav li li a {
			padding: 8px 21px;
			color: #fff;
		}
	}



/* 교구몰 */
.outsite a {	
	display: flex; align-items: center; justify-content: space-around;
	position: relative;
	width: 160px; height: 48px;
	padding: 0 20px;
	font-size: 19px; font-weight: 500; color: #fff; letter-spacing: -0.4px; text-align: center;	
	border-radius: 50px;
	background: #3163c7;
}
.outsite a i { 
	font-size: 85%; 
}
#menu-container:hover .outsite a,
.fixed .outsite a {
	background: #2b3747;
}

	@media only screen and (max-width: 1400px) {
		/* 교구몰 */
		.outsite a {		
			font-size: 18px;
		}
	}
	@media only screen and (max-width: 1200px) {
		/* 교구몰 */
		.outsite a {
			width: 140px; height: 44px;
			font-size: 17px;
		}
	}
	@media (max-width: 900px){
		/* 교구몰 */
		.outsite a {
			width: 114px; height: 32px;
			padding: 0 13px;
			font-size: .9rem;
			white-space: nowrap;
		}
	}



/* 토글메뉴 */
.navbar-toggle {
	position:relative;	
	padding: 9px 10px;
	background-color: transparent; background-image: none;	
 }
 .navbar-toggle:focus {
	outline: 0;
 }
 .navbar-toggle .icon-bar {
	display: block;
	width: 26px; height: 3px;
 }
 .navbar-toggle .icon-bar + .icon-bar {
	margin-top: 5px;
 }
.navbar-inverse .navbar-toggle .icon-bar {
	background-color: #333;
}
.navbar-header .navbar-toggle .icon-bar {
	background-color: #000;
}

	@media (min-width: 901px){
		.navbar-toggle {
			display: none;
		}
	}
	@media (max-width: 900px){
		/* 토글메뉴 */
		#header .navbar-toggle, 
		#header .navbar-toggle:focus { 
			border: none; 
			outline: none;
			cursor: pointer;
		}
		#header .navbar-toggle {
			padding-right: 0;
		}
	}