@charset "UTF-8";

@media (max-width:1700px) {
	#snb .title:after {background-position:left 12rem bottom}
}

@media (max-width:1610px) {
	#contentWrap {width:calc(100% - 4rem); max-width:140rem;}
	#snb { width: 25rem}
}



@media (max-width:1200px) {
	#visual {padding:5rem 2rem 8rem}
	#visual:before {min-width:25rem}
	#visual:after {right:-10rem; min-width:40rem}
	
	#snb {display:none}
	#contents {padding-top:6rem; padding-left:0; width:100%; max-width:100%}
	#contents_title {font-size:3.2rem; line-height:1.2; padding-right:6rem}
	.contents_util {margin-bottom:5rem}
	.util-group {top:-0.5rem}
	.contents_util .util .zoom, 
	.contents_util .util .print {display:none}
	.contents_util .util .share .item::before {right:1rem}
	
	.location .nav-depth {display:block; position:absolute; left:0; top:-9rem; width:100%; z-index:3}
	.location .depth2:last-child {width:100%}
	.location .list {border:1px solid #ddd; border-radius:0.5rem; display:none; float:left; position:relative; text-align:left; width:49.7%; margin-right:.1rem; padding-top:6rem; background-color:#fff; height:5rem; overflow:hidden}
	.location .list:nth-child(n+2):nth-child(-n+3) {display:block}
	.location .list a {display:block; font-size:1.6rem; height:100%; position:relative; padding:1.8rem 2rem; word-break:break-all}
	.location .list li {border-bottom:1px solid #ccc; visibility:hidden; overflow:hidden; width:0; height:auto; opacity:0; background-color:#fff}
	.location .list li:last-child {border-bottom:0}
	.location .list li.active {border:none; visibility:visible; overflow:visible; width:auto; opacity:1; position:absolute; left:0; top:0; width:100% !important; height:6rem; padding:0 !important; background:0 none; color:#fff}
	.location .list li.active a {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:4rem; background-color:#19254b; font-size:1.8rem; position:relative}
	.location .list li.active a::after {position:absolute; font-family:"xeicon"; right:2rem; top:50%; transform:translateY(-50%); content:''; -webkit-transition:all 0.2s; transition:all 0.2s}
	.location .list.active {height:auto; box-shadow:0 0 10px rgba(0,0,0,0.1)}
	.location .list.active li {visibility:visible; overflow:visible; width:auto; opacity:1; -webkit-transition:all 0.2s; transition:all 0.2s}
	.location .list.active li a::after {-webkit-transform:translateY(-50%) rotate(180deg); transform:translateY(-50%) rotate(180deg)}
	.location .list.depth1 {display:none}	
}

@media (max-width:767px) {
	#visual:before {display:none}
	.location .path {display:none}
}