* {margin:0; padding:0; border:none; box-sizing:border-box; -moz-box-sizing:border-box; vertical-align: top;}
html,body {height:100%; background:#efefef;font-family: "Myriad","Tahoma","NBG","Apple SD Gothic","Malgun Gothic",Arial,"돋움",Dotum,sans-serif; position: fixed, 
  overflow: hidden;  }
li { list-style: none; }
a { text-decoration: none; }
a:hover{ text-decoration:none; cursor:pointer; }
img, ifram { border: 0;  max-width: 100%; margin: 0 auto; box-sizing: border-box;}
footer,header,hgroup,menu,nav,contents {display: block;}

/*font-size: -pixelx 16px*/ 
#popup{width: auto; height: 650px; position: absolute; z-index; 999px;}
#popup_m {display:none}
#wrap { width: 100vw;

  height: 100vh;

  overflow-y: scroll;

  -webkit-overflow-scrolling: touch; }
#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 888; background: transparent;  display:none;}


#header {width: 100%; height: auto; background: #333; z-index: 777; box-sizing: border-box;}
#nav_wrap {width: 1280px; margin: 0 auto;  }
#logo { float: left; width: 20%; text-align: left;  text-indent: 25px; }
#logo a { height: 70px; line-height: 70px; font-size: 1.125em; color: #FFF; }/*font-size:18px*/ 
#m_logo {display:none; width: 100% ; height: 50px; line-height: 50px; margin: 0 auto; text-align: center; overflow: hidden;}
	.menu_bt { float: left; width: 15%; }
	.menu_bt img { width: 40px; margin-top: 5px;}
	.m_logo { float: left; width: 70%;  }
	.m_logo a {font-size: 1.5em; color: #FFF;}
	.tel_bt { float: left; width: 15%; margin-top: 5px;}
	.tel_bt img { width: 40px; }

#nav { float: left; width: 60%; background: #333; box-sizing: border-box; }
#menu {overflow: hidden; text-align: center; }
#menu_title2, #menu_title6 {float: left; width: 18%; }
#menu_title3, #menu_title4 {float: left; width: 22%; }
#menu_title5 {float: left; width: 20%; }
	.menu_title a { display: block; height: 70 px; line-height: 70px; font-size: 1em; color: #FFF ; font-weight: bold;}
	.menu_title a:hover {color: #FF0000;}
	.menu_sub1, .menu_sub2, .menu_sub3, .menu_sub4, .menu_sub5, .menu_sub6 { display:none; float: none; background: #333; height: auto; }
	.menu_sub1 a, .menu_sub2 a, .menu_sub3 a, .menu_sub4 a, .menu_sub5 a, .menu_sub6 a { font-size: 0.875em; height: 30px; line-height: 30px; font-weight:normal; } /*font-size:14px*/ 
	.menu_sub1 a:hover, .menu_sub2 a:hover, .menu_sub3 a:hover, .menu_sub4 a:hover, .menu_sub5 a:hover, .menu_sub6 a:hover {color: #E3CE2A; }


#query { width: 20%; height: 70px; overflow: hidden; }
	.query { float: left ; height: 40px;  margin: 15px 40px 0 50px; }
	.query img {width: 100%;}
	.query_text { float: left ; height: 70px;  line-height: 70px; }
	.query_text a { display: block; font-size: 1em; color: #FFF; }
	.query_tel { display: none; float: left ; height: 50px;  margin: 10px 0 0 0; }
	.query_tel img {width: 100% ;}



#contents { width:100%; height: auto; text-align: center; margin-bottom: 80px; box-sizing: border-box; }
#top_main_img { width: 100%; background: #333; }
#mtop_main_img {display: none; width: 100%; }
#mtop_main_img img { }
#top_tel {display:none; width: 100%; height: 30px; background: #0054FF; text-align: cester; }
#top_tel a{ display: block;font-size; 1.5em; color: #FFFFFF; font-weight: bold; height: 30px; line-height: 30px;}
#conbox_top { width: 1280px; margin: 0 auto; text-align: center; margin-bottom: 50px; }
#conbox_top_text { display: block; height: auto; margin:60px 0 60px 0; }
		.conbox_top_title { height: 50px; margin:10px 0 10px 0 ; }
		.conbox_top_title a { display: block; height: 50px; line-height: 50px; font-size: 1.875em; font-weight: bold; color:#333;  }/*font-size:30*/ 
		.conbox_top_text a{ font-size: 1em;  color:#333; }
		

#conbox_top_banner { width: 1280px; text-align: center; overflow: hidden; margin-bottom: 50px; }
/*#conbox_top_banner a { display: block; height: 80px; line-height: 80px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;  }*/	.topbanner_left { float: left; width:32%; height: auto; background: skyblue; margin-right: 2%; }	
		
	.topbanner_center { float: left; width:32%; height: auto; background:skyblue; margin-right: 2%; }
	.topbanner_right { float: left; width:32%; height: auto; background:skyblue; }
		.topbanner_img { width: 100%; height: auto; background: #888888; }
		.topbanner_text a{ display: block; height: 80px; line-height: 80px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;  }


#conbox_middle { width: 1280px; margin: 0 auto; text-align: center; }
#conbox_middle_video { margin-bottom: 50px; }
	.video { width: 100%; height:500px;  }
	

#conbox_middle_custom { width: 1280px; height: auto; text-align: center; overflow: hidden;   }
	.customer_service { float: left; width: 50%; height: 200px;}
		.banner_title a { font-size: 1.5em; color: #333; font-weight: bold; border-bottom: 2px solid #333; margin-bottom: 10px;}
		.banner_telno a { display:block; font-size: 3em; color: #7F5959; font-weight: bold; margin: 15px 0 5px 0;}
		.customer_service_text1 a { display:block; font-size: 1em; color: #333;  }
		.customer_service_text2 a { display:block; font-size: 1em; color: #333;  }
		.m_shadowLine {display: none; }
	.formmail { float: left; width: 50%; height: auto;}
    	.formmail_banner_title a{  width: 50%; text-align: center; height: 30px; line-height: 30px;font-size: 1.5em; color: #333; font-weight: bold; border-bottom: 2px solid #333; margin-bottom: 10px;}
	   	.formmail_board { height:120px; margin: 15px 0 5px 0; }
		.formmail_btmtext a { display:block; font-size: 1.25em; color: #333;  } 
#shadowLine { width: 100%; margin: 50px 0 20px 0;}
#unit {width: 1280px; height: auto; text-align: center; margin-top: 30px; overflow-x:hidden}


#conbox_bottom { width: 1280px; height: auto; margin: 0 auto; }

#conbox_bottom_text { text-align: center; margin: 20px 0 50px 0;}
#conbox_bottom_text h3 {font-size: 1.875em; color: #333; margin-bottom: 10px; }
#conbox_bottom_text p { font-size: 1em; color: #333; }


#conbox_bottom_box {width: 100%; height: auto; margin: 0 auto; overflow: hidden;}
	#bottom_bannerbox_left {float:left; width: 50%; height: auto; text-align: center;}
		.btmbox_left_top { width: 95%; height: auto;  margin: 2.5%; padding-top: 85px;  }
		.btmbox_left_middel {width: 95%; height: auto; margin: 2.5%; }
		/*.btmbox_left_middel a { display: block;  height: 60px; line-height: 60px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;}*/
		.btmbox_left_bottom { width: 95% ; height: auto; margin: 2.5%; overflow: hidden; }
			.btmleft_btm_left { float: left; width: 49%; height: auto;}
			/*.btmleft_btm_left a { display: block;  height: 60px; line-height: 60px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;}*/
			.btmleft_btm_right { float: right; width: 49%; height: auto;}
			/*.btmleft_btm_right a { display: block;  height: 60px; line-height: 60px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;}*/


	#bottom_bannerbox_right {float:left; width: 50%; height: auto; }
		.btmbox_right_top {width: 95%; height: auto; margin: 2.5%; }
		/*.btmbox_right_top a  { display: block;  height: 60px; line-height: 60px; font-size: 1.25em; color: #FFF; font-weight:bold; background: #333;}*/
		.btmbox_right_bottom { width: 95%; height: 285px;  margin: 2.5%; padding-top: 55px;  }
		


#footer {width: 100%; height: auto; text-align: center; background: #333; box-sizing: border-box;}
	
	#info {width: 100%; height: 100px; padding-top: 20px; border-bottom: 1px solid #efefef ;}
	#info ul li {font-size: 1em; color: #efefef; margin: 2px; }

	#btm_query { display: none; width:1280px; height: 100px; margin:0 auto; text-align: left; overflow:hidden;}
		.btm_query { float: left; height: 100px;  margin-left: 38%;  width: 15%; overflow: hidden;  }
			.btm_query img { float: left;   margin-top: 20px; }
			.btm_query a { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; }
		.btm_query_tel  {  float: left; height: 100px;    width: 15%; overflow: hidden;  }
			.btm_query_tel img { float: left;  margin-top: 20px; }
			.btm_query_tel a  { float:left; display: block; height: 100px; line-height: 100px; font-size: 1em; color: #FFF; }



/*모바일*/
#side_nav { display: block; width: 240px; height: 100%; margin: 0 auto; padding-top: 20px;  position: absolute; z-index: 999; top: 0; left:-300px; background:#333;	}

.snav_no { text-align: right; margin-right: 5px; }

#back { font-size: 1.25em; line-height: 1.7em; text-align:right; margin-right: 15px; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #FFF; }
#snav {display: block; width: 234px; margin: 0 auto; background: #333;}
#snav > li > a { display: block; padding: 16px 18px; font-size: 1.25em; color: #FFF; text-decoration: none; border-bottom: 1px solid #212121;
				}
#snav > li > a:hover, #nav > li > a.open { color: #FFF;border-bottom-color: #384f76; background-color: #7F7F7F; }
#snav li ul { display: none; background: #CCCCCC;; }
#snav li ul li a { display: block; background: none; padding: 10px 0px; padding-left: 30px; font-size: 1.25em; text-decoration: none; color: #000; }
#snav li ul li a:hover { background: #CCCCCC; }

#full {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 800; background: transparent;  display:none;}



/*1280*/
@media screen and (max-width: 1280px) { 
	#nav_wrap {width: 100%; }
	#conbox_top {width: 100%; }
	#conbox_top_banner {width: 100%; }
	#conbox_middle {width: 100%; }
		.video {width: 100%; }
	#conbox_middle_custom {width: 100%; }
	#unit {width: 100%; }
	#conbox_bottom {width: 100%; }
	#btm_query {width: 100%; }
	
}

/*1180*/
@media screen and (max-width: 1180px) {
body {width:100%}
	.btmbox_left_top {height: 265px; padding-top: 55px; }
}


/*1024*/
@media screen and (max-width: 1024px) {
html, body {font-size: 14px;}
	.query_text{display: none; }
	.query_tel {display: block; }
	#contents {margin-bottom: 50px; }
	#top_main_img img{ }	
	#conbox_middle_video { margin-bottom: 40px; }
	.btmbox_left_top {width: 98%; height: 240px; margin: 2% 2% 2% 0 ; padding-top: 35px; }	
	.btmbox_left_middel {width: 98%;  margin: 2% 2% 2% 0 ; }	
	.btmbox_left_bottom { width: 98% ;  margin: 2% 2% 2% 0 ; }

	.btmbox_right_top {width: 98%; height: auto; margin: 2% 0 2% 2% ; }
	.btmbox_right_bottom {width: 98%; height: 240px; margin: 2% 0 2% 2% ; padding-top: 35px; }			
}



/*980*/
@media screen and (max-width: 980px)  { 

	#logo a { height: 50px; line-height: 50px; }
	.menu_title a {height: 50px; line-height: 50px;  }	
	.menu_title>ul>li {height: 30px;}
	.menu_title>ul>li a { height: 25px; line-height: 30px;}
	#query {height: 50px;}
	.query { float: left ; height: 50px; }
	.query img{ float: left ; height: 30px;  }
	.query_text { display: none;   }
	.query_tel { display: block; float: left ; height: 50px;   }
	.query_tel img{ display: block; float: left ; height: 30px;   }
	#contents {margin-bottom: 40px; }
	.btmbox_left_top {height: 230px; padding-top: 30px; }
	.btmbox_right_bottom {height: 230px; padding-top: 30px; }
	.video { width: 100%; height:400px;  }
	.video ifram{ width: 100%;   }
	
	.customer_service { width: 40% }
	.formmail { width: 60% }
	#btm_query {display:block; }
}



/*900*/
@media screen and (max-width: 920px)  { 
	#conbox_middle_video { margin-bottom: 30px; }
	.btmbox_left_top {width: 98%; height: auto; margin: 2% 2% 2% 0 ; padding: 30px 0 35px 0; }	

}

/*850*/
@media screen and (max-width: 850px)  { 
	.btmbox_left_top {width: 98%; height: auto; margin: 2% 2% 2% 0 ; padding: 25px 0 25px 0; }	
}




/*768*/
@media screen and (max-width: 768px)  { 
html, body {font-size: 12px;}
	

	.query  { margin: 15px 30px 0 30px; }
	#conbox_top_text { height: auto; margin: 30px 0 40px 0 }
	#conbox_top_banner a {height: 60px; line-height: 60px; }	
	.btmbox_left_middel a {height: 50px; line-height: 50px; }
	.btmleft_btm_left a {height: 50px; line-height: 50px; }
	.btmleft_btm_right a {height: 50px; line-height: 50px; }
	.btmbox_right_top a {height: 50px; line-height: 50px; }
	.btmbox_right_bottom { height: 200px; padding-top: 0;}
	#info { height: 80px; }
	#btm_query { height: 80px; }
	.btm_query { height: 80px; margin-left: 35%; margin-right: 10px; }
	.btm_query img  { width: 40px; }
	.btm_query a {height: 80px; line-height: 80px; }
	.btm_query_tel { height: 80px; }
	.btm_query_tel img {  width: 40px; }
	.btm_query_tel a {height: 80px; line-height: 80px; }
}




/*680*/
@media screen and (max-width: 680px)  { 
html, body {font-size: 11px;}
	.btmbox_left_top {  padding: 20px 0 20px 0;}
	.video { width: 100%; height:350px;  }
	.video ifram{ width: 100%;   }
	.banner-title a{margin-bottom: 10px;}
	#top_tel {display: block;}
}





/*600*/
@media screen and (max-width: 600px)  { 
html, body {font-size: 14px;}
	#logo {text-indent:0; text-align: center;}
	#logo a {font-size: 0.875em }
	#nav {width: 65%; }
	.menu_title a {font-size: 0.875em ;}
	.conbox_top_title {margin: 10px 0 10px 0}
	#query { width: 15%; }
	.query {margin: 10px 15px 0 15px; }
	.query img { width: 70%; }
	.video { width: 100%; height:300px;  }
	.video ifram{ width: 100%;   }
	.customer_service { width: 100% ; height:auto; padding:10px 0 30px;}
	.m_shadowLine {display: block; }
	.formmail { width: 100% ;  height:auto; padding:20px 0 20px; }
	#bottom_bannerbox_left { width: 100%}
	#conbox_bottom_text { margin: 20px 0 30px 0; }
	.btmbox_left_top {display:none;}
	.btmbox_left_middel { width:100%; margin: 2% 0 2% 0; }
	.btmbox_left_bottom { width:100%; margin: 2% 0 2% 0; }
	#bottom_bannerbox_right { width: 100%}
	.btmbox_right_top {display:none;}
	.btmbox_right_bottom {  height: auto; width:100%; margin: 2% 0 2% 0; }
	.btm_query  { margin-left:0; margin-right:0; width: 50%; padding-left: 30%}
	.btm_query_tel  { margin-left:0; margin-right:0; width: 50%; padding-right:20%;}
}





/*550*/
@media screen and (max-width: 550px)  { 
	#logo { display: none; }
	#m_logo { display: block;}	
	#nav { width: 100%;}	
	.menu_title  a {font-size: 1em ;}
	.menu_sub1 a, .menu_sub2 a, .menu_sub3 a, .menu_sub4 a, .menu_sub5 a, .menu_sub6 a { font-size: 0.875em; } /*font-size:14px*/ 
	#query {display: none; }
	#top_main_img img { }
	#top_main_img {display: none; }
	#mtop_main_img {display: block; }
	.conbox_top_img img {width: 25px; margin-top: 10px;}
	
	
}
/*500*/
@media screen and (max-width: 500px)  { 
	.btm_query  { padding-left: 25%}
	.btm_query_tel  { padding-right:20%;}
	.video { width: 100%; height:280px;  }
	.video ifram{ width: 100%;   }
}


/*480*/
@media screen and (max-width: 480px)  {
html, body {font-size: 11px;}
	.menu_title a {font-size: 1.125em ; letter-spacing :-0.1em ;}
	.menu_sub1, .menu_sub2, .menu_sub3, .menu_sub4, .menu_sub5, .menu_sub6 {letter-spacing :-0.1em ; text-overflow : ellipsis;}
	.menu_sub1 a, .menu_sub2 a, .menu_sub3 a, .menu_sub4 a, .menu_sub5 a, .menu_sub6 a { font-size: 1em; }
	.btm_query  { padding-left: 20%}
	.btm_query_tel  { padding-right:20%;}
}

/*360*/
@media screen and (max-width: 360px)  {
	.video { width: 100%; height:280px;  }
	.video ifram{ width: 100%;   }

}