@charset "utf-8";
/* *******************************************************
 * filename : layout_responsive.css
 * description : 전체 레이아웃 반응형 CSS
 * date : 2021-11-30
******************************************************** */

/* ========================================================
 * 공통레이아웃
======================================================== */
@media all and (max-width:1660px){	/* max-width : (area-box width) + 60px */
	.area-box{padding:0 5%; max-width:none;}
}
@media all and (max-width:1500px){ /* max-width : (area width) + 60px */ 
	.area{padding:0 5%; max-width:none;}
	.area-pad120{padding:120px 5%;}
}
@media all and (max-width:1280px){
	/* .area-box,
	.area{padding:0 15px} */
	.area-mar120{margin:9.375vw auto}
	.area-pad120{padding:9.375vw 5%;}
}

/* ========================================================
 * HEADER
======================================================== */
@media all and ( max-width: 1500px ){
	/* -------- Header :: Layout -------- */
	#headerInner{padding:0 5%}
}

/* ========================================================
 * 메뉴, 사이트맵
======================================================== */
@media all and (max-width:1500px){
	/* -------- 사이트맵 :: 메뉴영역 -------- */
	.gnb-menu-wrapper{font-size:15px;}
	.gnb-menu-logo{left:5%}
	.gnb-menu-bottom-controls{padding:0 5%}
}
@media all and (max-width:1280px){
	/* -------- 사이트맵 :: 메뉴영역 -------- */
	.gnb-menu-wrapper{font-size:14px;}
	.gnb-menu-list > li > h2 > a{font-size:1.6em}
	.sitemap-family-site-con{position:absolute; bottom:-55px; right:3%;}
	.sitemap-family-sitemap-open-con{bottom:43px; right:4.8%}
}
@media all and (max-width:1280px) and (orientation: landscape){
	.gnb-menu-bottom-controls, .to-menu-back-btn{bottom:12vh;}
	.to-menu-back-btn{right:5%}
	.sitemap-bg-txt{bottom:1vw;}
	.gnb-menu-list.sitemap-open-item{padding-top:10vh}
	.gnb-menu-list > li > ul > li .sitemap-3dep{margin-top:10px;}
}
@media all and (max-width:767px){
	.gnb-menu-wrapper{font-size:12px;}
}

/* ========================================================
 * FOOTER
======================================================== */
@media all and (max-width:1500px){
	#footer{font-size:15px;}
	#footerInner{padding:30px 5%;}
}
@media all and (max-width:1280px){
	/* -------- FOOTER :: 상단 -------- */
	#footerTop{display:block;}
	.footer-left-con, .footer-right-con{float:none; width:auto;}
	.footer-left-con{margin-bottom:3%;}
	.footer-right-con .foot-address-con{padding-left:0;}
	.foot-address-con .foot-address-tit{margin-bottom:0.5em}
	/* Footer :: SNS 리스트 */
	.foot-sns-menu{position:static; margin-top:5%; display:flex;}
	.foot-sns-menu u{}
	.foot-privacy-btns{text-align:left; margin-top:0; margin-left:1em;}
	/* Footer :: 뉴스레터 */
	#footerBottom{margin-top:2%;}
	#footerBottom .footer-right-con{margin-bottom:5%}
	.footer-newsletter-application-con{float:none; display:inline-block; }
}

/* ========================================================
 * MODAL LAYERPOPUP
======================================================== */
@media all and ( max-width: 800px ){
	/* modal layer content */
	.footer-modal-content{width:auto; margin:50px 15px}
	.footer-modal-content h1{font-size:18px; text-align:left; padding:0 30px 15px 0}
	.modal-close-btn{right:-3px; top:-3px;}
	.modal-close-btn i{font-size:24px}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}
}

/* ========================================================
 * SUB 상단 레이아웃
======================================================== */
@media all and (max-width:1920px){
	#content{font-size:0.7813vw}
	/* -------- 상단레이아웃 :: 공통 -------- */
	.sub-visual-txt-container .visual-sub-txt{font-size:5.2083vw;}
}
@media all and (max-width:1500px){
	#content{font-size:13px; /* font-size:1.0156vw */}
	/* -------- 상단레이아웃 :: 공통 -------- */
	#subVisual .sub-visual-txt-container{padding-top:13.0208vw}
	.sub-visual-txt-container .sub-visual-tit-con{margin-bottom:9.3750vw}
}
@media all and (max-width:1280px){
	/* -------- 상단레이아웃 :: 공통 -------- */
	#subVisual .sub-visual-txt-container{padding-top:175px}
	.sub-visual-txt-container .visual-sub-txt{font-size:6.7188vw;}
	/* -------- 서브상단비주얼 :: 스타일 04-------- */
	.content-top-bg-style04 svg{width:auto; height:100%;}
}
@media all and (max-width:1280px) and (orientation: landscape){
	#subVisual .sub-visual-txt-container{padding-top:calc(100px + 4vw)}
	.sub-visual-txt-container .visual-sub-txt{font-size:5.5vw}
}
@media all and (max-width:768px){
	/* -------- 상단레이아웃 :: 공통 -------- */
	.sub-visual-txt-container .visual-sub-txt{font-size:3.2em;}
}

/* ========================================================
 * 검색영역
======================================================== */
@media all and (max-width:1500px){
	#totalSearchInnerCon{padding: 9.3750vw 5%;}
	.word-cloud-box{display:none;}
}
@media all and (max-width:1280px){
	/* 검색 :: 리스트 */
	.total-search-result-list{display:block; }
	.total-search-result-list .result-item{width:auto; }
	/* 검색 :: 일반리스트 */
	.no-thumb-list-con .total-search-result-list .result-item:nth-child(even){border-left:0}
	.no-thumb-list-con .total-search-result-list .result-item:nth-child(2){border-top:1px solid #e5e5e5}
}
@media all and (max-width:1024px){
	/* 검색 :: 리스트 */
	.total-search-result-list .result-item{margin-top:1em}
	.total-search-result-list .result-item a{align-items:center;}
	.total-search-result-list .result-item .result-item-thumb{width:20%; }
	.total-search-result-item-con:not(.no-thumb-list-con) .total-search-result-list .result-item .result-item-info{width:calc(80% - 2.666em); padding:0;}
	.total-search-result-list .result-item .result-item-info .result-item-tit{height:auto; max-height:3em; -webkit-line-clamp:2; }
	.total-search-result-list .result-item .result-item-thumb .result-item-category{font-size:2.5vw}
	.total-search-result-list .result-item .result-item-info .result-item-date{margin-top:1.5em	}
}