@charset "utf-8";
.bodywrap {width:100%;height: 100%;background: linear-gradient( 360deg, #4e39d1, #6787ff )fixed;margin:0; padding:0; margin-top:-10px;padding-top:8px;padding-bottom:5px;}
#wrap {padding-left: 230px;height: 100%;}
#wrap:after {content:'';clear:both;}
#wrap.page-sub {padding:20px;background:#33414d;}





/*************************************************
	HEADER
*************************************************/
#header {width: 100%; position: fixed; top: 0; left: 0;z-index: 100000;/*box-shadow: 0 1px 5px 0 rgba(107, 119, 172, 0.2);*/}
.page-popup #header {background: #5365d1;}
#header h1 {float:left;width:235px;height:62px;position: relative;background: #6580fb;}
#header h1 a {width: 100%;height: 100%;line-height: 0;display: block;position: relative;font-size: 0;overflow: hidden;border-top-right-radius:20px;}
#header h1 a:before {width: 230px;height: 26px;content: '';display: block;position: absolute;top: 50%;margin-top:-8px;left: 20px;background-image: url(../img/logo_wh_all.png);background-repeat: no-repeat;background-size: 120px auto;}
#header h1 i.bookmark {width:32px;height:32px;position:absolute;top: 50%;right:3px;margin-top: -13px;background-color:transparent;background-image:url(../img/bg_shapes_sprite.png);background-repeat:no-repeat;background-position:0 -160px;background-size:640px auto;z-index:100;}
#header h1 i.bookmark.active {background-position:-32px -160px;}
#header .form-search {margin-top:-2px;padding:0 10px;}
#header .form-search.pull-left li:first-child {padding-right:25px;}

#header.navbar-shrink{box-shadow: 0 1px 5px 0 rgba(107, 119, 172, 0.2);background: #fff;}
#header.navbar-shrink .wrap-menu{margin:21px 0 0 40px;}
#header.navbar-shrink .header-container-inner {margin-top: 5px;}

/***[메뉴아이콘***/
#header .wrap-menu {float:left; width:30px; height:30px; position:relative;margin:26px 0 0 40px;}
#header .wrap-menu .btn-toggle{width: 100%;height: 100%;line-height: 0;display: block;position: relative;font-size: 0;overflow: hidden;}
#header .wrap-menu .btn-toggle i{width:25px;height:25px; position:absolute;top:0px;left:0px; background-color:transparent;background-image:url(../img/icon_menu_off.svg);background-repeat:no-repeat;z-index:100;}


#header > ul > li {display:inline-block;}
#header > ul > li > a {padding: 8px 12px 7px;display: block;position: relative;color: #6787ff;font-size: 13px;font-weight: bold;		}
#header > ul > li> a:before {display:none;}
#header > ul > li:last-child > a:before {content:'';width:1px;height:10px;margin:-4px 0;display:block;position:absolute;top:50%;left:0;background:rgba(0,0,0,0.3);}

#header > ul > li select {border:none !important;background-color:rgba(255,255,255,.4) !important;}
.header-container-inner {margin-right:20px;margin-top:10px;padding: 10px;border-radius: 10px;}
.header-container-inner li .dropdown-toggle {margin-right: 10px;padding: 5px 10px !important;border-radius: 100px;background-color: #a8b0cb;color: #fff !important;}
.header-container-inner li .dropdown-toggle:hover {color: #fff;}

/***navi-minitoggle::after 메뉴 숨기기 ****/

#wrap.mini-toggle {padding-left: 0px !important;}
#wrap.mini-toggle #header h1,
#wrap.mini-toggle #sideMenu {display: none;}
#wrap.mini-toggle #header .wrap-menu .btn-toggle i{background-image:url(../img/icon_menu_on.svg);z-index:100;}/***컬러 변경 **/
#wrap.mini-toggle #header .header-container-inner {right:0 !important;}
#wrap.mini-toggle #wrap.mini-toggle{border-radius: 0px; margin: 0px;}


@media (max-width:768px) {
	#wrap.mini-toggle #content{margin:0;}
	.header-container-inner {margin-right: 0;}
	/*#wrap.mini-toggle #header {background: #e5e7ec;}*/

	#wrap.mini-toggle #header .header-container-inner {right: 0 !important; margin-top:3px;}
	#wrap.mini-toggle #header .header-container-inner li .btn-outlink,
	#header .header-container-inner li .btn-outlink{display: none;}
	#wrap.mini-toggle #header .wrap-menu{margin: 16px 0 0 25px;}
	#header .wrap-menu {margin: 23px 0 0 25px;}
	#wrap.mini-toggle #header .header-container-inner li.dropdown-container {margin-right:0; margin-top:0;}
	#wrap.mini-toggle #header .header-container-inner li .btn-outlink {display: none;}
	.header-container-inner {margin-right:0px;	padding:10px 0;}
	.header-container-inner li .dropdown-toggle{margin-right: 3px;}
}


	/* Retina-specific */
	@media (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi) {
		#header h1 a:before {
			background-image: url(../img/logo_wh_all.png);
		}
	}

	/*** LAYOUT > header-container > dropdown-menu ***/
	.header-container-inner > li.open {
		position: relative;
	}

		.header-container-inner > li.open > .dropdown-menu {
			display: block;
		}

	.dropdown-menu {
		float: right;
		min-width: 120px;
		margin: 7px -20px 0 0;
		padding: 0px;
		display: none;
		position: absolute;
		top: 100%;
		left: auto;
		right: 25px;
		background-color: #fff;
		-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
		-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
		box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
		border: 1px solid #ddd;
		border-radius: 3px;
		font-size: 13px;
		z-index: 1000;
	}

		.dropdown-menu:before {
			display: inline-block;
			position: absolute;
			top: -7px;
			right: 9px;
			border-right: 7px solid transparent;
			border-bottom: 7px solid #ddd;
			border-left: 7px solid transparent;
			border-bottom-color: #ccc;
			content: '';
		}

		.dropdown-menu:after {
			display: inline-block;
			position: absolute;
			top: -6px;
			right: 10px;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #fff;
			border-left: 6px solid transparent;
			content: '';
		}

		.dropdown-menu > li > a {
			line-height: 1.42857143;
			margin: 2px 4px;
			padding: 5px 10px;
			display: block;
			border-radius: 3px;
			color: #2a2e36;
			font-weight: 400;
			text-align: left;
			white-space: nowrap;
			clear: both;
		}

		.dropdown-menu > li:first-child a {
			margin-top: 4px;
		}

		.dropdown-menu > li:last-child a {
			margin-bottom: 4px;
		}

		.dropdown-menu > li > a:hover,
		.dropdown-menu > li > a:focus {
			color: #1b1e24;
			text-decoration: none;
			background-color: #eff2f3;
			background-image: none;
		}

		.dropdown-menu > .active > a,
		.dropdown-menu > .active > a:hover,
		.dropdown-menu > .active > a:focus {
			color: #1b1e24;
			text-decoration: none;
			background-color: #eff2f3;
			background-image: none;
		}

		.dropdown-menu > .disabled > a,
		.dropdown-menu > .disabled > a:hover,
		.dropdown-menu > .disabled > a:focus {
			color: #999;
		}

			.dropdown-menu > .disabled > a:hover,
			.dropdown-menu > .disabled > a:focus {
				text-decoration: none;
				cursor: default;
				background-color: transparent;
				background-image: none;
			}

		.dropdown-menu > li > a i {
			margin-right: 5px;
			display: inline-block;
			position: relative;
			font-size: 14px;
			color: #656565;
		}

		.dropdown-menu > li > a .badge {
			position: relative;
			top: -1.5px;
			background-color: #f44967;
			color: #fff;
		}

		.dropdown-menu .divider {
			background-color: #eaedf0;
			height: 1px;
			margin: 4px 0;
			border-bottom: 0px;
			overflow: hidden;
		}


	/*************************************************
	SIDEMENU
*************************************************/
	#sideMenu {
		float: left;
		width: 235px;
		height: 100%;
		padding-top: 70px !important;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
		background: linear-gradient( 360deg, #4e39d1, #6787ff )fixed;
	}

		#sideMenu > ul {
			padding-top: 0px;
		}

		#sideMenu ul {
			height: 100%;
			scrollbar-3dlight-color: rgba(255,255,255,0.2);
			scrollbar-face-color: rgba(255,255,255,0.2);
			scrollbar-shadow-color: rgba(255,255,255,0.2);
			scrollbar-darkshadow-color: rgba(255,255,255,0.2);
			scrollbar-track-color: rgba(0,0,0,0);
			scrollbar-arrow-color: rgba(255,255,255,0.2);
			overflow: auto;
		}

			#sideMenu ul::-webkit-scrollbar {
				width: 5px;
			}

			#sideMenu ul::-webkit-scrollbar-track {
				background-color: rgba(0,0,0,0);
			}

			#sideMenu ul::-webkit-scrollbar-thumb {
				background-color: rgba(255,255,255,0.2);
				border-radius: 10px;
			}

				#sideMenu ul::-webkit-scrollbar-thumb:hover {
					background-color: rgba(255,255,255,0.4);
				}

			#sideMenu ul > li {
				position: relative;
			}

				#sideMenu ul > li a {
					display: block;
					position: relative;
					-webkit-transition: color .12s ease-out;
					transition: color .12s ease-out;
				}

		#sideMenu > ul > li > a {
			padding: 10px 20px 10px 25px;
			color: rgba(256, 256, 256, 0.7);
			font-size: 13px;
			font-weight: 300;
		}

			#sideMenu > ul > li > .active,
			#sideMenu > ul > li > a:hover {
				background: rgba(0,0,0,0.25);
				color: #fff;
				box-shadow: 0 1px 5px 0 rgba(107, 119, 172, 0.5);
			}

				#sideMenu > ul > li > a:hover:before {
					background: rgba(256, 256, 256,0.8);
				}

				#sideMenu > ul > li > a:hover:after {
					background: none;
				}

			#sideMenu > ul > li > a:before {
				width: 4px;
				height: 4px;
				content: '';
				display: inline-block;
				position: absolute;
				top: 18px;
				left: 12px;
				background: rgba(256, 256, 256, 0.5);
				border-radius: 2px;
				vertical-align: middle;
			}

			#sideMenu > ul > li > a:after {
				width: 0;
				height: 0;
				margin: -2px 0;
				content: '';
				position: absolute;
				top: 50%;
				right: 11px;
				border: 4px solid transparent;
				border-top: 4px solid #afb5c3;
			}

		#sideMenu > ul > li > .active {
			font-weight: bold;
		}

			#sideMenu > ul > li > .active:before {
				background: rgba(256, 256, 256, 0.8);
			}

			#sideMenu > ul > li > .active:after,
			#sideMenu > ul > li > .open:after {
				margin: -4px 0;
				right: 13px;
				border: 4px solid transparent !important;
				border-right: 4px solid #fff !important;
				background: none;
				;
				color: #6787ff;
			}

		#sideMenu .sub-menu {
			display: none;
			background: rgba(0,0,0,0.1);
		}

			#sideMenu .sub-menu > li > a {
				padding: 10px 20px 10px 25px;
				font-size: 12px;
				color: #fff;
			}

				#sideMenu .sub-menu > li > a.active,
				#sideMenu .sub-menu > li > a:hover {
					color: #fff6a3 !important;
					font-weight: bold;
				}

				#sideMenu .sub-menu > li > a:before {
					content: '- ';
					position: absolute;
					top: 8px;
					left: 12px;
				}

		#sideMenu .active + .sub-menu {
			display: block;
		}

			#sideMenu .active + .sub-menu > li > a {
				color: rgba(256, 256, 256, 0.5);
			}

		#sideMenu .sub-menu > li > i.bookmark {
			width: 32px;
			height: 32px;
			position: absolute;
			top: 3px;
			right: 0;
			background-color: transparent;
			background-image: url(../img/bg_shapes_sprite.png);
			background-repeat: no-repeat;
			background-position: 0 -160px;
			background-size: 640px auto;
			z-index: 100;
		}

			#sideMenu .sub-menu > li > i.bookmark.active {
				background-position: -32px -160px;
			}


	/*************************************************
	CONTENT
*************************************************/
	article h1 + ul {
		margin: 10px 0;
	}

	.wrap-search {
		width: 100%;
		background: #fff;
		border-radius: 5px;
		padding: 10px 15px 5px;
		margin-bottom: 15px;
	}

	#content {
		min-height: 98vh;
		padding: 65px 30px 30px 30px;
		position: relative;
		z-index: 6;
		box-sizing: border-box;
	}

	#wrap #content {
		min-width: 1400px;
		padding-top: 65px !important;
		overflow: auto;
		background: #e5e7ec;
		border-radius: 20px;
		margin: 10px 10px 10px 5px;
	}

	#wrap.page-sub #content {
		width: 100%;
		min-width: 100%;
		min-height: 100%;
		margin: 0 auto;
		padding-top: 65px;
		background: #fff;
	}

	#content.page-popup {
		min-height: 100%;
		padding: 65px 15px 15px;
		background: #f6f8fb;
	}

		#content.page-popup #header h1 {
			line-height: 0;
			position: relative;
			font-size: 0;
		}

			#content.page-popup #header h1:before {
				width: 150px;
				height: 25px;
				margin: -10px -100px;
				content: '';
				display: block;
				position: absolute;
				top: 50%;
				left: 50%;
				background: url(../img/logo_wh_all.png) no-repeat 0 0;
				background-size: 100px auto;
			}

		#content.page-popup .page-popup-cont {
			line-height: 1.75;
			margin: -45px -15px -15px;
			padding: 30px 15px 15px;
			background: #fff;
			color: #000;
			font-size: 13.6px;
		}


	#wrap.page-login {
		width: 100%;
		min-width: 500px;
		min-height: 100%;
		margin: 0 auto;
	}

	#wrap.page-login {
		height: 100vh;
		padding-top: 40px;
		padding-bottom: 40px;
		padding-left: 0;
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
	}

	.page-login .wrapper {
		width: 100%;
		min-width: 450px;
		max-width: 450px;
		height: auto;
		margin: auto;
		transition: all 0.2s ease-out;
	}

	.page-login .main-wrap {
		width: 100%;
		min-height: inherit;
		padding: 0;
		max-width: 100%;
		background-color: transparent;
	}

	.page-login .main-body {
		min-height: 1px;
		margin: 30px 0 0;
		padding: 0;
		position: relative;
		-webkit-box-flex: 1;
		-ms-flex: 1 0 auto;
		flex: 1 0 auto;
	}

	.page-login .main-footer {
		padding-top: 2rem;
		color: rgba(0,0,0,0.45);
		font-size: 12px;
		font-weight: bold;
		text-align: center;
	}

	.page-login .segment-wrap {
		margin-bottom: 0;
		background-color: transparent;
		border-radius: 4px;
	}

	.page-login .segment-body {
		margin-bottom: 0;
		padding: 0;
		display: -ms-flexbox;
		display: block;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.page-login .panel-wrap {
		width: 450px;
		height: 450px;
		padding: 50px;
		min-height: 1px;
		margin-bottom: 0;
		position: relative;
		background-color: rgba(25,35,75,0.8);
		border-radius: 50%;
		box-shadow: 0rem 1.2rem 1.5rem rgba(8, 0, 29, 0.3);
	}

	.page-login .panel-header {
		padding: 19px 24px;
		display: -webkit-box;
		display: block; /*-webkit-box-align:stretch; -ms-flex-align:stretch; align-items:stretch; -webkit-box-pack:justify; -ms-flex-pack:justify; justify-content:space-between;*/
		position: relative;
		text-align: center;
	}

		.page-login .panel-header figure {
			margin-bottom: 10px;
		}

		.page-login .panel-header h3 {
			margin-bottom: 0;
			display: -webkit-box;
			display: block;
			-webkit-box-align: center;
			-ms-flex-align: center;
			align-items: center;
			-ms-flex-line-pack: flex-start;
			align-content: flex-start;
			color: #fff;
			font-size: 24px;
			font-weight: 300;
			white-space: nowrap;
		}

			.page-login .panel-header h3 span {
				margin-right: 6px;
				display: none;
			}

	.page-login .panel-body {
		padding: 15px 30px;
	}

		.page-login .panel-body .figure {
			margin: 0;
			display: table;
		}

			.page-login .panel-body .figure img {
				width: 100%;
				border-top-left-radius: 4px;
				border-bottom-left-radius: 4px;
				vertical-align: middle;
				border-style: none;
			}

		.page-login .panel-body .row {
			display: -ms-flexbox;
			display: flex;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			margin-right: -15px;
			margin-left: -15px;
		}

		.page-login .panel-body .grid-col {
			width: 100%;
			min-height: 1px;
			padding-right: 15px;
			padding-left: 15px;
			position: relative;
		}

	.page-login .login-wrap {
		text-align: center;
	}

		.page-login .login-wrap span {
			width: 100%;
			margin-bottom: 8px;
			padding-top: 40px;
			display: inline-block;
			text-align: left;
			position: relative;
		}

			.page-login .login-wrap span label {
				margin-bottom: 4px;
				padding-left: 2px;
				display: none;
				color: #2f3640;
				font-size: 14px;
				font-weight: 400;
			}

			.page-login .login-wrap span input {
				width: 100%;
				height: inherit;
				margin: 0;
				padding: 7px 8px 8px;
				padding-left: 0;
				padding-right: 0;
				display: block;
				position: absolute;
				top: 0;
				left: 0;
				background-image: none;
				background-color: transparent;
				border-radius: 0;
				border-color: rgba(256, 256, 256, 0.8);
				border: 1px solid #ced4da;
				border-top-color: transparent;
				border-right-color: transparent;
				border-left-color: transparent;
				color: #fff;
				font-size: 14px;
				font-weight: 400;
				font-family: inherit;
				line-height: 1.5;
				overflow: visible;
				transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
			}

				.page-login .login-wrap span input:focus {
					color: #333;
				}

			.page-login .login-wrap span label.incorrect {
				max-width: 100%;
				margin-top: .1rem;
				padding: .25rem .5rem;
				display: block;
				position: relative;
				top: inherit;
				background-color: #ff5f7b;
				border-radius: .25rem;
				color: #fff;
				font-size: 12px;
				line-height: 1.5;
				z-index: 5;
			}

			.page-login .login-wrap span input.incorrect {
				background-color: #ffc0cb !important;
				border-color: #ff5f7b !important;
			}

		.page-login .login-wrap button {
			min-width: 300px;
			padding: 11px 30px 12px;
			display: inline-block;
			margin: 15px auto 10px;
			background-color: #fff;
			border: 1px solid #26356f;
			border-radius: 32px;
			color: #26356f;
			font-weight: bold;
			font-size: 14px;
			font-family: Arial, Helvetica, sans-serif;
			text-align: center;
			vertical-align: middle;
			line-height: 1.5;
			transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
		}
	/****** responsive & retina specific ******/
	@media (max-width:595px) {
		.page-login .wrapper {
			min-width: 320px;
			max-width: 320px;
		}

		.page-login .panel-wrap {
			width: 100%;
			height: auto;
			min-height: 330px;
			padding: 20px;
			border-radius: 50px;
		}

		.page-login .panel-body {
			padding: 15px;
		}

		.page-login figure img {
			width: 130px;
		}
	}

	@media (max-width:768px) {
		.page-login .wrapper {
			width: 100%;
			min-width: 420px;
			max-width: 420px;
		}
	}

	@media (min-width:768px) {
		.page-login .wrapper {
			max-width: 480px;
		}

		.page-login .panel-wrap:first-child {
			display: block;
		}

		.page-login .panel-header h3 {
			font-size: 32px;
		}

		.page-login figure img {
			width: 160px;
		}
	}