@charset "UTF-8";


/* Header 네비게이션nav */

	.subpage {
		padding-top: 44px;
	}

		.subpage #header {
			background: #b3dae6;
			top: 0;
			height: 44px;
			line-height: 44px;
			position: fixed;
		}

	#header {
		color: #ffffff;
		cursor: default;
		height: 3.25em;
		left: 0;
		line-height: 3.25em;
		position: absolute;
		text-align: right;
		top: 0em;
		width: 100%;
		z-index: 10001;
		font-weight: 500;
		}

		#header .inner {
			margin: 0 auto;
			position: relative;
			font-family: 'Noto Sans KR', sans-serif;
		}

		#header .logo {
			color: #000000;
			display: inline-block;
			font-weight: 600;
			height: inherit;
			left: 0;
			line-height: inherit;
			margin: 0;
			padding: 0;
			position: absolute;
			top: 0;
			font-size: 1em;
		}

		#header a {
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			display: inline-block;
			padding: 0 0.75em;
			color: inherit;
			text-decoration: none;
			font-size: .85em;
			font-weight: 600
		}

			#header a:hover {
				color: #922eff;
				
			}

			#header a:last-child {
				padding-right: 0;
			}

			#header a.navPanelToggle {
				display: none;
				text-decoration: none;
				height: 4em;
				width: 4em;
				z-index: 10003;
			}

				#header a.navPanelToggle .fas {
					font-size: 1.25em;
					color: #922eff;
				}

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

					#header a.navPanelToggle {
						display: inline-block;
						color: #922eff;
					}

				}

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

				#header a {
					padding: 0 0.5em;
				}

			}

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

		#header {
			top: 0em;
			height: 44px;
			line-height: 44px;
		}

	}

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

		#header {
			top: 0em;
		}

	}

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

		#header {
			top: 0em;
			min-width: 320px;
		}

	}

/* Nav */

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

		#nav {
			display: none;
		}

	}

	#navPanel {
		-moz-transform: translatex(20em);
		-webkit-transform: translatex(20em);
		-ms-transform: translatex(20em);
		transform: translatex(20em);
		-moz-transition: -moz-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-transition: -webkit-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-ms-transition: -ms-transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		transition: transform 0.2s ease-in-out, visibility 0.2s ease-in-out;
		-webkit-overflow-scrolling: touch;
		visibility: hidden;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		background: #012f51;
		color: #ffffff;
		height: 100%;
		max-width: 80%;
		width: 20em;
		padding: 0.5em 1.25em;
		z-index: 10003;
	}

		#navPanel.visible {
			-moz-transform: translatex(0);
			-webkit-transform: translatex(0);
			-ms-transform: translatex(0);
			transform: translatex(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

		#navPanel a:not(.close) {
			border-top: solid 1px rgba(255, 255, 255, 1);
			color: #ffffff;
			font-weight: 600;
			display: block;
			padding: 0.75em 0;
			text-decoration: none;
			font-weight: 300;
		}

			#navPanel a:not(.close):first-child {
				border: none;
			}

		#navPanel .aclose {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color:  rgba(169, 0 , 255, 1);
			border: 0;
			color: #d4e0ef;
			cursor: pointer;
			display: block;
			height: 4em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 5em;
		}

			#navPanel .aclose:before {
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				/*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
				font-style: normal;
				font-weight: normal;
				text-transform: none !important;
				content: '\f00d';
				width: 3em;
				height: 3em;
				line-height: 3em;
				display: block;
				position: absolute;
				right: 0;
				top: 0;
				text-align: center;
			}

			#navPanel .close:hover {
				color: inherit;
			}
