@charset "utf-8";


/* ==== 1650px 이하 일때 ==== */ 
@media only screen and (max-width:1650px) {
/* -- header -- */
	/* - 왼쪽 영역 */
	header .header > div.left .menu li a{margin-right:25px;}
	.menuList{padding:0 9% 0 400px;}
	.menuList .mlCnt > ul{padding: 0 2%;}	
	/* .menuList .mlCnt > ul{padding: 0 40px 45px 40px;} */

/* -- footer -- */
	/* - footerContent */
		/* ^ 이용안내, 오시는길, 사이트 바로가기*/
		.siteInfo .cntBox li a, .homeInfo .cntBox li, .goSite .cntBox li span{font-size:13px;}
		.siteInfo .cntBox li a:focus {border:1px dotted #fff;}
		/* ^ 사이트 마크 */
		.markInfo .cntBox li.sns{display:none}
		.markInfo .cntBox li.lisence{display:block; text-align:right;}
		.markInfo .cntBox li.lisence a{display:inline-block;}	
}

/* ==== 1550px 이하 일때 ==== */ 
@media only screen and (max-width:1550px) {
/* -- header -- */
	/* - 왼쪽 영역 */
	header .header > div.left .menu li a{margin-right:15px;}
	.menuList .mlCnt > ul{padding: 0 1.8%;}	
}

/* ==== 1450px 이하 일때 ==== */ 
@media only screen and (max-width:1450px) {
/* -- header -- */
    .eg{padding:7px 20px}
header .header{padding:20px 20px 20px 30px;}
	/* - 왼쪽 영역 */
	header .header > div.left .home{margin-right:30px;}
	header .header > div.left .menu{display:none;}
	.menuList{padding:0 5%;}
	.menuList .mlCnt > ul{padding: 0 1.4%;}	
	/* - 스크롤 했을 때 */
	header#whiteSkin-scroll .header{padding:10px 20px 10px 30px !important;}

/* -- footer -- */
	/* - footerBanner */
	.footerBanner{padding:25px 30px;}
	/* -- footerContent */
	.footCnt{height:inherit;padding:70px 30px;}
	.fcWrap > div {width:50%;padding:30px;}
	.footerContent > .fcWrap > div:nth-child(2){width:50%;}
	.fcWrap > div:last-child { padding: 70px 30px 50px 30px;}
	.fcWrap > div:nth-child(3), .fcWrap > div:nth-child(4) {display:none;}	
}

@media only screen and (max-width:1281px) {
	.auto_complete {right:0;}
}

/* ==== 1400px 이하 일때 ==== */ 
@media only screen and (max-width:1250px) {
/* -- header -- */
/*header{height:80px;} 개인정보처리방침 문제로 주석처리 */
header .header{padding:10px 20px 10px 30px;}	
	/* - 왼쪽 영역 */
	header .header > div.left{width:auto;}
	/* - 오른쪽 영역 */
	header .header > div.right{width:auto;}

/* -- footer -- */
	/* - footerBanner */
	.footerBanner{padding:15px 30px;}
		/* ^ 배너 아이콘 : 국가상징 알아보기 */
		/* .mainSymbol,  .mainFlag{display:none;} */
		/* ^ 배너 슬라이드 */
		.rollBanner button, .rollBanner button:hover{}
		.rollBanner button:hover > span{width:12px;}
		.rollBanner button:hover > span:before, .rollBanner button:hover > span:after{left:40%;}
		.rollBanner button > span > i{display:none;}
		/* .rollBanner{flex:10;} */
	/* - footerContent */
	.footCnt{width:50%; padding:50px;}
	.fcWrap > div:nth-child(1):after{top:15px; bottom:15px;}
	.fcWrap > div:nth-child(3):after{top:0;}
	.fcWrap > div:nth-child(2):after, .fcWrap > div:nth-child(4):after{display:none;}
	.fcWrap > div:nth-child(1):before, .fcWrap > div:nth-child(2):before{content:''; position:absolute; width:auto; height:1px; bottom:0; display:block; background:#565656;}
	.fcWrap > div:nth-child(1):before,
	.fcWrap > div:nth-child(2):before{display:none;}
	.fcWrap > div:last-child{padding:50px;}
		/* ^ 사이트 마크 */
		.markInfo .cntBox li.sns{display:block}
	
}

/* ==== 1000px 이하 일때 ==== */ 
@media only screen and (max-width: 1000px) {

#container{padding:100px 5px 40px 5px;}	
	
/* -- header -- */
header.mobileHeader{background:#fff; border-bottom:1px solid #ddd; height:53px; transition:0s all; }
header.mobileHeader .header{padding:0 7px 0 15px;}
	/* - 왼쪽 영역 */
	header.mobileHeader .header > div.left .home, 
	header#whiteSkin-scroll .header > div.left .home{width:145px; height:37px; background:url('../../images/2022/logo-dark.svg') center left / auto no-repeat !important;}
    header.mobileHeader .header > div.left .policy, 
    header#whiteSkin-scroll .header > div.left .policy{width:135px; height:35px; background:url('../../images/2022/img_logo02_dk.svg') center left / auto no-repeat !important;background-size:auto 35px !important;}
	header.mobileHeader .header > div.left .menu li a{color:#333;}
	/* - 오른쪽 영역 */		
		/* ^ 즐겨찾는 메뉴(아이콘) & 보다나은정부 & SNS채털 & 영문홈페이지 */
    
        header.mobileHeader .header > div.right .lang a{color:#7e7e7e;}
        header.mobileHeader .header > div.right .lang a:before{background:#7e7e7e;}
        header.mobileHeader .header > div.right .lang a.on,
        header.mobileHeader .header > div.right .lang button.fontsize{color:#000;}
		header.mobileHeader .header > div.right .popMenu, 
		header.mobileHeader .header > div.right .wording,
		header.mobileHeader .header > div.right .gotoLink {display:none}
		/* ^ 전체 메뉴 */
		header.mobileHeader .header > div.right .allMenu{margin:0; }
		header.mobileHeader .header > div.right .allMenu > span{background:#555;}
		header.mobileHeader .header > div.right .allMenu:before{background:#555;}
		header.mobileHeader .header > div.right .allMenu:after{background:#555;}
		/* ^ 검색바 : 모바일 */
		.searchIcon_mobile{width:40px; height:47px; padding:10px 5px 10px 10px; display:inline-block; margin-right:0; transition:0s all; position:relative; overflow:hidden; font-size:0;}
		.searchIcon_mobile span{position:absolute; display:block;}
		.searchIcon_mobile span.line:before, .searchIcon_mobile span.line:after{content:''; display:block; position:absolute; width:1px; height:9px; background:#555; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);  top:0; left:0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
		.searchIcon_mobile span.circle{width:18px; height:18px; border:1px #555 solid; border-radius:100%; top:12px; left:12px; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
		.searchIcon_mobile span.line{top:27px; left:30px;}
		.searchIcon_mobile span.line:before{opacity:0}
		/* ^  검색바 : 닫기 버튼 */
		.close span.circle{background-color: transparent; transform: scale(0);}
		.close{display:inline-block; margin-right:0;}
		.close span.line{top:9px; left:22px;}
		.close span.line:before, .close span.line:after{height:27px;}
		.close span.line:before{opacity:1}
		.close span.line:after{transform: rotate(45deg);}
		/* ^  검색바 : input */
		header.mobileHeader .search_mobile{padding:0; display:block; width:100%; height:0; background:#fbfbfb; border-bottom:0px solid #888888; position:absolute; left:0; top:53px; transition:all ease-in-out .3s;}
		header.mobileHeader .search_mobile.view{height:53px; border-bottom:1px solid #888888; }
		header.mobileHeader .header > div.right .searchFrmWrap{width:100%; height:100%; margin-right:0;}
		header.mobileHeader .header > div.right .searchFrmWrap input[name="searchInput"]{color:#333333; font-size:16px; width:100%; height:100%;  border-radius:0 !important; background:transparent !important;}
		header.mobileHeader .header > div.right .searchFrmWrap input[name="searchInput"]:active{width:100% !important; border-radius:0 !important; }	
		header.mobileHeader .header > div.right .searchFrmWrap input::-webkit-input-placeholder{color:#333333;}
		.schButton{padding:14px 12px 14px 0;}
		header.mobileHeader .schButton .searchClear{top:13px;}
		header.mobileHeader .schButton .searchIcon{top:16px;}
		header.mobileHeader .schButton .searchIcon span:before{border:1px #333 solid;}
		header.mobileHeader .schButton .searchIcon span:after{background:#333;}
		header.mobileHeader .schButton .searchIcon:hover span:before{border:1px #578ad5 solid; -webkit-transition:all .3s ease; transition: all .3s ease;}
		header.mobileHeader .schButton .searchIcon:hover span:after{background:#578ad5; -webkit-transition:all .3s ease; transition: all .3s ease;}
		/* ^ 검색바 : 자동완성형 검색창 */
		.auto_complete {width:100%; right:0;}
		.auto_complete ul {float:none;}
		#tbList{border-left:none;}

/* -- footer -- */
	/* - footerBanner */
	.footerBanner{padding: 15px 5px;}
	.rollBanner .slide-wrapper{height:35px;}
	.rbWrap{padding:0;}
	.rollBanner .slide li a{height: 35px;}
	.rbWrap > button.slide-controls{padding: 0 12px;}
	.rollBanner button{padding:0 15px}
	.mainSymbol,
	.mainFlag{display:none;}
	/* - footerContent */
	.footCnt, .footCnt, .fcWrap > div:last-child{width:100%; height:auto; padding:30px 20px;}
	.footCnt .cntHead{font-size:17px}
	.fcWrap > div:nth-child(2):before, .fcWrap > div:nth-child(1):before, .fcWrap > div:nth-child(3):before{left:20px; right:20px;}
	.fcWrap > div:nth-child(3):before{content:''; position:absolute; width:auto; height:1px; bottom:0; display:block; background:#565656;}
		/* ^ 이용안내 */
		.siteInfo .cntBox li{width:33%; margin-right:0; padding-bottom:13px;}
		.siteInfo .cntBox li:nth-child(6), .siteInfo .cntBox li:nth-child(7){padding-bottom:0;}
		/* .siteInfo .cntBox li:nth-child(1){display:none;} */
		.siteInfo .cntBox li a{font-size:14px;}
		/* ^ 오시는길 */
		.homeInfo .cntBox li{font-size:12px;}
		.homeInfo .cntBox li:last-child, .goSite .cntBox li, .goSite .cntBox li span:last-child{padding-bottom:0px; }
		/* ^ 사이트 바로가기 */
		.markInfo p{display:none;}
		.markInfo .cntBox li.lisence a.webWatch{margin-right:10px;}
		.markInfo .cntBox li.sns a{margin-right:5px;}
		.markInfo .cntBox{position:relative;}
		.markInfo .cntBox li.sns{flex:5.4}
		.markInfo .cntBox li.lisence{flex:4.6}

/* -- breadScrumb -- */

.breadScrumb > ul{display:none;}
}

/* ==== 1000px 이하 일때 ==== */ 
@media only screen and (max-width: 768px) {
    header.mobileHeader .header > div.left .policy, header#whiteSkin-scroll .header > div.left .policy{display:none;}
}

/* ==== 450px 이하 일때 모바일 전용 ==== */ 
@media only screen and (max-width:450px) {
	*, *:focus{outline:none !important;}
	/* - footerBanner */
	.fcWrap > div {width:100%;padding: 30px;}
	.footerContent > .fcWrap > div:nth-child(2){width:100%;}
	.fcWrap > div:nth-child(1){padding:30px 30px 0 30px;}
		/* - 재생·정지 아이콘 */
		.rbWrap{/* padding-right:20px; */} 
	/* ^ 배너 아이콘 : 국가상징 알아보기 */
	.fbmobile {display: flex;align-items: center;justify-content: center;padding: 15px 0;overflow:hidden;width:100%;} /* 모바일에서만 나오도록 처리함 */
	.fbmobile.fbSub {background-color:#f1f1f1;}
	.fbmobile a {display: inline-flex;}
	/* - 배너 아이콘 : 국가상징 알아보기 */
	.fbmobile .mainFlag {margin-left:30px;}
	
	.mainSymbol,  .mainFlag{display:none;}
    header.mobileHeader .header > div.right .allMenu{padding-right:0;}
	
    header.mobileHeader .header > div.left .home, header#whiteSkin-scroll .header > div.left .home {width: 32.609vw;height: 8.454vw;    background: url(../../images/2022/logo-dark.svg) center left / auto no-repeat !important;}
	
}

/* ==== 350px 이하 일때 모바일 전용(viewport : 414px;) ==== */ 
@media only screen and (max-width:414px) {
	/* -- header -- */
	header.mobileHeader{height:12.802vw; /* height:53px; */}
	header.mobileHeader .header{padding:0 1.691vw 0 3.623vw; /* padding:0 7px 0 15px; */}
        /* - 왼쪽 영역 */
	    header.mobileHeader .header > div.left .home, 
	    header#whiteSkin-scroll .header > div.left .home{}
	    /* - 오른쪽 영역 */
            /* ^ 검색바 : 모바일 */
			.searchIcon_mobile{width:9.662vw; height:11.353vw; padding:2.415vw 1.208vw 2.415vw 2.415vw; /* width:40px; height:47px; padding:10px 5px 10px 10px; */}
			.searchIcon_mobile span.line:before, 
			.searchIcon_mobile span.line:after{height:2.174vw; /* height:9px; */}
			.searchIcon_mobile span.circle{width:4.348vw; height:4.348vw; top:3.140vw; left:3.140vw; /* width:18px; height:18px; top:13px; left:13px; */}
			.searchIcon_mobile span.line{top:6.522vw; left:7.246vw; /* top:27px; left:30px; */}
			/* ^  검색바 : 닫기 버튼 */
			.close span.line{top:2.174vw; left:5.314vw; /* top:9px; left:22px; */}
			.close span.line:before, .close span.line:after{height:6.522vw; /* height:27px; */}
			/* ^  검색바 : input */
			header.mobileHeader .search_mobile.view{top:12.802vw; height:12.802vw; /* top:53px; height:53px; */}
			header.mobileHeader .header > div.right .searchFrmWrap input[name="searchInput"]{font-size:3.865vw; /* font-size:16px; */}
			header.mobileHeader .schButton{padding:3.382vw 2.899vw 3.382vw 0; /* padding:14px 12px 14px 0; */}
			header.mobileHeader .schButton .searchClear{width:5.797vw; height:5.797vw; top:3.140vw; /* width:24px; height:24px; top:13px; */}
			header.mobileHeader .schButton .searchIcon{width:5.314vw;height:5.314vw;top:3.865vw;/* width:22px; height:22px; top:16px; */line-height: 1;}
            header.mobileHeader .schButton .searchIcon span:before{width:3.865vw; height:3.865vw; /* width:16px; height:16px; */}
		    header.mobileHeader .schButton .searchIcon span:after{height:2.174vw; top:3.865vw; left:4.106vw; /* height:9px; top:16px; left:17px; */}
		    header.mobileHeader .schButton .searchIcon.active{width:14.493vw; /* width:60px; */}
		    header.mobileHeader .schButton .searchIcon.active span:before{width:14.493vw; height:5.314vw; line-height:5.314vw; border-radius:7.246vw; font-size:2.899vw; /* width:60px; height:22px; line-height:22px; border-radius:30px; font-size:12px; */}
		    /* ^ 검색바 : 자동완성형 검색창 */
		    .auto_complete {border-bottom:none; padding:2.415vw; /* padding:10px; */ }
		    .auto_complete > div{font-size:3.382vw; padding:1.208vw; /*font-size:14px; padding:5px; */}
		    .auto_complete ul {margin:1.208vw; /* margin:5px; */}
		    /* - 전체 메뉴 */
			header .header > div.right .allMenu{width:9.662vw; height:9.903vw; padding:2.415vw; /* width:40px; height:41px; padding:10px; */}
			header .header > div.right .allMenu:before{width: 4.831vw; top:2.415vw;/*width:20px;  top:10px; */}
			header .header > div.right .allMenu:after{width:4.831vw; bottom:2.015vw; /* width:20px; bottom:10px; */}
            header.mobileHeader .header > div.right .allMenu > span{width:20%}

			
    /* -- container -- */
    #container{display:block; padding:125px 5px 40px 5px; /* padding:100px 1.208vw 0 1.208vw; */}	


    /* - footerBanner */
    .footerBanner{padding: 4.286vw 1.429vw; /* padding: 15px 5px; */}
    .fcWrap > div {padding: 5.714vw; /* padding: 20px; */}
	.fcWrap > div:nth-child(1){padding: 5.714vw;/* padding:20px 20px 0 20px; */}
    .footCnt .cntHead{font-size:4.286vw;padding-bottom: 5.714vw;/* font-size:15px; padding-bottom: 20px; */line-height: 1;}
	.fcWrap > div:nth-child(2):before, 
	.fcWrap > div:nth-child(1):before, 
	.fcWrap > div:nth-child(3):before{left:5.714vw; right:5.714vw; /* left:20px; right:20px; */}
		/* ^ 이용안내 */
		.siteInfo .cntBox li{line-height: 1.2;padding-bottom:3.714vw;/* padding-bottom:13px; */}
		.siteInfo .cntBox li a{font-size:3.429vw;/* font-size:12px; */}
		/* ^ 오시는길 */
		.homeInfo .cntBox li{font-size:3.429vw;padding-bottom: 3.714vw;padding-left: 6vw;/* font-size:12px; padding-bottom: 13px;padding-left: 21px; */}

        /* ^ 배너 아이콘 : 국가상징 알아보기 */
	    .fbmobile {padding: 4.286vw 0; /* padding: 15px 0; */}
	    .mainFlag:before{width: 29.143vw;height: 9.429vw; /* width: 102px;height: 33px; */background-size: contain;background-position: center center;}
	    /* - 배너 아이콘 : 국민의나라 정의로운 대한민국 */
		.mainSymbol:before{width: 37.143vw;height: 12.286vw;/* width:130px;height: 43px; */background-size: contain;}

}