@charset "utf-8";
@import "../default/animation.css";
:root {
	--header-top-height: 30px;
	--header-height: 69px;
	--top-banner-height:40px;
	--header-total-height: calc(var(--header-top-height) + var(--header-height) + var(--top-banner-height));
}

#contents.allow-mobile .header-menu{
	min-width: 280px;
}

#contents.allow-mobile .header-menu-ul{
	min-width: 280px;
}

.header-inner .right .profile > a{
	max-width: 250px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.open-mobile-menu{
	display: none;
}


.mobile-menu{
	display: none !important;
}

.mobile-menu.active{
	display: none !important;
}

/* 템플릿 헤더 컨테이너 */
.header-container #header {
	position: fixed;
	top: -1px;
	left: 0;
	right: 0;
	z-index: 994;
	transform: translateY(0);
	will-change: transform;
	transition: transform 0.3s ease-in-out;
}

/* 스크롤 다운 시 헤더 완전히 숨김 */
body.header-hidden .header-container #header {
	transform: translateY(calc(-1 * var(--header-total-height)));
}

/* 스크롤 업 시 헤더 하단 부분만 보임 */
body.header-partial .header-container #header {
	transform: translateY(calc(-1 * calc(var(--header-top-height) + var(--top-banner-height))));
}

/* body padding top 설정 (헤더가 고정되어 있으므로) */
body .scroll-header {
	padding-top: var(--header-total-height);
	transition: padding-top 0.3s ease-in-out;
}

/* 헤더가 완전히 숨겨질 때 body padding-top 제거 */
body.header-hidden .scroll-header {
	padding-top: 0;
}

/* 헤더가 부분적으로 보일 때 body padding-top 조정 */
body.header-partial .scroll-header{
	padding-top: var(--header-height);
}

body.header-hidden .sidebar-section,
body.header-hidden .sidebar{
	top: 0 !important;
}

body.header-hidden .sidebar{
	padding-top: 0;
}

body.header-partial .sidebar-section,
body.header-partial .sidebar{
	top: var(--header-height) !important;
}

body.header-partial .sidebar{
	padding-top: 0;
}

/* mainWrapper에 검색 영역 높이만큼 패딩 추가 */
.template .mainWrapper {
	box-sizing:border-box;
	width:100%;
	display:flex;
	flex-direction:column;
	padding-right:116px;
	padding-left:116px;
}


/* =========================================================
   AI 디자이너 GNB 버튼 hover 메뉴 패널
   Figma : GNB/AIDesignerMenuButton (17623:29987)
   ========================================================= */
.header-inner nav li.aichat .ai-designer-menu{
	display:none;
	position:absolute;
	top:100%;
	left:0;
	z-index:10;
	box-sizing:border-box;
	gap:15px;
	align-items:flex-start;
	padding:15px;
	background:#FFFFFF;
	border:1px solid #E0E1E5;
	border-radius:14px;
	box-shadow:2px 2px 8px 0 rgba(44, 45, 47, 0.1);
	cursor:default;
}

.header-inner nav li.aichat:hover .ai-designer-menu{
	display:flex;
}

/* 왼쪽 메뉴 목록 */
.header-inner nav li.aichat .ai-designer-menu__list{
	display:flex;
	flex-direction:column;
	width:180px;
}

.header-inner nav li.aichat .ai-designer-menu__list > li{
	display:block;
	width:100%;
	height:40px;
	margin:0;
	padding:0;
	border-radius:6px;
}

.header-inner nav li.aichat .ai-designer-menu__list > li:hover,
.header-inner nav li.aichat .ai-designer-menu__list > li.is-active{
	background-color:#F3F5F8;
}

.header-inner nav li.aichat .ai-designer-menu__list > li > a{
	display:flex;
	align-items:center;
	box-sizing:border-box;
	height:100%;
	padding:10px 14px;
	font-size:14px;
	font-weight:400;
	line-height:normal;
	letter-spacing:-0.28px;
	color:#3F4250;
}

.header-inner nav li.aichat .ai-designer-menu__list > li > a[href]{
	cursor:pointer;
}

/* 중앙 구분선 */
.header-inner nav li.aichat .ai-designer-menu__divider{
	flex:0 0 1px;
	align-self:stretch;
	background:#E6E7EA;
}

/* 오른쪽 미리보기 */
.header-inner nav li.aichat .ai-designer-menu__preview{
	align-self:stretch;
	width:270px;
}

.header-inner nav li.aichat .ai-designer-menu__preview-item{
	display:none;
	flex-direction:column;
	gap:15px;
}

.header-inner nav li.aichat .ai-designer-menu__preview-item.is-active{
	display:flex;
}

.header-inner nav li.aichat .ai-designer-menu__preview-media{
	box-sizing:border-box;
	width:100%;
	height:182px;
	background:#F3F5F8;
	border:1px solid rgba(0, 0, 0, 0.08);
	border-radius:10px;
	overflow:hidden;
}

.header-inner nav li.aichat .ai-designer-menu__preview-media img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.header-inner nav li.aichat .ai-designer-menu__preview-info{
	display:flex;
	flex-direction:column;
	gap:8px;
	padding:0 6px;
}

.header-inner nav li.aichat .ai-designer-menu__preview-title{
	display:flex;
	align-items:center;
	gap:5px;
	font-size:14px;
	font-weight:500;
	line-height:19px;
	letter-spacing:-0.28px;
	color:#20232A;
}

.header-inner nav li.aichat .ai-designer-menu__preview-title img{
	display:block;
	width:18px;
	height:18px;
}

.header-inner nav li.aichat .ai-designer-menu__preview-desc{
	min-height:39px;
	margin:0;
	padding:0 1px;
	font-size:13px;
	font-weight:400;
	line-height:1.5;
	letter-spacing:-0.13px;
	color:#70777F;
}

.header-inner nav li.aichat .ai-designer-menu__preview-more{
	display:inline-flex;
	align-self:flex-start;
	align-items:center;
	gap:4px;
	font-size:12px;
	font-weight:400;
	line-height:14px;
	letter-spacing:-0.24px;
	color:#AAACB0;
	cursor:pointer;
}

.header-inner nav li.aichat .ai-designer-menu__preview-more i{
	display:block;
	width:4px;
	height:7px;
	background:url("../../images/aichat/gnb/icon_arrow_more.svg") no-repeat center/4px 7px;
	transform:rotate(180deg);
}


/*여기 부터는 반응형 스타일*/



/*#######################################*/


/*#######################################*/
@media screen and (max-width: 1920px) {

}



/*#######################################*/
@media screen and (max-width: 1700px) {

} /*반응형 1600px 끝*/



/*#######################################*/
@media screen and (max-width: 1600px) {

	/*.top-banners {left:376px !important;}*/

} /*반응형 1600px 끝*/



/*#######################################*/
@media screen and (max-width: 1500px) {

	.header-menu-ul{padding: 0 40px;}
	.header-inner {padding: 0 40px;}
	.header-inner nav li, .header-inner nav .subGnb li{
		margin-left: 16px;
	}
	.header-inner nav .subGnb li:first-child{margin-left: 0;}
} /*반응형 1500px 끝*/



/*#####################################*/
@media screen and (max-width: 1380px) {

	.header-inner nav li, .header-inner nav .subGnb li{
		margin-left:4px;
	}

} /*반응형 1380px 끝*/

@media screen and (max-width: 1280px){
	#contents.allow-mobile .header-inner .right > ul > li:is(.nav-experience, .nav-termOfUse, .nav-myprint, .nav-laboratory){
		display: none !important;
	}
}

/*#####################################*/
@media screen and (max-width: 1200px) {
	.header-menu-ul{padding: 0 20px;}
	.header-inner{padding: 0 20px;}
	.header-inner nav li:first-child{margin-left:0;}
	.header-inner .right .profile span{display: none;}
}/*반응형 1160 끝*/

/*#####################################*/
@media screen and (max-width: 1160px) {


	.header-inner .right .profile > a{
		max-width: 200px;
	}





} /*반응형 1160px 끝*/


/*#####################################*/
@media screen and (max-width: 1080px) {


	.header-inner .right .profile > a{
		max-width: 160px;
	}



} /*반응형 1080px 끝*/



/*#######################################*/
@media screen and (max-width: 1000px) {
	:root {
		--header-top-height: 32px;
		--header-height: 61px;
	}
	header .header-sns{
		display:none;
	}

	#contents.allow-mobile .header-inner nav{
		display: none;
	}
	#contents.allow-mobile .header-inner .right > ul > li:not(.nav-login, .nav-join){
		display: none !important;
	}
	#contents.allow-mobile{padding-top:calc(var(--header-height) + var(--header-top-height) + var(--top-banner-height))}
	#contents.allow-mobile .header-menu{
		transition: height 0.2s;
		--header-top-height: 32px;
	}
	#contents.allow-mobile .header-menu-ul{
		padding: 0 10px;
		height: var(--header-top-height);
	}

	#contents.allow-mobile .header-menu-ul li {
		font-size: 13px;
		height: calc(100% - 1px);
		margin-top: 2px;
		width: 180px;
		
		&.spacer{
			width:1px;
			height:14px;
		}
	}

	#contents.allow-mobile .header-menu-ul li a{
		line-height: 30px;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	#contents.allow-mobile .header-menu-ul li a .ico-free{
		top: 5px;
	}

	#contents.allow-mobile .header-menu-ul li :is(.deco-left, .deco-right){
		display: none;
	}
	.scrolling #contents.allow-mobile #header{
		--header-top-height:0;
	}
	
	.scrolling #contents.allow-mobile .top-banners{
		--top-banner-height:0;
	}

	.scrolling #contents.allow-mobile .header-menu-ul{
		display: none;
	}

	/*.scrolling .header-menu-ul-active span.deco-right::after,*/
	/*.scrolling .header-menu-ul-active span.deco-left::after,*/
	/*.scrolling .header-menu-ul-active span.deco-right::before,*/
	/*.scrolling .header-menu-ul-active span.deco-left::before{*/
	/*	bottom: 30px;*/
	/*}*/

	.header-inner{
		padding: 0 15px 0 10px;
	}
	.header-inner .right a{line-height: calc(var(--header-height) - 10px);padding: 5px;}

	.open-mobile-menu{
		display: block;
		width: 40px;
		height: 40px;
		background:#fff;
		float: left;
		border-radius: 5px;
		margin: calc((var(--header-height) - 40px) / 2) 10px 0 0;
	}

	.open-mobile-menu span{
		width: 100%;
		height: 100%;
		background: url('../../images/default/button/btn_hamburger.svg') center no-repeat;
		background-size: 34px 32px;
		display: block;
	}

	.open-mobile-menu:hover{
		background: #f4f4f4;
	}


	.mobile-menu{
		display: none !important;
		width: 100%;
		height: calc(100vh + 1px);
		background: #fff;
		padding:50px 33px 60px;
		z-index:9999;
		position: fixed;
		top: -1px;
		left: 0;
		box-sizing: border-box;
		overflow-y: auto;
		min-width: 280px;

		&.active{
			display:block !important;
		}

		& .close-mobile-menu{
			display:block;
			position:absolute;
			width:40px;
			height:40px;
			top:9px;
			right:10px;
			background:url('../../images/default/close/btn_close-18x18.svg') center no-repeat;
			background-size:18px 18px;
		}

		/* 공통 스타일: gnb-mobile + user-menu-wrap */

		& :is(.gnb-mobile, .user-info-mobile .user-menu-wrap){
			display:flex;
			flex-flow:column;
			width:100%;
			padding-bottom:20px;
		}

		& .user-info-mobile{
			border-bottom:1px solid #EDEDED;

			& .name-wrap{
				display:flex;
				width:100%;
				text-align:center;
				gap:8px;
				border-radius:20px;
				padding-bottom:8px;
				box-sizing:border-box;

				& .division{
					font-size:14px;
					font-weight:400;
					color:#fff;
					border-radius:30px;
					width:62px;
					height:25px;
					display:flex;
					justify-content:center;
					align-items:center;
				}

				& .name{
					font-size:16px;
					color:#222 !important;
					font-weight:700;
					line-height:25px;
					width:calc(100% - 70px);
					text-align:left;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
				}
			}

			& .user-menu-wrap{
				& > *{
					& > a{
						display:inline-block;
						text-align:left;
						font-size:17px;
						line-height:40px;
						letter-spacing:-0.51px;
						color:#1C1D1F;
						font-weight:600;
						width:100%;
					}

					&.mypage-list{
						& ul{
							height:0;
							overflow:hidden;
							display:flex;
							flex-flow:column;
							transition:0.3s height;

							& li{
								font-size:16px;
								font-weight:400;
								line-height:40px;
							}
						}

						& span.arrow{
							width:14px;
							height:7px;
							display:inline-block;
							background-image:url(../../images/default/arrow/btn_arrow_14x7.svg);
							background-repeat:no-repeat;
							margin:0 0 2px 8px;
							transition:0.2s rotate;
						}

						&.on{
							& ul{
								height:160px;
							}

							& .arrow{
								rotate:180deg;
							}
						}
					}
				}


			}
		}

		& .gnb-mobile{
			&:not(:first-child){
				padding-top:20px;
			}

			& ul{
				& li{
					display:block;
					width:100%;
					text-align:left;
					position:relative;

					&:after{
						content:"";
						display:block;
						clear:both;
					}

					& a{
						display:inline-block;
						text-align:left;
						font-size:17px;
						line-height:40px;
						letter-spacing:-0.51px;
						color:#1C1D1F;
						font-weight:600;
						width:100%;
					}

					& .header-new::after{
						content:"\004e\0045\0057"; /* NEW */
						display:inline-block;
						position:absolute;
						left:68px;
						bottom:10px;
						padding:0 7px;
						margin:-13px 0 0 8px;
						height:16px;
						line-height:15px;
						font-size:10px;
						font-weight:500;
						letter-spacing:0;
						background:linear-gradient(to top, #5BD2A7, #65DB9F);
						border-radius:2px;
						color:#FFFFFF;
					}
					
					&.aichat a{
						display:block;
						height:40px;
						width:109px;
						background:url("/common/responsive/images/aichat/logo_ai_designer_black.svg") no-repeat center;
					}
				}

				&.sub-gnb li a{
					color:#3F4250;
					font-weight:400;
				}
			}
		}
		
		& .sc-mobile{
			display:flex;
			flex-wrap:wrap;
			gap:16px;
			padding-top:30px;
			border-top:1px solid #EDEDED;
			padding-bottom:60px;

			& li{
				width:100%;
				height:fit-content;
				display:block;
				box-sizing:border-box;

				& div{
					width:100%;

					& button{
						width:100%;
						font-weight:400
					}
				}
			}
		}
	}





} /*반응형 1000px 끝*/



/*#######################################*/
@media screen and (max-width: 800px) {
	.page-navigation{
		width: 42px;
		height: 42px;
		bottom: 16px;
		right: 73px;
	}
	.page-navigation a{background-position: 11px 15px;width:42px;height: 42px}

} /*반응형 800px 끝*/





/*#######################################*/
@media screen and (max-width: 700px) {

} /*반응형 700px 끝*/




/*#######################################*/
@media screen and (max-width: 600px) {


	.header-inner h1{
		width: 130px;
		background-size: 130px 17px;
	}

	#contents.allow-mobile .header-menu-ul{
		min-width: 0px !important;
	}

	#contents.allow-mobile .header-menu-ul li{
		width: 134px !important;
		
		&.spacer{
			width:1px !important;
			height:14px;
		}
	}

	#contents.allow-mobile .header-menu-ul li.header-menu-ul-active{
		width: 100px !important;
	}
	#contents.allow-mobile .header-menu-ul li.header-menu-ul-active a{
		width: 100% !important;
	}
	#contents.allow-mobile .header-menu-ul li .ico-free{
		display: none;
	}
} /*반응형 600px 끝*/








/*#######################################*/
@media screen and (max-width: 450px) {
	.header-inner nav li, .header-inner .right li{
		margin-left: 5px;
	}
	.header-inner .right li a{
		font-size: 14px;
	}
	.header-inner h1 {
		width: 100px;
		background-size: 100px 15px;
	}
	.open-mobile-menu{
		margin-right: 5px;
	}

} /*반응형 450px 끝*/



/*#######################################*/
@media screen and (max-width: 420px) {


} /*반응형 420px 끝*/

@media screen and (max-width: 400px){
	.header-container{
	
	}
	
	body.header-partial .sidebar,
	body.header-hidden .sidebar{
		top: unset !important;
	}
} /*반응형 400px 끝*/


/*#######################################*/
@media screen and (max-width: 340px) {



} /*반응형 340px 끝*/



/*#######################################*/
@media screen and (max-width: 330px) {


	#contents.allow-mobile .header-menu-ul li{
		width: 154px !important;
	}
} /*반응형 330px 끝*/