/* Global Navi Styles ------------------------------------------------------
min-width: 1025px
max-width: 1024px
max-width: 767px
------------------------------------------------------*/
#header{
	position: absolute;
	width: 100%;
	z-index: 999;
	top: 0;
	left: 0;
	transition: .3s;
	text-align: center;
}
#wrapper{
    position: relative;
    width: 100%;
    min-width: 320px;
    overflow: hidden;
}
#logo {
	margin: 0;
	padding: .85rem calc(1rem + 1.5%);
	background: white;
	position: relative;
	height: 80px;
	z-index: 995;
}
#logo a img{
	display: block;
	width: auto;
	width:100%\9;/*IE*/
	max-height: 100%;
}
#gnav a{ background: transparent;}
#gnav ul,
#gnav li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
@media (min-width: 1025px) {
	#header{
		display: block;
	}
	#header .container{
		padding: 1em 0;
		display: flex;
		justify-content: center;
		gap: .5em;
	}
	#logo{
		border-radius: .5rem;
	}
	#gnav{
		padding: .75rem 1.5% .25rem;
		transition: .5s;
		background-color: white;
		border-radius: .5rem;
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		font-size: .95rem;
	}
	#gnav a{
		color: var(--black);
		line-height: 1.5em;
	}
	#gnav:hover {z-index: 6;}
	#gnav > ul { display: flex;}
	#gnav > ul > li > span {
		position: relative;
		display: block;
	}
	#gnav > ul > li > span > a {
		padding: .25rem 1em .75rem;
		display: block;
		transition: .2s;
		position: relative;
		font-weight: 600;
	}
	html:not(.sp) #gnav > ul > li > span > a:hover::after,
	#gnav > ul > li.current > span > a::after{
		border-top: solid 2px var(--primary);
		position: absolute;
		left: 1em;
		bottom: 0;
		content: "";
		width: calc(100% - 2em);
		height: 0;
	}
	#gnav > ul > li{ position: relative;}
	#gnav > ul > li ul{
		margin: 0;
		position: fixed;
		min-width: 12em;
		max-width: 20em;
		height: 0;
		/*top: 5em;*/
		overflow: hidden;
		transition: .6s;
		border-radius: .5rem;
	}
	#gnav > ul > li > ul li{ margin: 0; background: white;}
	#gnav > ul > li > ul li:first-child{ margin-top: auto;}
	#gnav > ul > li > ul li:last-child{ margin-bottom: auto; border-radius: 0 0 .5rem .5rem; overflow: hidden;}
	#gnav > ul li:hover > ul{ height: calc(100% - 5em);}
	#gnav > ul > li > ul li span a{
		padding: .75em 1.5em;
		position: relative;
		display: block;
		border-bottom: solid 1px var(--black-a010);
		border-left: solid 1px var(--black-a005);
		border-right: solid 1px var(--black-a005);
		transition: .2s;
		font-size: .875em;
	}
	#gnav > ul > li > ul li:first-child span a { border-top: solid 1px var(--black-a010);}
	html:not(.sp) #gnav > ul > li > ul > li:hover > span > a,
	#gnav > ul > li > ul > li.parent > span > a {background-color: var(--primary-a025);}
	html:not(.sp) #gnav > ul > li > ul > li > span > a:hover,
	#gnav > ul > li > ul > li.current > span > a,
	html:not(.sp) #gnav > ul > li > ul > li > ul > li > span > a:hover,
	#gnav > ul > li > ul > li > ul > li.current > span > a {background-color: var(--primary-a010) !important;}
	#gnav #snav{
		text-align: right;
		font-size: .85em;
	}
	#gnav #snav a:hover{ text-decoration: underline; text-decoration-style: dotted;}
}
#sp-gnav-btn,
.open-close-btn {display: none;}

@media (max-width: 1024px) {
	body { background-color: white;}
	#header{ background: white;}
	#header .container{ margin: 0; padding: 0;}
	#wrapper{
		transition: .3s;
		background: white;
	}
	#logo{
		padding: .75rem calc(1rem + 1%);
		width: 100vw;
		height: 70px;
		max-width: calc(100vw - 2% - 70px);
	}
	#gnav ul{ text-align: left;}
	#gnav{
		position: fixed;
		width: 100vw;
		max-height: 100vh;
		overflow: scroll;
		background: var(--white-a095);
		border-bottom: solid 1px var(--line-light);
		top: -100%;
		transition: .35s;
	}
	.sp-gnav-open #gnav{ top: 0; z-index: 996}
	#gnav a{
		color: var(--black);
		text-decoration: none;
		line-height: 140%;
		transition: .2s;
	}
	#gnav .current > span > a {background-color: var(--primary);}
	#gnav .parent > span > a {background-color: var(--black-a015);}
	#gnav li > span {
		position: relative;
		display: table;
		width: 100vw;
	}
	#gnav > ul > li > span > a,
	#gnav > ul > li > ul > li > span > a,
	#gnav > ul > li > ul > li > ul > li > span > a{
		display: table-cell;
		height: 3.5em;
		padding: 1.55vh 15px;
/*		font-size: .9em;*/
		border-top: solid 1px var(--black-a010);
		overflow: hidden;
		vertical-align: middle;
		line-height: 1.4;
	}
	#gnav > ul > li > span > a{ background: white; font-weight: bold;}
	#gnav > ul > li > ul > li > span > a {
		padding: 1.25vh 15px 1.25vh 3em;
		transition: .5s;
		border: none;
		height: 2em;
	}
	#gnav > ul > li > ul > li > span > a::after{
		content: "";
		position: absolute;
		border-top: 2px solid var(--primary);
		border-right: 2px solid var(--primary);
		top:  calc( 50% - .25em );
		left: 1.5em;
		width: .5em;
		height: .5em;
		transform: rotate(45deg);
	}
	#gnav > ul ul{
		padding: .5em;
		display: none;
		overflow: hidden;
		border-top: solid 1px var(--black-a010);
	}
	#gnav #snav{ display: none;}
	#sp-gnav-btn{
		position: fixed;
		z-index: 1000;
		display: block;
		top: 5px;
		right: 5px;
		cursor: pointer;
		background: var(--primary);
		border-radius: .5em;
	}
	#sp-gnav-btn::before,
	#sp-gnav-btn::after{
		content: "";
		position: absolute;
		z-index: 1;
		display: block;
		width: 28px;
		height: 2px;
		right: 16px;
		background-color: var(--black);
		transition: .3s;
	}
	#sp-gnav-btn::before{top: 18px;}
	#sp-gnav-btn::after{top: 38px;}
	html:not(.sp) #sp-gnav-btn:hover::before{width: 23px;}
	#sp-gnav-btn a {
		position: relative;
		display: block;
		width: 60px;
		height: 60px;
		padding: 40px 0 0;
		text-decoration: none;
		color: var(--black);
		font-size: .6rem;
		line-height: 140%;
		text-align: center;
		font-weight: bold;
	}
	#sp-gnav-btn a::before{
		content: "";
		position: absolute;
		display: block;
		width: 28px;
		height: 2px;
		top: 28px;
		right: 16px;
		background-color: var(--black);
		transition: .3s;
	}
	html:not(.sp) #sp-gnav-btn:hover a::before{width: 18px;}
	#sp-gnav-btn a span.sp-btn-close{ display: none;}
	.sp-gnav-open #sp-gnav-btn a span.sp-btn-open{ display: none;}
	.sp-gnav-open #sp-gnav-btn a span.sp-btn-close{ display: block;}
/*	.sp-gnav-open #sp-gnav-btn{ right: 265px;}*/

	.sp-gnav-open #sp-gnav-btn::before,
	.sp-gnav-open #sp-gnav-btn::after{
		width: 28px !important;
		top: 27px;
		right: 7;
		-moz-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.sp-gnav-open #sp-gnav-btn::after{
		-moz-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.sp-gnav-open #sp-gnav-btn a::before{width: 0 !important;}

	#gnav > ul > li > span > .open-close-btn,
	#gnav > ul > li > ul > li > span > .open-close-btn {
		display: table-cell;
		width: 40px;
		cursor: pointer;
		transition: .2s;
	}
	#gnav > ul > li > span > .open-close-btn,
	#gnav > ul > li > ul > li > span > .open-close-btn{
		border-left: solid 1px var(--black-a010);
		border-top: solid 1px var(--black-a010);
	}
	#gnav > ul > li > ul > li > span > .open-close-btn {
		background-color: var(--black-a015);
	}
	.open-close-btn{ text-indent: -9999px;}
	.open-close-btn::before,
	.open-close-btn::after{
		content: "";
		position: absolute;
		display: block;
		background-color: var(--black);

	}
	.open-close-btn::before{
		width: 16px;
		height: 2px;
		top: 50%;
		right: 12px;
		margin: -1px 0 0;
	}
	.open-close-btn::after{
		width: 2px;
		height: 16px;
		top: 50%;
		right: 19px;
		margin: -8px 0 0;
		transition: .2s;
	}
	#gnav > ul ul,
	#gnav > ul > li > span > .open-close-btn{
		background-color: white;
		background-image: radial-gradient(var(--primary-a025) 30%, transparent 31%), radial-gradient(var(--warning-a050) 30%, transparent 31%);;
		background-size: 3px 3px;
		background-position: 0 0, 1px 1px;
	}
	.open-close-btn.current::after{
		-moz-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		-o-transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		transform: rotate(90deg);
	}
}

@media (max-width: 767px) {
	/*#logo{ width: calc(100% - 70px);}*/
	#gnav .current > span > a {background-color: var(--primary);}
	#gnav .parent > span > a {background-color: var(--black-a015);}
}

.head-btns{ margin: 0 .25em; display: inline-block;}
@media (min-width: 1025px) and (max-width: 1250px){
	#gnav > ul > li > span > a{/* padding: 1.3vh .75em;*/ font-size: .85em;}
	.head-btns a.btn--pill{ padding-left: .75em; padding-right: .75em; font-size: .85em;}
}
@media (max-width: 1024px) {
	.head-btns{ margin: .5em .25em;}
}
@media (max-width: 767px) {
	.head-btns{ margin: .5em; display: block;}
	.head-btns a{display: block;}
	.head-btns:last-child{ padding-bottom: 2em;}
}