/*===============================
	lg 
===============================*/ 
@media (min-width:1200px) {

	#st4 {height:280px;}
	#st4 .inner > div {float:left;display:inline-block;width:33.3%;height:225px;}

}



/*===============================
	md 
===============================*/ 
@media (min-width:992px) and (max-width:1199px) {

	#mvis .mimg {padding-top:42.6%}
	#mvis .mimg .mtxt img {width:40%;}
	#st1 .inner > div{ padding:10px 10px;}
	#st4 .inner > div {float:left;padding:1%;display:inline-block;width:33.3%;}

	#mvis .mimg02 .mtxt img{margin-right:15%;}
	#mvis .mimg03 .mtxt img{margin-right:15%;}
	
}


/*===============================
	sm 
===============================*/ 
@media (min-width:768px) and (max-width:991px) {
	
	#hd {height: 94px;}
	#hd .logo {position:absolute; float:left; padding:10px 0; z-index:9;}
	#hd .gnb_area {height:70px;}
	#hd .gnb_area .gnb{ width:100%; padding:0; }

	.logo img {height:50px;} 
	#hd2 {height:94px;}
	#hd2 .logo {position:relative; float:left; z-index:9;}

	.topbar ul {text-align:center; line-height:25px;}
	.topbar ul li {margin:0 10px;}
	.topbar ul li:before {display:none;}
	.topbar ul li span {display:none;}

	#mvis .mimg {padding-top:38.6%}
	#mvis .mimg .mtxt img {width:35%;}
	#mvis .mimg .mtxt span {font-size:16px;}
	.slick-prev, .slick-next, .slick-dots {display:none !important;}

	#mvis .mimg02 .mtxt img{margin-right:20%;}
	#mvis .mimg03 .mtxt img{margin-right:15%;}

	#st1 {padding:30px 0;}
	#st1 .inner > div{width:50%; padding:4%;}

	#st3 {background-attachment:scroll;background-size: cover;}

	#st4 .inner > div {display:inline-block;padding:1%}
	#st4 .st4_bd, #st4 .st4_cs {float:left;width:50%;height:222px;}
	#st4 .st4_cs span {font-size:22px;}
	#st4 .st4_map {width:100%;}

	#footer .foot_con .sns{display:block; margin-bottom:50px; text-align:center;}
	.ft_info{display:block; padding:30px 0;}
	.ft_info p {text-align:center;}

}



/*===============================
	xs 
===============================*/ 
@media (max-width:767px) {

	#hd {height: 94px;}
	#hd .logo {position:absolute; float:left; padding:10px 0; z-index:9;}
	#hd .gnb_area {height:70px;}
	#hd .gnb_area .gnb{ width:100%; padding:0; }

	.logo img { height:50px;} 
	#hd2 {height: 94px;}
	#hd2 .logo {position:relative; float:left; z-index:9;}

	.topbar ul {text-align:center; line-height:25px;}
	.topbar ul li {margin:0 10px;}
	.topbar ul li:before {display:none;}
	.topbar ul li span {display:none;}

	#mvis .mimg {position:relative;padding-top:60%}
	#mvis .mimg .mtxt img{width:60%;margin-bottom: 10px;}
	#mvis .mimg .mtxt span{font-size:13px;line-height:19px;}
	.slick-prev, .slick-next, .slick-dots {display:none !important;}	

	#st2 .st_tit p, #st3 .st_tit p {font-size:14px;}

	#st1 {/* margin-top:12px;  */padding:30px 0 0;}
	#st1 .inner > div{float:left; padding:8px; width:50%; margin-bottom:30px;}
	#st1 .inner > div a div {width:120px;height:120px;background-size: cover;}
	#st1 p {font-size:13px;}
	#st1 h3 {font-size:16px;}
	#st1 .con_info {width:auto;}

	.st1_con1:hover {background-image:url('../img/main/st1/st1_con1.png')}
	.st1_con2:hover {background-image:url('../img/main/st1/st1_con2.png')}
	.st1_con3:hover {background-image:url('../img/main/st1/st1_con3.png')}
	.st1_con4:hover {background-image:url('../img/main/st1/st1_con4.png')}

	#st2 {padding:30px 0;}
	#st2 .st_tit {padding:2%;}
	#st2 .st_tit h2 {font-size:22px;}
	.gallery_wrap {padding:5px;}

	#st3 {height:300px;padding:30px;background-attachment:scroll;background-size:cover;}
	#st3 h2 {margin-bottom:10px;font-size:22px;}
	#st3 .st_tit h2 {font-size:22px;}
	#st3 .st_tit p {line-height:25px;}
	#st3 .st_con {padding:3%;}

	#st4 {padding:10px 0;}
	#st4 .inner > div {display:inline-block;padding:3%;}
	#st4 .st4_cs span {font-size:22px;}
	#st4 .st4_cs h3 {font-size:18px;}
	#st4 .st4_cs p {font-size:14px;}
	.st4_bd, .st4_cs {float:left;width:50%;}
	.st4_map {float:none;width:100%;}

	#footer .foot_con .sns {display:block; text-align:center; margin-bottom:50px;}
	.ft_info {display:block; padding:30px 0;}
	.ft_info p {text-align:center;}

}


/*===============================
	xxs 
===============================*/ 
@media (max-width:450px) {

	#hd {height: 94px;}
	#hd .logo {position:absolute; float:left; z-index:9;}
	#hd .gnb_area {height:70px;}
	#hd .gnb_area .gnb{ width:100%; padding:0; }

	#hd2 {height: 94px;}
	#hd2 .logo {position:relative; float:left; z-index:9;}

	.topbar ul {text-align:center; line-height:25px;}
	.topbar ul li {margin:0 10px;}
	.topbar ul li:before {display:none;}
	.topbar ul li span {display:none;}

	#mvis .mimg .mtxt span {width:80%;margin: 0 auto;}
	#mvis .mimg .mtxt img {width:50%;}

	#st1 .inner > div a div {width:80px;height:80px;background-size: cover;}

	#st3 {padding:0;}

	#st4 .inner > div {width:100%;padding:5%;}
	#st4 .st4_cs {border-top:1px solid #ded3c1;border-bottom:1px solid #ded3c1;}


	#footer .foot_con .sns{display:block; text-align:center; margin-bottom:50px;}
	.ft_info {display:block; padding:30px 0;}
	.ft_info p {text-align:center;}

}