@charset "UTF-8";
/*-------------------------------------------------
title       :서브 반응형
Create date :2020-03-09
-------------------------------------------------*/

@media (max-width:1260px) {
	#main {border-left:0}
	
	#snb .title {color:transparent; display:block; font-size:0; height:6rem; position:relative}
	#snb .title:before {content:''; color:#fff; font-size:2.8rem; font-family:'xeicon'; position:absolute; left:0; top:0; width:100%; height:6rem; line-height:2.2; text-align:center}
	
	#snb .list {visibility:hidden; overflow:hidden; width:100%; height:0; opacity:0}
	#snb .list > ul > li {display:block; margin-left:0}
	#snb .list > ul > li.active.type1 {height:auto}
	#snb .list > ul > li.active > a {display:block}
	#snb .list > ul > li > a {color:#223169; display:block; font-size:16px; line-height:3}
	
	#snb .list > ul > li ul {background-color:#f7f7f7; position:relative; height:auto; padding:1rem 2rem}
	#snb .list > ul > li ul:before {display:none}
	#snb .list li.type1 ul li, #snb .list li.type1 ul li a {display:block; margin-right:0; line-height:2.4}
	#snb .list li.type1 ul li.active a:before {left:0; bottom:2px; transform:translateX(0) skewX(-20deg); display:inline-block; margin-right:1rem; position:relative}

	#snb.active .list {box-shadow:0 1px 10px 0 rgba(0,0,0,0.2); background-color:#f3f5f7; visibility:visible; overflow:visible; opacity:1; -webkit-transition:all .3s; transition:all .3s; position:absolute; left:0; top:6rem; width:100%; height:auto; z-index:10}
	 
	.contents_info #satisfy .form {position:relative; top:auto; left:auto; right:auto; bottom:auto; -webkit-transform:translate(0, 0); transform:translate(0, 0); width:100%; padding:0 20rem 0 0}
	.contents_info #satisfy .form .length {left:auto; right:0; text-align:left}
	.contents_info #satisfy .form .btn {right:10rem} 
	
 }

@media (max-width:999px) {
	.depth4_menu_ul li {border-left-color:#ddd; display:block; float:left; width:50% !important}
	.depth4_menu_ul li:nth-child(even) {border-left:1px solid #fff}
	.depth4_menu_ul:first-child li:nth-child(n+3) {border-top-color:#fff}
	.depth5_menu_ul li {width:33.3%}
	
	.contents_util .util {display:none}
	
	.contents_info .duty .list {width:calc(100% - 3rem)}
	.contents_info .duty .list li {float:none}
	.contents_info .duty .label {display:inline-block; position:relative; width:10rem; margin-right:1rem; vertical-align:middle}
	.contents_info .duty .label::after {position:absolute; top:50%; left:auto; -webkit-transform:translateY(-50%); transform:translateY(-50%); right:0; margin:0}
	.contents_info .duty .date {display:block; position:static; padding-left:4rem}
	.contents_info .qr {display:none}
}

@media (max-width:767px) {
	#visual:after {display:none}
	
	#contents {padding:0 2rem 10rem}
	.depth5_menu_ul {padding:13rem 3rem 2rem}
	.depth5_menu_ul:before {left:50%; top:2rem; transform:translate(-50%, 0)}
	
	.contents_info #satisfy .title .txt {position:relative}
	
	.info-box i {display:block; margin:0 auto 3rem}
	.info-box .txt {width:100%; marign:0}
	
	.i-info {display:block}
}

@media (max-width:640px) {
	.depth4_menu_ul li:nth-child(n+3) {border-top:1px solid #fff}
	.depth5_menu_ul li {border-left:1px solid #ddd; width:100%}
}

@media (max-width:475px) {
	.depth4_menu_ul li {width:100% !important}
	.depth4_menu_ul li:nth-child(even) {border-left-color:#ddd}
	.depth4_menu_ul:first-child li:nth-child(2) {border-top-color:#fff}
	.depth4_menu_ul li a {letter-spacing:-1px}
}

@media (max-width:420px) {
	.contents_info #satisfy .list .form_radio {display:block}
	.contents_info #satisfy .form {height:auto; padding-right:0}
	.contents_info #satisfy .form .btn {position:static; height:4rem; vertical-align:top}
	.contents_info #satisfy .form .length {top:auto; bottom:0; text-align:right; line-height:4rem} 
}