@charset "UTF-8";
/*-------------------------------------------------
title       : 서브 반응형
Author      : 플랜아이 광주
Create date : 2020-03-09
-------------------------------------------------*/
@import url("contents_repond.css");

@media (max-width: 1460px) {
#snb {
	width: 23rem;
	margin-right: 5rem;
	}
}
@media (max-width: 1280px) { 
#main .main_wrap {max-width: 95%;}	
#snb { display: none; }
#contents { float: none; width: 100%; }
.location .path { width: 100%; }
}

@media (max-width: 1024px) {
.location .depth4, .location .depth5 { display: none; } 
}

@media (max-width: 768px) { 
#visual {height: 25rem; margin-bottom: 3rem;}
#visual .control span { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; display: block; }
.location { display: none; }
.depth4_tab ul {display: block;}
.depth4_tab ul > li { display: block; width: 100%; height: 0;margin-bottom: -1px; 	transition:height .4s; visibility: hidden; overflow: hidden; }
.depth4_tab ul > li + li { border-left: 1px solid #ddd; }
.depth4_tab ul > li a { position: relative; text-align: left; }
.depth4_tab ul > li.active {width: auto; height: auto; opacity: 1;  visibility: visible; overflow: visible; }
.depth4_tab ul > li.active a { padding-right: 4rem; }
.depth4_tab ul > li.active a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 1.5rem; content: '';transition: all 0.2s; }
/* .depth4_tab.active ul > li { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; } */
.depth4_tab.active ul > li.active a::after {transform: rotate(180deg); }
.depth4_tab ul li.active::after {display: none;}
.depth4_tab.active li {height: auto; visibility: visible;}	

#contents {margin: 0 0 2rem; }
#contents_title {margin-top: 0.7rem;} 

.contents_util .util .print { display: none; }
}

@media (max-width: 620px) {
#main {margin-top: 12.3rem; }
}
@media (max-width: 480px) {
#main {margin-bottom: 5rem; }
#main .main_wrap {max-width: 90%;}
#contents_title { margin-bottom: 2rem; }
}

@media print {	
#header, #visual, .util, #footer, .contents_info {display: none;}	
#main, #contents{margin-top: 0;}
#main .main_wrap {width: 100%;}
.location {width: 100%; margin-top: 0;}
}