@charset "utf-8";

/* 템플릿 페이지 전용 헤더 스크롤 애니메이션 스타일 */

:root {
	--template-header-top-height: 44px;
	--template-header-height: 69px;
	--template-header-total-height: calc(var(--template-header-top-height) + var(--template-header-height));
}

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

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

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

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

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

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

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

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

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

body.template-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;
}

/* 반응형 설정 */
@media screen and (max-width: 1000px) {
	:root {
		--template-header-top-height: 32px;
		--template-header-height: 61px;
		--template-header-total-height: calc(var(--template-header-top-height) + var(--template-header-height));
	}
	
	#contents.allow-mobile {
		padding-top: var(--template-header-total-height);
	}
	
	#contents.allow-mobile .header-menu {
		transition: height 0.2s;
		height: 32px;
	}
	
	.scrolling #contents.allow-mobile .header-menu {
		height: 0;
	}
	
	.scrolling #contents.allow-mobile .header-menu-ul {
		display: none;
	}
	
	/* 모바일에서 검색 영역 위치 조정 */
	.template-search-wrap {
		top: var(--template-header-total-height) !important;
	}
	
	body.template-header-hidden .template-search-wrap {
		top: 0 !important;
	}
	
	body.template-header-partial .template-search-wrap {
		top: var(--template-header-height) !important;
	}

	/* mainWrapper에 검색 영역 높이만큼 패딩 추가 */
	.template .mainWrapper {
		padding-top: 60px;
	}

	body.template-header-partial .template-header-container #header {
		transform: translateY(0);
	}
}


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



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


/*#######################################*/
@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) {
	#contents.allow-mobile .header-inner .right > ul > li:is(.nav-experience, .nav-termOfUse, .nav-myprint, .nav-laboratory){
		display: none !important;
	}

	.header-inner {padding: 0 40px;}
	.header-inner nav li{margin-left: 30px;}
} /*반응형 1500px 끝*/



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

	.header-inner nav li{
		margin-left: 28px;
	}



} /*반응형 1380px 끝*/
/*#####################################*/
@media screen and (max-width: 1200px) {
	.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:93px}
	#contents.allow-mobile .header-menu{
		transition: height 0.2s;
		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;
	}

	#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-menu{
		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: 48px 28px 30px;
		z-index: 10000000;
		position: fixed;
		top: -1px;
		left: 0;
		box-sizing: border-box;
		overflow-y: auto;
		min-width: 280px;
	}

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

	.mobile-menu  .user-info-mobile{
		padding: 16px 0;
		border-bottom: 1px solid #EDEDED;
	}
	.mobile-menu .user-info-mobile .name-wrap{
		display: flex;
		width: 100%;
		text-align: center;
		gap: 8px;
		border-radius: 20px;
		padding: 8px 0;
		box-sizing: border-box;
	}

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

	.mobile-menu .user-info-mobile .name-wrap .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;
	}

	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list ul{
		height: 0;
		overflow: hidden;
		display: flex;
		flex-flow: column;
		gap: 8px;
		transition: 0.3s height;
	}
	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list ul :first-child{
		padding-top:8px;
	}
	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list 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 1px 8px;
		transition: 0.2s rotate;
	}
	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list.on ul{
		height: 172px;
	}
	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list.on .arrow{rotate: 180deg;}
	.mobile-menu .user-info-mobile .user-menu-wrap .mypage-list ul li{
		font-size: 16px;
		font-weight: 400;
		line-height: 35px;
	}

	.mobile-menu .gnb-mobile,
	.mobile-menu .user-info-mobile .user-menu-wrap{
		display: flex;
		flex-flow: column;
		gap: 8px;
		width: 100%;
	}
	.mobile-menu .gnb-mobile{
		padding:16px 0;
	}

	.mobile-menu .gnb-mobile li{
		display: block;
		width: 100%;
		text-align: left;
		position: relative;
	}

	.mobile-menu .gnb-mobile li:after{
		content: "";
		display: block;
		clear: both;
	}
	.mobile-menu .gnb-mobile li.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;
	}

	.mobile-menu .gnb-mobile li a,
	.mobile-menu .user-info-mobile .user-menu-wrap > div > a{
		display: inline-block;
		text-align: left;
		font-size: 16px;
		line-height: 35px;
		letter-spacing: -0.05em;
		color: #111 !important;
		font-weight: 700;
		width: 100%;
	}

	.sc-mobile{
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		padding-top: 16px;
		border-top: 1px solid #EDEDED;
		padding-bottom: 60px;
	}

	.sc-mobile li{
		display: block;
		width: 100%;
		background-color: #F2F2F2;
		height: fit-content;
		line-height: 43px;
		font-size: 16px;
		letter-spacing: -0.03em;
		color: #000;
		font-weight: 700;
		text-align: center;
		box-sizing: border-box;
	}
	.sc-mobile .btn-yellow{
		background-color: var(--main-color);
	}
	.sc-mobile li a{
		color:#000;
		display: block;
	}

	.close-mobile-menu {
		display: block;
		position: absolute;
		width: 40px;
		height: 40px;
		top: 23px;
		right: 17px;
		background: url('../../images/default/close/btn_close-36x36.svg') center no-repeat;
		background-size: 24px 24px;
	}





} /*반응형 1000px 끝*/



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

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

	#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){
	.template-header-container{

	}

	body.template-header-partial .sidebar,
	body.template-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 끝*/