/*
 *  Zname.com - v2.0.0 - 2023-10
 *  Author: DH
 *  Content:index
 */
:root{
	--header-nav-bg:linear-gradient(90deg,#19192f,#1a1a30);
	--header-nav-height:5.5rem;
	--header-nav-fixed-height:5rem;
	--header-dark-bg:linear-gradient(150deg,#284cb6,#060c40);
}

/*--------------------------------------------------
header
-------------------------------------------------- */
.header{justify-content: flex-end;z-index:99;width: 100%;height:var(--header-nav-height);background: rgb(255 255 255 / 0%);transition: height 0.3s, background 0.3s;}
.header-fixed{position: fixed;width: 100%;top: 0;height:var(--header-nav-fixed-height); background: rgb(255 255 255 / 100%);box-shadow: 0 .3rem .8rem rgba(0,0,0,.1)!important;transition: height 0.3s, background 0.3s;}
/*logo*/
.header .navbar-brand{overflow:hidden;line-height: 2.66rem;}
.header .navbar-brand img{height:1.35rem;}
.header .navbar-brand::after{content:"\e602";font-family: "iconfont" !important;font-size: 0.8rem;margin-left: 1rem;}
/*navbar-toggler*/
.header.navbar-light .navbar-toggler {color: #2a3283;padding: .4rem .9rem;border: none;background: rgb(137 137 226 / 14%);}
.header.navbar-light .navbar-toggler .iconfont{font-size: 1.6rem;}
/*nav*/
.header .navbar-collapse {display: flex!important;falign-items: center;justify-content: flex-end;justify-content: space-between;transition:all 0.3s;}
.header .nav-item .nav-link {padding: 2rem 0.3rem;color:#222;font-size: 1rem;}
.header .navbar-nav .iconfont{font-size: 1.125rem;}
.header .ai-icon{width:50px;text-align: center;padding-top: 15px;}
.header .header-nav .dropdown-menu{top:3.5rem;border: none;box-shadow: 0 .3rem .8rem rgba(0,0,0,.1)!important;border-radius:0.625rem;padding:.6rem;transition:all 0.3s;}
.header .header-nav .submenu-full .dropdown-menu{top:5.5rem;}
.header-fixed .header-nav .submenu-full .dropdown-menu{top:5rem;transition:all 0.3s;}
.header .dropdown-toggle::after{content:"\e87e";font-family: "iconfont" !important;transform: rotate(0deg);border: none;font-size: .86rem;vertical-align: middle;margin-left: .4rem;transition:all 0.3s;}
.header .navbar-nav-left .nav-item{padding:0 .5rem;}
.header .navbar-nav-right{align-items: center;}
.header .navbar-nav-right .nav-item{padding-left: .5rem;}
.header .nav-hint{display: inline-block;position: relative;}
.header .nav-hint .badge{position: absolute;left:1.1rem;top:-.38rem; font-size: 0.777rem;color: #fff;background: #ff9421;padding: .3rem;}
/*full*/
.header .navbar-nav .submenu-full{position: static;}
.header .navbar-nav .submenu-full .container-fluid,
.header .navbar-nav .submenu-full .container{display:block!important}
.header .navbar-nav .submenu-full .dropdown-menu{width: 100%;position: absolute;border-radius: 0;min-height:17rem;
	border-top: solid 1px rgba(80,101,168,0.6);opacity: 0.97;padding: 3rem 1rem 2rem;margin-top: -1px;
	background: var(--header-dark-bg)}
.header .navbar-nav .dropdown-menu a:focus{background:#4150e3!important;}
.header .navbar-nav .submenu-full>div:first-child {margin-top: 45px;}
.submenu-full>div:first-child {margin-top: 45px;}
.submenu-full .submenu-list {padding-left: 1.66rem;
	border-left: 1px solid;
	border-color: rgba(251, 253, 255, 0.2);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	flex-direction: column;
	align-content: flex-start;}
.submenu-full .subment-sub-list-two{flex-direction: row;}
.submenu-full .subment-sub-list-two .submenu-text{min-width: 50%}
.menu-title {font-weight: 500;font-size: 1.55rem;line-height:1.5;display: flex;align-items: center;letter-spacing: -0.01em;color: #FBFDFF;}
.menu-title-text {font-weight: 400;font-size:1rem;line-height:.888;display: flex;align-items: center;color: #FBFDFF;opacity: 0.6;margin-top: 10px;}
.submenu-title {
	width: 100%;
	font-weight: 500;
	font-size: 1rem;
	line-height: 1.33rem;
	display: flex;
	align-items: center;
	letter-spacing: -0.01em;
	color: #FBFDFF;
	opacity: 0.4;
}
.submenu-text {font-weight: 400;font-size: 1rem;line-height: 1.8rem;display: flex;align-items: center;margin-top: 0.55rem;}
.submenu-text a {color: #FBFDFF;}
.submenu-text a:hover {color: #ffb926 !important;text-decoration: none !important;}
.nav-side-submenu-link .fa-angle-right {color: #FBFDFF;opacity:0;}
.submenu-text .fa-angle-right {color: #FBFDFF;opacity: 0;}
.submenu-text .fa-angle-right:hover {opacity:1;}
.nav-side-submenu-link .faFade{animation:fadeInAnimation ease 0.5s;animation-fill-mode:forwards;}
.submenu-text .faFade{animation:fadeInAnimation ease 0.5s;animation-fill-mode:forwards;}
@keyframes fadeInAnimation {0% {opacity: 0;}100% {opacity: 1;}}
@keyframes fadeOutAnimation {0% {opacity: 1;}100% {opacity: 0;}}
.header .dropdown-item:focus{background-color: #1fe3e7;}
.header.nav-item {height: 100%;display: flex;align-items: center;}
.header .nav-link img {border-radius: 10rem;height: 1.45rem;width: 1.45rem;vertical-align: middle;display: inline-block;background:var(--subject-color);}
.header .nav-user{padding-right: 0.5rem;margin-left: 1rem;}
.header .navbar-nav-right .nav-item .nav-link,
.header .nav-user .nav-profile-name{font-size: 1rem;}
.header .nav-link.active{font-weight: bold;background: linear-gradient(to right, #4150e3, #4150e3);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;}
.header-fixed.header .nav-user{box-shadow:none!important;background: none;}
.header .navbar-nav-left .nav-link{font-weight: bold;}
.header .header-btn{border-radius: 0.16rem;color: #333333; padding:0 2rem;line-height: 2.33rem;border: solid 1px #b6b9bb;transition: all 0.15s;font-weight: normal;margin-top: 0.2rem;}
.header .header-btn:hover{color: #fff;transition: all 0.15s;background: #4150e3;border-color: #4150e3;}
/*nav-user submenu-full*/
.header .navbar-nav .submenu-full.nav-user .dropdown-menu{
	background: #3e61d5;
	background: -webkit-linear-gradient(65deg,#3e61d5,#4e4e8c);
	background: -o-linear-gradient(65deg,#3e61d5,#4e4e8c);
	background: -moz-linear-gradient(65deg,#3e61d5,#4e4e8c);
	background: linear-gradient(65deg,#3e61d5,#4e4e8c);}
/*show*/
.header .show{transition:all 0.5s;}
.header .show>.dropdown-toggle::after{transition: all 0.4s;transform: rotate(180deg);}
.header .navbar-nav .nav-link.active,
.header .navbar-nav .nav-link.show,
.header .navbar-nav .show>.nav-link{color: #2d38a1}
/*header-dark*/
.header-dark{background:var(--header-nav-bg);}
.header-dark.header .navbar-brand img{color: #fff;display: none}
.header-dark.header .navbar-brand .logo_fff{display: inline-block !important}
.header-dark.header .navbar-brand::after {color: #fff}
.header-dark.header .nav-item .nav-link {padding: 2rem 0.3rem;color: #fff;}
.header-dark.header .header-btn{color: #fff;border: solid 1px rgb(255 255 255 / 22%);}
.header-dark.header .header-btn:hover{background: #4150e3;border-color: #4150e3;}
.header-dark.header .navbar-nav .nav-link.active,
.header-dark.header .navbar-nav .nav-link.show,
.header-dark.header .navbar-nav .show>.nav-link {color: #fff;}
.header-dark.header.navbar-light .navbar-toggler{color:#fff;background:rgb(50 50 136)}

@media (max-width:768px){.navbar-collapse:not(.show){display:none!important}
}
@media (max-width:992px){
	.header .navbar-nav{width:100%}
	.header .header-nav.show{padding: 1rem 1rem 2rem;background-color:#fff;box-shadow:0 .3rem 1rem rgba(0,0,0,.12)!important;border-radius:0 0 5px 5px;justify-content:flex-start;flex-direction:column}
	.header-dark.header .header-nav.show {background-color: #1c1f3a;}
	.header .navbar-collapse{position:absolute;width:100%;right:0;top:5.5rem;}
	.header-fixed .navbar-collapse{top:5rem;}
	.header .nav-link.active{border-top:none}
	.header .nav-user{box-shadow:none!important;margin-left:0}
	.header .navbar-nav .submenu-full .dropdown-menu,
	.header .navbar-nav .submenu-full.nav-user .dropdown-menu{position:static;background:#fff;border:none;padding:0}
	.header .navbar-nav .submenu-full .dropdown-menu .menu-title{color:#333}
	.header .navbar-nav .submenu-full .dropdown-menu .menu-title-text,.header .navbar-nav .submenu-full .dropdown-menu .submenu-title{color:#999}
	.header .navbar-nav .submenu-full .dropdown-menu .submenu-text a{color:#666;display: block;background: #f5f5f5;}
	.header .navbar-nav .submenu-full .dropdown-menu .submenu-text a:hover{color:#2a3283!important;background:rgb(137 137 226 / 14%);}
	.navbar-collapse:not(.show){display:none!important}
	.header-dark.header .navbar-nav .submenu-full .dropdown-menu {border-top: none;background: none;}
	.header .header-nav .dropdown-menu{box-shadow: none!important;}
	.submenu-full .submenu-list{border: none;display:contents;align-items: flex-start;justify-content: space-between;flex-wrap: wrap;align-content: flex-start;flex-direction: row;padding: 0;}
	.header .header-btn{width: 48%}
	.header .navbar-nav-right{border-top: 1px solid rgba(0,0,0,.15);margin-top: 1.5rem;}
	.header .navbar-nav-right .nav-item {padding: 0 0.5rem;width: 100%;}
	.header .nav-item .nav-link {width: 100%;display: flex;justify-content: space-between;padding: 0.7rem 0.5rem;}
	.header-dark.header .nav-item .nav-link{padding: .5rem 0}
	.header .nav-hint{display: block;width: 100%}
	.header .nav-hint .badge{right: -0.35rem;left: auto;top: 0;}
	.submenu-full .subment-sub-list-two .submenu-text,
	.header .submenu-text {align-items: center;min-width:49.3%;padding: 0 .25rem;text-align: center;display: block;line-height: 2.5rem;}
	.header .navbar-nav .submenu-full .dropdown-menu{min-height: 0}
	.header .dropdown-menu.show{display: flex;background: none;justify-content: flex-start;overflow: auto}
	.header .dropdown-item{color: #666;display: block;}
	.header .dropdown-item:hover{background:#f5f5f5;}

	/*header-dark*/
	.header-dark.header .navbar-nav-right {border-color:rgb(255 255 255 / 15%);}
	.header-dark.header .navbar-nav .submenu-full .dropdown-menu .submenu-text a {color: rgb(255 255 255 / 80%);display: block;background: rgb(255 255 255 / 7%);}
	.header-dark.header .navbar-nav .submenu-full .dropdown-menu .submenu-text a:hover{color: #fff!important;background: rgb(255 255 255 / 10%);}
	.header-dark.header .dropdown-item{color: #fff}
	.header-dark.header .dropdown-item:hover{background: rgb(255 255 255 / 10%);}

}

/*--------------------------------------------------
sub-header
-------------------------------------------------- */
.sub-header{height:3rem;border-bottom: solid 1px #e9eaec;background: #fff;position:relative;z-index:2;height:2.75rem;overflow-y:hidden}
.sub-header .sub-nav{display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;margin-top:-1px;overflow-x:auto;color:rgba(255,255,255,.75);text-align:center;white-space:nowrap;-webkit-overflow-scrolling:touch}
.sub-header a{line-height: 2.75rem;margin-right:2rem; color: #666;transition: all 0.4s;position: relative;}
.sub-header a::after{content: "";background: rgba(0,0,0,0.00);width: 100%;height: .2rem; position: absolute;bottom: 0;left: 0;}
.sub-header a:hover{color: #444;}
.sub-header a.active{color: var(--subject-color);font-weight: bold;}
.sub-header a.active::after{background:var(--subject-color);transition: all 0.4s;}

.sub-header-dark{position: absolute;width: 100%;border: none;background:rgba(25,25,47, .5);z-index: 2;}
.sub-header-dark a{color: #d3ddff;}
.sub-header-dark a:hover{color: #ffb926;}
.sub-header-dark a.active{color:#7f9bff;}
.sub-header-dark a.active::after{background:#7f9bff;}