@charset "UTF-8";
/*-------------------------------------------------
title       :서브 반응형
Create date :2021-02-08
-------------------------------------------------*/

@media (max-width:1024px) {
	#main_wrap {padding-top:38.5rem}
	
	#visual {width:100%}
	#visual:after {bottom:0rem; height:6.5rem}
	#visual .desc {left:50%}
	
	#contents .contents_util {padding-top:11rem}
	#contents_title {margin-bottom:0}
	
	
	.location .nav-depth {justify-content:space-between; width:100%; padding-right:0; margin-right:1px}
	.location .list {flex:1 1 49.5%; max-width:100%; margin:6.5rem 0 0 -1px; position:relative; width:auto}
	.location .list li a {text-align:left; line-height:1.2; word-break:keep-all}
	.location .list li a:after {right:1.5rem}
	.location .list li.active {top:-6.5rem}
	.location .list li.active a {height:6.5rem !important; padding:1rem 3rem 1rem 1rem !important}
	.location .list li.active a:after {right:1rem}
	.location .list.active li a {padding:1rem 3rem 1rem 1rem}
	.location .list.active li.on a:after {right:1.5rem}
	.location .depth1 {display:none}
	.location .depth4 {display:none}
	.location .depth2 {margin-left:0}
	
	.location ul.path {display:none}
	
	.contents_util .util {position:relative; top:0; text-align:center; margin:1rem 0 2rem; width:100%; z-index:4}
	.contents_util .util .zoom,
	.contents_util .util .print	{display:none}
	.contents_util .util .share .item {right:50%; transform:translateX(50%)}
	.contents_util .util .share .item::before {right:auto; left:50%}
	.contents_util .util .btn {border:1px solid #333; border-radius:100%; color:#333; width:4rem; height:4rem; line-height:4rem}
	
	.depth4_tab {position:relative; padding-top:6rem; margin-bottom:3rem; z-index:3}
	.depth4_tab ul {border-bottom:0; display:block; position:absolute; top:0; padding-top:6rem; margin-bottom:0}
	.depth4_tab ul > li {border:1px solid #ddd; background-color:#fff; display:block; margin:0 0 -1px; visibility:hidden; overflow:inherit; width:100%; height:0; opacity:0; transition:all .2s}
	.depth4_tab ul > li a {font-size:1.8rem; padding:0 2rem; text-align:left}
	.depth4_tab ul > li.active {border:2px solid #17bcc0; position:absolute; top:0; width:100%; height:6rem; visibility:visible; overflow:hidden; opacity:1}
	.depth4_tab ul > li.active a {padding:1.6rem 2rem}
	.depth4_tab ul > li.active a::before {display:none}
	.depth4_tab ul > li.active a::after { position: absolute; bottom: auto; left: auto; right: 1.5rem; font-family: "xeicon"; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; background-color:inherit; z-index:inherit; width:auto; height:auto}
	.depth4_tab ul li.active + li {display:block}
	.depth4_tab.active ul > li { visibility: visible; height:6rem; opacity: 1; }
	.depth4_tab.active ul > li.active a::after {bottom:1.5rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	.depth4_tab.active ul li {display:block}
	.depth4_tab.active ul li a {padding:1.6rem 2rem}
	
	#depth5_menu_div {margin-top:0}
	#depth5_menu_ul {min-width:auto; display:flex; flex-wrap:wrap}
	#depth5_menu_ul li {display:block; width:calc(50%); margin:0}
	#depth5_menu_ul a {padding:1rem}
}


@media (max-width:768px) {
	
	
	.icon_tab {position:relative; padding-top:6rem; margin-bottom:3rem; z-index:3}
	.icon_tab ul {border-bottom:0; display:block; position:absolute; top:0; padding-top:6rem; margin-bottom:0}
	.icon_tab ul > li {border:1px solid #ddd; background-color:#fff; display:none; margin:0 0 -1px; visibility:hidden; overflow:inherit; width:100%; height:0; opacity:0; transition:all .2s}
	.icon_tab ul > li a {font-size:1.8rem; padding:0 2rem; text-align:left}
	.icon_tab ul > li.active {border:2px solid #17bcc0; display:block; position:absolute; top:0; width:100%; height:6rem; visibility:visible; overflow:hidden; opacity:1}
	.icon_tab ul > li.active a {padding:1.6rem 2rem}
	.icon_tab ul > li.active a::before {display:none}
	.icon_tab ul > li.active a::after { position: absolute; bottom: auto; left: auto; right: 1.5rem; font-family: "xeicon"; content: ''; -webkit-transition: all 0.2s; transition: all 0.2s; background-color:inherit; z-index:inherit; width:auto; height:auto}
	.icon_tab.active ul > li {display:block; visibility: visible; height:6rem; opacity: 1; }
	.icon_tab.active ul li.active + li {display:block}
	.icon_tab.active ul > li.active a::after {bottom:1.5rem; -webkit-transform: rotate(180deg); transform: rotate(180deg); }
	.icon_tab.active ul li.active {display:block}
	.icon_tab.active ul li a {padding:1.6rem 2rem}
	.flexBox.lt2 ul li:first-child {margin-bottom:4rem}
	#visual .desc .title {font-size:4.1rem}
	
}