/* 
	PEOPLUS Squared Design Stylesheet

	Last Updated : 23/04/26

	(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,
	div.arrow-link\:top,
	div.arrow-link\:bottom {
		display: block;
		color: #588FF9;
		position: relative;
		cursor: pointer;
	}

	div.arrow-link\:top,
	div.arrow-link\:bottom {
		color: #2952A1;
	}

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

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

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

	div.arrow-link\:top::before {
		content: "\f062";
	}

	div.arrow-link\:bottom::before {
		content: "\f063";
	}

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

	/**
	 * Header Bar
	 */
	div.header-wrap header {
		z-index: 1;
		position: relative;
	}

	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.btn-login {
		padding: 0.25rem 0.75rem;
		color: #588FF9;
		background: #FFFFFF;
		cursor: pointer;
	}

	div.header-wrap header div.responsive-menu div.btn-login:hover {
		color: #FFFFFF;
		background: #588FF9;

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

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

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

	/**
	 * Header Navigation Bar
	 */
	div.header-wrap header div.responsive-menu div.btn-menu {
		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;
		display: inline-block;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb {
		margin: 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;

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

		border-radius: 0.5rem;
		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;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li:last-child {
		margin-right: 0;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li > a {
		padding-left: 1rem;
		padding-right: 1rem;
		color: #2952A1; 
		cursor: pointer;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover {
		background-color: rgba(42, 81, 161, 0.1);

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

	div.header-wrap header div.responsive-menu nav ul.gnb > li:hover ul.gnb {
		display: block;

		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: #2952A1;
		border-bottom: 3px solid #2952A1;
		border-bottom-left-radius: 0.25rem;
		border-bottom-right-radius: 0.25rem;
		
		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 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;
		z-index: -1;

		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: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%;
		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: 0%;
		left: 0;
		width: 100%;
		height: 100%;

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

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li {
		padding: 0.25rem 1.25rem 0 1rem;
		text-align: center;

		background-color: #2952A1;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: 1px solid #D1D8E4;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);

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

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

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li:first-child {
		border-top-left-radius: 0.5rem;
		border-top-right-radius: 0.5rem;
	}

	div.header-wrap header div.responsive-menu nav ul.gnb li ul.gnb-sub > li:last-child {
		border-bottom-left-radius: 0.5rem;
		border-bottom-right-radius: 0.5rem;
		border-bottom: 0px solid #D1D8E4;
	}

	@media (max-width: 1000px) { /* 1024px */
		div.header-wrap header div.responsive-menu nav,
		div.header-wrap header div.search-form-box,
		div.header-wrap header div.btn-login {
			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;

			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 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: transparent;
			border-bottom: 0px solid transparent;
			box-shadow: none;
	
			-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;
		}

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

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

	footer div.fnb {
		margin: 0;
		padding: 0;
		display: inline-block;
	}

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

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

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

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

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

		cursor: pointer;
	}

	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 {
		width: 100%;
		display: inline-block;
	}

	footer .company-info {
		width: 100%;
		display: inline-block;
	}

	footer .company-info .contents {
		display: none;
	}

	footer .company-info .contents.active {
		display: block;
	}

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

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

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

	/**
	 * 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;
		}
	}