/**

Response width size : 
	- PC
	- max-width:1200
	- max-width:1024
	- max-width:767
	- max-width:560
	- max-width:400

**/

@media screen and (max-width:1200px) {

	#header .header-in { width:100%; padding-left:20px; padding-right:20px; margin-top: 0; }
	#jang-logo { width:360px; background:none; margin-right: 0; }
	#jang-logo .img1 { margin-top:15px; }
	#jang-logo .img2 { display:none; }
	.jang-menu1 > li > a { font-size: 1.125rem; padding:0 5px; margin:0 5px; }


	#wrapper { width:100%; padding-top:71px; }
	#wrapper.is-sub { width:100%; }
	#wrapper.is-sub #left { width:100%; padding-left: 40px; padding-right: 40px; }
	#wrapper.is-sub #container { width:100%; float:none; margin:0 auto; padding-left: 40px; padding-right: 40px; }

}

@media screen and (max-width:1024px) {

	#header .header-in { padding-left:40px; padding-right:40px; height:60px; }
	#jang-logo { width:280px; margin-right:80px; }
	#jang-logo .img1 { margin-top:20px; }
	#btn-mobile { display:block; }

	#jang-gnb { position:fixed; top:0px; left:100vw; width:40vw; height:100vh; display: block; background:#fff; overflow-y:scroll; transition:left .3s ease-out; margin-top:0; padding-top:60px; border-left:1px solid #888; }
	.jang-menu1 > li > a { position:relative; display:block; text-align:left; height:50px; line-height:50px; color:#444; padding: 0 10px;  }
	.jang-menu1 > li > a:hover { }
	.jang-menu1 > li > a > span { position:absolute; display:block; width:24px; height:24px; right:10px; top:10px; background:none; border:1px solid #ccc; border-radius:100%; }
	.jang-menu1 > li > a > span > span { position:absolute; display:block; width:6px; height:6px; top:50%; left:50%; background:none; border-left:1px solid #555; border-bottom:1px solid #555; transform: translate(-50%, -50%) rotate(-45deg); }

	.jang-menu1 .sub li { }
	.jang-menu1 .sub a { line-height:1.6; }

	.jang-menu2 { display:block; padding-left:20px; }
	.jang-menu2 li {  }
	.jang-menu2 a { line-height: 30px; }

	#header .header-screen { display:none; }
	#header .header-screen.active { display:none; }


	#banner-sub .inner .text .title { font-size:3rem; text-shadow:1px 2px 3px rgba(20, 20, 20, 1); }
	#banner-sub .inner .text .desc { font-size: 1.4rem; text-shadow:1px 1px 2px rgba(50, 50, 50, 1); }


	#wrapper { padding-top:61px; }
	#wrapper.is-sub #left { display:none; }
	#wrapper.is-sub #container { width:100%; padding-left: 20px; padding-right: 20px; min-height:400px; }
	#container h2.page-title { padding: 30px 0 10px; }

}


@media screen and (max-width:960px) {



}

@media screen and (max-width:767px) {

	html { font-size: 15px; }

	#header .header-in { padding-left:20px; padding-right:20px; }
	#jang-logo { margin-right:0px; }

	#banner-sub .inner .text .title { font-size:2.5rem; text-shadow:1px 2px 3px rgba(20, 20, 20, 1); }
	#banner-sub .inner .text .desc { font-size: 1.2rem; text-shadow:1px 1px 2px rgba(50, 50, 50, 1); }

	/* bbs */
	.list_01 li { padding:10px 0; }

	.fix_btn { right:20px; bottom:80px; }


}

@media screen and (max-width:560px) {

	html { font-size: 14px; }

	#jang-logo .img1 img { width:200px; }
	#jang-gnb { width:60vw; }
	#header.open #jang-gnb { left:40vw; }

	#wrapper.is-sub #container { padding-left: 10px; padding-right: 10px; }

}

@media screen and (max-width:400px) {

	html { font-size: 13px; }


}