/* 
	PEOPLUS PMS Design Stylesheet

	Last Updated : 22/11/06

	(C) PEOPLUS Studio, All rights reserved.
	https://peoplus.studio/
*/

	/**
	 * Global Options
	 */
	div.search-form-box {
		display: inline-block;
	}

	div.search-form-box::before {
		content: "\f002";

		margin-right: -1.5rem;
		font-family: "Font Awesome";
		font-weight: 900;
		color: #1A1E27;
	}

	div.search-form-box > input[type="search"].search-form {
		padding-left: 1.6rem;
	}

	div.arrow-link,
	div.arrow-link\:dark {
		display: block;
		color: #588FF9;
		position: relative;
	}

	div.arrow-link\:dark {
		color: #FFFFFF;
	}

	div.arrow-link::before,
	div.arrow-link\:dark::before {
		content: "\f061";

		margin-right: 0.5rem;
		font-family: "Font Awesome";
		font-weight: 900;
		color: inherit;
	}

	div.arrow-link > a,
	div.arrow-link\:dark > a {
		content: "\f061";
		font-family: "PEOPLUS Barunche";
		font-weight: 900;
		color: inherit;
		word-break: keep-all;
	}

	div.arrow-link.left::before,
	div.arrow-link\:dark.left::before {
		content: '\f060';
	}

	div.arrow-link.left > a,
	div.arrow-link\:dark.left > a {
		content: "\f060";
	}

	/**
	 * Header Bar
	 */
	div.header-wrap header {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);

		z-index: 1;
		position: relative;
	}

	div.header-wrap header.no-shadow {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0);
	}
	
	div.header-wrap header div.header-logo {
		position: relative;
		width: 5rem;
		min-height: 2rem;
		background-image: url('../images/peoplus_logo_bold.svg');
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		
		z-index: 2;
	}

	div.header-wrap header div.responsive-menu {
		z-index: 1;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap {
		position: static;
		background: transparent;
		cursor: pointer;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info {
		position: absolute;
		float: left;
		padding: 0 1.75rem 0 0.75rem;
		top: 25%;
		right: 1rem;
		color: #1A1E27;
		background: transparent;
		cursor: pointer;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info:hover {
		padding-bottom: 1rem;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info div.profile-img-wrap {
		position: relative;
		width: 35px;
		height: 35px;
		border-radius: inherit;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info div.profile-img-wrap div.profile-img {
		margin: 0;
		padding: 0;
		width: 100%;
		height: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info::before {
		position: absolute;
		content: "\f078";
		right: 0;

		margin-right: 0.25rem;
		font-family: "Font Awesome";
		font-weight: normal;
		color: inherit;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info:hover::before {
		transform: rotate(180deg);

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap ul {
		position: absolute;
		margin: 0.25rem 0 0;
		padding: 0.5rem;
		top: 100%;
		right: 0;

		color: #1A1E27;
		background-color: #FFFFFF;
		border: 1px solid #D1D8E4;
		border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
		z-index: -1;

		list-style: none;
		display: none;

		transition: 0.1s;
		-webkit-transition: 0.1s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap ul > li {
		margin-right: 0.25rem;
		padding: 0 0.5rem 1rem;

		text-align: right;
		line-height: 1.0;
		word-break: keep-all;
		white-space: nowrap;

		background-color: rgba(42, 81, 161, 0.0);

		display: flex;
		align-content: flex-start;
		flex-direction: column;
		z-index: -1;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap ul > li:first-child {
		padding-top: 0.5rem;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap ul > li:last-child{
		padding-bottom: 0.5rem;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap:hover ul{
		display: block;
		animation: fadeIn 0.5s;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu div.user-menu-wrap:hover ul > li:hover{
		color: #588FF9;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}


	@media (max-width: 1000px) { /* 1024px */
		div.header-wrap header {
			background-color: transparent;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0), 0 1px 2px 0 rgba(0, 0, 0, 0);

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu div.user-menu-wrap {
			position: absolute;
			top: 15%;
			right: 4rem;
			color: #1A1E27;
			background: transparent;
			cursor: pointer;
	
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info {
			position: absolute;
			float: left;
			padding: 0 1.75rem 0 0.75rem;
			top: 50%;
			right: 1rem;
			color: #FFFFFF;
			background: transparent;
			cursor: pointer;
			
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu div.user-menu-wrap div.user-info:hover {
			padding-bottom: 0.5rem;
		}

		div.header-wrap header div.responsive-menu div.user-menu-wrap ul {
			position: absolute;
			margin: 2.75rem 0 0;
			padding: 0.5rem;
			top: 100%;
			right: 1rem;
			color: #1A1E27;
			background-color: #FFFFFF;
			border: 1px solid #D1D8E4;
			border-radius: 0.5rem;
			box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
			z-index: -1;
			list-style: none;
			
			transition: 0.1s;
			-webkit-transition: 0.1s;
		}

		div.header-wrap header div.responsive-menu div.user-menu-wrap ul > li {
			margin-right: 0.6rem;
		}
	}

	/**
	 * Header Navigation Bar
	 */
	div.header-wrap header div.responsive-menu div.btn-menu {
		position: relative;
		padding: 0.25rem 1rem;
		display: none;
		cursor: pointer;
	}

	div.header-wrap header div.responsive-menu div.btn-menu::before {
		content: "\f0c9";

		margin-right: 0rem;
		font-family: "Font Awesome";
		font-weight: lighter;
		color: inherit;
	}

	div.header-wrap header div.responsive-menu nav {
		height: auto;
		text-align: center;
		overflow-x: auto;
		overflow-y: hidden;
		display: inline-block;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb {
		margin: 0.5rem 0;
		padding: 0;
		list-style: none;
		display: inherit;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li {
		padding: inherit;
		margin-right: 0.5rem;
		padding-top: 0.25rem;

		text-align: center;
		line-height: 2.6rem;

		background-color: rgba(42, 81, 161, 0.0);
		border-bottom: 3px solid transparent;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;

		display: inline-block;
		z-index: -1;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover {
		color: #588FF9;
		background-color: transparent;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li > a {
		position: relative;
		padding: 0 1rem 1.25rem;
		color: inherit;
		cursor: pointer;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li > a::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		cursor: pointer;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li > a:hover {
		color: #588FF9;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover ul.gnb-sub {
		display: block;
		animation: fadeIn 0.5s;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover ul.gnb-sub::before {
		animation: fadeInDown 0.5s;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	
	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover ul.gnb-sub li {
		animation: fadeInDown 0.5s;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li.active,
	div.header-wrap header div.responsive-menu nav ul.gnb > li.active:hover {
		color: #588FF9;
		border-bottom: 3px solid #588FF9;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub {
		position: absolute;
		margin: 0;
		padding: 0;
		top: 100%;
		left: 0;
		width: 100%;
		height: 100%;

		list-style: none;
		display: none;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub::before {
		content: '';
		position: absolute;
		padding: 0;
		top: -25%;
		left: 0;
		width: 100%;
		height: 100%;

		background-color: #2952A1;
		border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
		z-index: -1;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub::after {
		content: '';
		position: absolute;
		padding: 0;
		top: -100%;
		left: 0;
		width: 100%;
		height: 100%;

		background-color: white;
		border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
		z-index: -1;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li {
		padding: inherit;
		margin-right: 2.5rem;
		padding-top: 0.25rem;
		float: left;

		text-align: center;
		line-height: 2.6rem;

		background-color: rgba(42, 81, 161, 0.0);
		border-bottom: 3px solid transparent;

		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li:first-child {
		padding-left: 8rem;
	}

	@media (max-width: 1000px) { /* 1024px */

		div.header-wrap header div.responsive-menu nav {
			display: none;
		}

		div.header-wrap header div.responsive-menu nav {
			--background-opacity: 1;

			position: fixed;
			margin: 0;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			color: #FFFFFF;
			background: #1A1E27;
			background: rgba(26, 30, 39, var(--background-opacity));

			display: none;
			z-index: 1;

			overflow-x: hidden;
			overflow-y: auto;

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu nav.active {
			display: block;

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb {
			padding: 0;
			margin-top: 7.5rem;
			list-style: none;
			display: inherit;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li {
			padding: inherit;
			margin-right: 0;
			margin-bottom: 2rem;
			width: 100%;

			color: inherit;
			background-color: rgba(42, 81, 161, 0.0);
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li:hover {
			color: #588FF9;
			background-color: transparent;

			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li.active {
			color: #FFFFFF;
			border-bottom: none;
		}
		div.header-wrap header div.responsive-menu nav ul.gnb > li.active:hover {
			color: #588FF9;
			border-bottom: none;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li.active span,
		div.header-wrap header div.responsive-menu nav ul.gnb > li.active:hover span{
			padding-bottom: 0.5rem;
			padding-left: 1rem;
			padding-right: 1rem;
			color: inherit;
			border-bottom: 3px solid #FFFFFF;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li.active:hover span{
			color: inherit;
			border-bottom: 3px solid #588FF9;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li > a {
			color: inherit; 
		}

		div.header-wrap header div.responsive-menu div.btn-menu {
			display: inline-block;
			z-index: 2;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub {
			position: relative;
			margin: 0;
			padding: 0;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
	
			list-style: none;
			display: none;
	
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub::before,
		div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub::after {
			content: none;
		}


		div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li {
			padding: inherit;
			margin-right: 2.5rem;
			padding-top: 0.25rem;
			float: left;
			width: 100%;
	
			text-align: center;
			line-height: 2.6rem;
	
			background-color: rgba(42, 81, 161, 0.0);
			border-bottom: 3px solid transparent;
	
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	
		div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li:first-child {
			padding-left: 0;
		}

		div.header-wrap header div.responsive-menu nav ul.gnb > li.active ul.gnb-sub span,
		div.header-wrap header div.responsive-menu nav ul.gnb > li.active:hover ul.gnb-sub span{
			border-bottom: 0;
		}
	}

	/**
	 * Footer Bar
	 */
	footer {
		position: relative;
		padding: 0 0;
		text-align: left;
		height: auto;
	}

	footer div.fnb {
		margin: 0;
		padding: 0;
	}

	footer div.fnb ul {
		float: left;
		margin: 0;
		padding: 0;
		padding-right: 2rem;
		height: 100%;
		list-style: none;
	}

	footer div.fnb ul div.title {
		float: left;
	}

	footer div.fnb ul:last-child {
		padding-right: 0rem;
	}

	footer div.fnb ul:hover div.title {
		color: #2952A1;
	}

	footer div.fnb ul > li {
		float: left;
		padding: inherit;
		margin-left: 0.5rem;
		margin-right: 0.5rem;

		text-align: left;
		background-color: transparent;

		cursor: pointer;
	}

	footer div.fnb ul li:first-child {
		margin-left: 0rem;
	}

	footer div.fnb ul li:last-child {
		margin-right: 0rem;
	}

	footer div.fnb ul > li:hover {
		color: #588FF9;

		transition: 0.3s;
		-webkit-transition: 0.3s;
	}

	footer .copyright {
		display: inline-block;
	}

	@media (max-width: 1280px) { /* 1024px */
		footer {
			position: relative;
			padding: 0 1rem;
			text-align: left;
			height: auto;
		}

		footer div {
			flex-direction: column;
		}

		footer > div > div {
			width: 100%;
			display: inline-block;
		}

		footer div.fnb ul {
			margin: 0rem;
			margin-bottom: 1rem;
			padding: inherit;
			width: 100%;
		}

		footer div.fnb ul > li {
			padding: inherit;
			margin: 0;
			width: 100%;
		}

		footer div.copyright {
			text-align: center;
		}
	}

	/**
	 * Section & Article
	 */
	section {
		position: inherit;
	}

	article {
		position: relative;
		padding: 0;
		text-align: left;
		height: auto;

		display: inline-block;
	}

	/**
	  * Articles
	*/
	article.article-common div.articles {
		margin-top: 1rem;
	}

	/**
	 * Main Banners
	 */
	article.banner-main {
		position: relative;
		min-height: 25rem;
		text-align: left;
		height: auto;
	}

	div.banner-major {
		position: relative;
		min-height: 17.5rem;
		text-align: left;
		height: auto;
	}

	div.banner-major:first-child {
		margin-right: 1rem;
	}

	article.banner-large {
		position: relative;
		min-height: 12.5rem;
		text-align: left;
		height: auto;
	}

	div.banner-middle {
		position: relative;
		min-height: 17.5rem;
		text-align: left;
		height: auto;
	}

	div.banner-middle:first-child {
		margin-right: 1rem;
	}

	@media (max-width: 767px) { /* 1024px */
		div.banner-major:first-child,
		div.banner-middle:first-child {
			margin-bottom: 1rem;
		}

		div.banner-major:first-child,
		div.banner-middle:first-child {
			margin-right: 0rem;
		}
	}