@charset "utf-8";

#header{
	position: fixed;
	top: 0; left: 0;
	z-index: 9090;
	width: 100%;
	height: 70px;
	background-color: rgba(0,0,0,0.5);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

#header .wrapper{
	width: calc( 100% - 60px );
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 55px;
}

#header .h_logo{
	width: 180px;
}

#header .h_logo a{
	display: block;
	width: 100%;
}

#header .h_logo a img{
	width: 100%;
}

#header .gnb{
	/* position: relative; */
	width: calc(100% - 180px - 50px);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

#header .gnb .gnb-list{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 50px;
}

#header .gnb .gnb-list-item{}

#header .gnb .gnb-list-item a{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 1rem;
	font-weight: var(--fw-600);
	transition: var(--transition);
}

#header .gnb .gnb-list-item.active a{
	background: linear-gradient(to bottom, var(--point01), var(--point02));
	  
	  -webkit-background-clip: text;
	  -webkit-text-fill-color: transparent;
}

#header .gnb .gnb-list-item a i{
	font-size: 0.875rem;
	color: var(--white);
	opacity: 0.6;
	transition: var(--transition);
}

#header .gnb .gnb-list-item:hover a i{
	opacity: 0.85;
	transform: rotate(-180deg);
}

#header .gnb .gnb-list-item a.btn{
	background: linear-gradient(to top, var(--point01), var(--point02));
	font-size: 1rem;
	transition: var(--transition);
}

#header .gnb .btn-start{
	background: linear-gradient(to bottom, var(--point01), var(--point02));
}


@media screen and (max-width: 1600px){
	#header .wrapper{
		width: 95%;
	}
}


@media screen and (max-width: 1200px){
	#header .wrapper{
		/* justify-content: flex-start; */
		gap: 25px;
	}
	#header .hamburger{
		display: block;
		width: 30px; height: 20px;
		position: relative;
	}
	
	#header .hamburger span{
		position: absolute;
		width: 100%; height: 2px;
		background-color: var(--white);
		left: 0;
		transition: var(--transition);
	}
	
	#header .hamburger span:nth-child(1){
		top: 0;
	}
	
	#header .hamburger span:nth-child(2){
		top: 50%;
		transform: translateY()(-50%);
	}
	
	#header .hamburger span:nth-child(3){
		top: calc( 100% - 1px );
	}
	
	#header.open .hamburger span:nth-child(1){
		top: 50%; left: 50%;
		transform: translate(-50%,-50%) rotate(45deg);
	}
	
	#header.open .hamburger span:nth-child(2){
		left: -5px;
		opacity: 0;
	}
	
	#header.open .hamburger span:nth-child(3){
		top: 50%; left: 50%;
		transform: translate(-50%,-50%) rotate(-45deg);
	}
	
	#header .gnb{
		justify-content: flex-end;
	}
	
	#header .gnb .gnb-list{
		position: absolute;
		top: 70px; left: -400px;
		flex-direction: column;
		width: 400px;
		height: calc(100svh - 70px);
		box-sizing: border-box;
		padding: 30px;
		background-color: var(--gray02);
		gap: 0;
		transition: var(--transition);
		z-index: 5;
	}
	
	#header.open .gnb .gnb-list{
		left: 0;
	}
	
	#header .gnb .gnb-list-item{
		width: 100%;
		border-bottom: 1px dashed rgba(255,255,255,0.2);
	}
		
	#header .gnb .gnb-list-item a{
		box-sizing: border-box;
		padding: 22px 10px;
		position: relative;
	}
	
	#header .gnb .gnb-list-item a::after{
		content: "\f105";
		font-family: "Font Awesome 6 Free";
		position: absolute;
		right: 5px;
		top: 50%;
		transform: translateY(-50%);
		color: var(--white);
		font-size: 0.875rem;
		opacity: 0;
		transition: var(--transition);
	}
	
	#header .gnb .gnb-list-item a:hover::after{
		right: 0;
		opacity: 1;
	}
}

@media screen and (max-width: 1000px){
	#header{
		height: 60px;
	}
		
	#header .gnb .gnb-list{
		height: calc( 100svh - 60px );
		top: 60px;
	}
}

@media screen and (max-width: 767px){
	#header .wrapper{
		width: 92.5%;
		gap: 15px;
	}
	
	#header .hamburger{
		width: 25px; height: 17px;
	}
	
	#header .h_logo{
		width: 150px;
	}
	
	#header .gnb {
		width: calc(100% - 150px - 25px - 30px);
	}
	
	#header .gnb .gnb-list{
		width: 350px;
		padding: 20px;
	}
	
	#header .gnb .gnb-list-item a {
		padding: 20px 10px;
		font-size: 0.9375rem;
	}
	
	#header .util-box .coachmark-box .btn-coachmark{
		padding: 7px 12px;
	}
	
	#header .util-box .coachmark-box .btn-coachmark i{
		font-size: 15px;
	}
	
	#header .util-box .coachmark-box .btn-coachmark span{
		font-size: 12px;
	}
	
	#header .user-info-box .user{
		gap: 20px;
	}
	
	#header .user-info-box .user .info{
		gap: 7px;
	}
	
	#header .user-info-box .user .info .profile-img{
		width: 30px; height: 30px;
	}
	
	#header .user-info-box .user .info p{
		font-size: 0.875rem;
	}
	
	#header .user-info-box .user .info p span em{
		font-size: 0.625rem;
	}
	#header .user-info-box .user .info p span small{
		font-size: 0.75rem;
	}
	
	#header .user-info-box .user .btn-toggle{
		padding: 7px 8px;
	}
	
	#header .user-info-box .user .btn-toggle i{
		font-size: 0.8125rem;
	}
	
	#header .util-box{
		gap: 10px;
	}
	
	#header .user-info-box .user{
		gap: 10px;
	}
	#header .user-info-box .user .info p{
		display: none;
	}
	
}


@media screen and (max-width: 500px){
	#header .wrapper{
		gap: 10px;
	}
	
	#header .hamburger{
		width: 22px;
		height: 15px;
	}
	
	#header .h_logo{
		width: 135px;
	}
	
	#header .gnb {
		width: calc(100% - 135px - 25px - 20px);
	}
	
	#header .util-box{
		gap: 10px;
	}
	
	#header .util-box .coachmark-box .btn-coachmark{
		padding: 7px 10px;
	}
	
	#header .util-box .coachmark-box .btn-coachmark i{
		font-size: 14px;
	}
	
	#header .util-box .coachmark-box .btn-coachmark span{
		font-size: 11px;
	}
	
	#header .user-info-box .user{
		gap: 10px;
	}
	#header .user-info-box .user .info p{
		display: none;
	}
	
	#header .user-info-box .user .info .profile-img{
		width: 27px; height: 27px;
	}
	
	#header .gnb .btn-start i{
		display: none;
	}
}







#footer{
	padding: 45px 0;
	background-color: var(--gray02);
}

#footer .wrapper{}

#footer figure{
	display: block;
	width: 180px;
	margin: 0 auto;
	opacity: 0.3;
}

#footer figure img{
	filter: saturate(-100%);
}

#footer figure svg path{
	fill: var(--white);
}

#footer .copyright{
	text-align: center;
	opacity: 0.2;
	margin-top: 20px;
	font-size: 0.9375rem;
}


@media screen and (max-width: 767px){
	#footer figure{
		width: 150px;
	}
	
	#footer .copyright{
		font-size: 0.875rem;
		margin-top: 15px;
	}
}