@charset "utf-8";

/************************************* 
Layout Style Sheet
Version : 1.0
Author : uracle(sejong) - sk.k
Create date : 2025. 05.
*************************************/

@media only screen and (max-width:1800px) {
	#quick{
		left: auto;
		right: 0;
		width: auto;
		height: 100%;
	}
	#quick .quick{
		left: auto;
		right: 1rem;
	}
	#quick .weather-box{
		padding: 1rem 0;
		background-color: rgba(245,245,245,0.7);
	}
	.quick-box .quick-list{
		background-color: rgba(226,226,226,0.7);
	}
}
@media only screen and (max-width:1440px) {
	#gnb, 
	#gnb #head-menu{
		width: 80%;
		justify-content: flex-end;
	}
	#gnb #head-menu > li{
		padding: 0 1rem;
	}
	#gnb #head-menu > li > a{
		font-size: 1.6rem;
	}
}
@media only screen and (max-width:1280px){
	#quick{
		left: auto;
		right: 0;
		top : 50%;
		transform: translateY(-50%);
		width: auto;
		height: 100%;
	}
}
@media only screen and (max-width:1024px) {
	html{
		font-size: 9px;
	}
	#gnb #head-menu > li{
		padding: 0 0.5rem;
	}
	#gnb #head-menu .submenu .title{
		padding: 3rem 2rem;
	}
	#gnb #head-menu .submenu .title:after{
		font-size: 2rem;
	}
	#gnb #head-menu .submenu .depth2{
		padding: 3rem 2rem;
		gap: 3rem 2rem;
	}
	#gnb #head-menu .submenu .depth2 > li{
		flex: 0 2 calc(100% / 2 - 2rem);
	}
	#gnb #head-menu .submenu .depth2 > li a{
		padding-bottom: 1rem;
		font-size: 1.8rem;
	}
	#snb .snb-title{
		font-size: 4rem;
	}
}
@media only screen and (max-width:980px) {
	html{
		font-size: 8px;
	}
	html.fiexd{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	/* header */
	#header .gnbWrap{
		padding: 0 0 0 1.5rem;
	}
	#gnb #head-menu{
		display: none; 
	}
	.allmenu,
	#allgnb.active{
		display: flex;
	}
	#allgnb .lang{
		font-size: 1.6rem;
	}
	/* footer */
	#quick .quick{
		display: none;
	}
	.footer-md .kocc-select{
		flex: 1 0 calc(50% - 1rem);
	}
	
	/*************** content ***************/
	.container{
		max-width: calc(100% - 10px - 10px);
	}
	#snb .snb-title{
		min-height: 15rem;
		font-size: 3.4rem;
	}
	#breadcrumb{
		border: 1px #ddd solid;
		margin-top: 3rem;
	}
	#breadcrumb:before{
		content: "";
		position: absolute;
		left: 50%;
		top: -3rem;
		transform: translateX(-50%);
		display: block;
		width: 0%;
		height: 2px;
		background-color: #000;
		transition: all 1.5s;
		transition-delay: 1s;
	}
	#breadcrumb.aos-animate:before{
		width: 100%;
		transition: all 1.5s;
		transition-delay: 1s;
	}
	#breadcrumb > ol{
		width: calc(100% - 10rem);
	}
	#breadcrumb > ol > li:not(.home):not(:last-child){
		display: none;
	}
	#breadcrumb > ol > li:last-child{
		width: calc(100% - 6rem);
		border-right: 0;
	}
	#breadcrumb .utililty{
		width: 10rem;
		margin: 0;
	}
	#breadcrumb .utililty .share-btn{
		width: 1.8rem;
		height: 1.8rem;
		margin: 0 0.5rem;
	}
	/*************** content ***************/
	
	/*************** ERROR ***************/
	.error-header .logo{
		max-width: 50%;
		margin: 0 auto;
	}
	.error-body .img{
		max-width: 80%;
		margin: 0 auto;
	}
	.error-body .tit{
		font-size: 2.4rem;
	}
	.error-body .errortxt-en{
		padding: 3rem;
	}
	/*************** ERROR ***************/
}
@media only screen and (max-width:440px) {
	#header .gnbWrap .logo .nation{
		display: none;
	}
	.footer-hd .internal-link{
		width: 100%;
	}
	.footer-hd .internal-link > li{
		flex: 1 0 calc(50% - 0.5rem);
		text-align: center;
	}
	.footer-hd .internal-link .news-subscribe a{
		justify-content: center;
	}
	.footer-hd .internal-link .news-subscribe{
		flex: 100%;
		margin: 0;
	}
	.footer-md .kocc-select{
		flex: 100%;
	}
	.related,
	.related .related-tit{
		width: 100%;
	}
	#footer .social-media{
		justify-content: center;
	}
}
@media only screen and (max-width:429px) {
	.footer-hd .internal-link > li{
		flex: 100%;
	}
}