@import "style.css";


body{
    margin:0px;
	padding:0px;
	OVERFLOW:auto ;
	background:#fff;
	}

html, div, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, from{
    margin:0;
	padding:0;
	}


ul, ol, dl { 
    list-style:none;
	}
	
img {

    border:0;
	
	}

/*---------------------탑메뉴bar스타일end----------------------------------*/	
	
#main {
	clear:both;
	POSITION: relative ; 
	WIDTH:100vw;
	Z-INDEX: 1;
	TOP:0px;
	text-align:center;
}

#main_link {position:absolute; width:100%; height:100%;Z-INDEX:2;}
#main_link a {display:block; width:100%; height:100%;}

/* main_Visual
-----------------------------------------------------------------------------*/
.animation_canvas {  position:relative; width:100%; height:100%; z-index:-1;  }

.slider_panel { position:relative; width: 100%; height:75vh; position:relative; }
.slider_image { position: absolute; left:0; top:0; width:100%; height:75vh;  opacity:0; 
}

.slider_panel .img1 { background:url(image/main1.jpg) no-repeat center top;background-size:cover;-webkit-background-size: cover; -moz-background-size: cover;-o-background-size:cover; }
.slider_panel .img2 { background:url(image/main2.jpg) no-repeat center top;background-size:cover;-webkit-background-size: cover; -moz-background-size: cover;-o-background-size:cover; }


.slider_text_panel { position:absolute; top:30%; left: 0px; width: 100%;  }
.slider_text_panel h1{ font-size:3.5em; color:#fff; font-weight:500;letter-spacing:-1px; margin:0% ; text-align:center;text-shadow: 1px 1px 3px #7e7e7e;}
.slider_text_panel h1 span {font-weight:300;}

/*.slider_text_panel .slider_text { width:1100px; height:100px;  position:absolute; left:50%; top:0%; margin-left: -550px; }
.slider_text_panel .txt1 {}
.slider_text_panel .txt1 .text1 { float:left; position: absolute; left: 50%; top:30%; margin-left:-430px; opacity: 0; filter: alpha(opacity=0); font-size:2em; color:#fff; font-weight:500;letter-spacing:-1px; }
.slider_text_panel .txt1 .text2 { position: absolute; left: 50%; top:30%; margin-left:-20px; opacity: 0; filter: alpha(opacity=0);font-size:46px; color:#fff;font-weight:300;letter-spacing:-1px; }
.slider_text_panel .txt1 .text3 { position: absolute; left: 50%; top:30%; margin-left:160px; opacity: 0; filter: alpha(opacity=0);font-size:46px; color:#fff;font-weight:500;letter-spacing:-1px; }*/

.control_panel { position:absolute; top:70vh;left:50%; margin-left:-50px; width:100px; height: 20px; overflow:hidden; z-index: 100; }
.control_panel .control_button { width:30px; height:10px; position:relative; float:left; cursor:pointer; display:inline-block; background:#666;  margin: 5px 5px 0 0; }
.control_panel .control_button.active { background:#00a2e0; }
.control_panel .first { margin: 5px 5px 0 7px; }

/*- --------------------//End main_Visual ------------------------------ -*/

@media (max-width:640px) {
	
	.slider_panel { height:43vh;}
	.slider_image { height:43vh; }
	.slider_panel .img1 { background:url(image/main1m.jpg) no-repeat center top;background-size:cover; }
	.slider_panel .img2 { background:url(image/main2m.jpg) no-repeat center top;background-size:cover; }
	
	.slider_text_panel { top:20%; left: 0px; width: 100%;  }
	.slider_text_panel h1{ font-size:1.8em;margin:0% 10%; }
	
	
	.control_panel { position:absolute; top:38vh;}
	.control_panel .control_button { height:6px;}
}




/* ******************  제품소개 ********************** */

#m_pro{
 	POSITION:relative; z-index:1;
	WIDTH:100%; height:100%; overflow:hidden; 
	text-align:center;
	left:0px;
	top:0px;
	margin:0 auto; background:url(image/m_pro_bg.gif) no-repeat center top; padding:0px 0 0 0
}



#m_pro h1{font-size:35px; color:#fff;padding:0px 0 0px 0px; letter-spacing:-1px; font-weight:500;  line-height:45px;  margin:40px  auto 40px  auto}
#m_pro h1 span { display:block; font-size:16px; font-weight:300;line-height:25px;  }

.list_carousel {width:90%; height:100%; overflow:hidden;  margin:0  auto;box-sizing:border-box; padding:0 60px 80px 60px;	}
.list_carousel ul {margin:0px auto;padding: 0 0 0px 0;list-style: none;z-index:105;width:100%; }
.list_carousel li {text-align:center;width:18vw; min-height:350px;padding:0px;margin:0px 0.5vw 1vh 0.5vw;display:block;float:left;background:#fff; /*border:1px solid #d9d9d9;*/box-sizing:border-box;	box-shadow: 1px 3px 5px #7e7e7e;}
.list_carousel li span {display:block;  margin:5px auto; text-align:center; color:#2a2a2a; font-size:20px; line-height:25px; font-weight:500;}
.list_carousel li .mmore { display:block; margin:10px auto 30px auto; text-align:center;}
.list_carousel li a .mmore  { display:inline-block; background:#595959; color:#f8f8f8; width:35px; padding:0px 0px; font-size:40px; color:#fff; line-height:35px;font-weight:300;}
.list_carousel li a:hover .mmore { background:#32b8df;}
.list_carousel li img {width:90%;}
.list_carousel.responsive {width:90%; height:100%;	box-sizing:border-box;}

.prev { top:0;float: left;margin-left:5px; /*border:1px solid rgba(255,255,255,0.2);*/ }
div.next_box { z-index:80; width:100%; max-width:1300px; height:100%; overflow:hidden;top:0px;margin:-100px auto 40px auto; left:0px; text-align:left;}
.next {top:0;z-index:80;float: right;margin-right:5px; /*border:1px solid rgba(255,255,255,0.2);*/}

div.next_box img {max-width:100%;vertical-align:middle;}
div.next_box  a {color:#fff; font-size:12px;}


@media all and (max-width:1200px){
	.list_carousel {width:100%;margin:0; padding:0px 30px 60px 30px;}
	div.next_box  { width:100%; max-width:1200px;}
	.list_carousel li {width:28vw;}
	.list_carousel.responsive {width:100%;}
}

@media all and (max-width:700px){
	.list_carousel{padding:0 0px 60px 0px;	}
	.list_carousel li {width:44vw;margin:0px 1.5vw 2vh 1.5vw;}
	
}

@media all and (max-width:640px){
	.list_carousel{padding:0 0px 30px 0px;	}
	#m_pro h1{font-size:30px;   margin:30px  auto 30px  auto}
	#m_pro h1 span {  font-size:13px; font-weight:300;line-height:20px;  }
	
	.list_carousel li span { font-size:16px; line-height:20px; }
	
	.list_carousel li a .mmore  {  width:25px; font-size:30px;  line-height:25px;}
	
	div.next_box { z-index:80; width:90%; max-width:90%; margin:-80px auto 30px auto;}
	div.next_box img { width:20px;}
}

@media all and (max-width:320px){
	.list_carousel{padding:0 20px 60px 20px;	}
	.list_carousel li {width:94vw;}
	
}

/***콘텐츠***/
#content:after {clear:both;display:block;content:"";}
#content {
	POSITION:relative;
	WIDTH:100%;height:100%; overflow:hidden;
	text-align:center;
	top:0px;
	margin:0 auto; background:url(image/m_con_bg.jpg) no-repeat bottom; padding:0px 0 0 0; background-size:cover;
	
}

#content_in:after {clear:both;display:block;content:"";}
#content_in {
	POSITION:relative;
	WIDTH:100%; height:100%; overflow:hidden;
	text-align:center;
	top:0px;
	margin:40px auto 80px auto; z-index:5;
}

#content_in  h1{font-size:35px; color:#202020;padding:0px 0 0px 0px; letter-spacing:-1px; font-weight:500;  line-height:45px;  margin:40px  auto 40px  auto}
#content_in  h1 span { display:block; font-size:16px; font-weight:300;line-height:25px; color:#8d8d8d;  }
 
/* 고객지원 */
ul.content_box:after {clear:both;display:block;content:"";}
ul.content_box{
	list-style:none;
	position:relative;
	margin:0px  auto 0px  auto;
	width:68%;
 	clear:both;
	top:0px; padding:0 0px 20px 0px
}

ul.content_box > li{
	width:31%;
	padding:0px 0 0 0px;
	float:left; background:#fff;
	position:relative; margin:0 1%;box-sizing:border-box;	box-shadow: 1px 3px 5px #7e7e7e;
	
}
ul.content_box > li > a img { width:100%;}


ul.content_box > li > a{
	display:block;
	background:none;
	color:#f8f8f8;
	text-decoration:none;
	font-weight:400;
	font-size:18px;
	text-align:left;
	/*text-shadow:0px 0px 1px #000;
	opacity:0.8;*/
	}


ul.content_box > li > a ul { width:90%;margin:0px  5% 0  5%;  height:100% !important; overflow:hidden !important;  text-align:center;box-sizing:border-box;}
ul.content_box > li > a ul h2 {font-size:25px ; font-weight:500; color:#272727; margin:30px 0 0 0 }
ul.content_box > li > a ul h2 span {display:block !important;width:90px; height:1px; background:#32b8df;  margin:20px auto;}
ul.content_box > li > a ul li { color:#454545; font-size:13px;  overflow:hidden; font-weight:300; margin:10px 0 0 0}
ul.content_box > li > a ul li.mmore_pro {display:inline-block; background:#595959; color:#f8f8f8; width:35px; padding:0px 0px; font-size:40px; color:#fff; line-height:35px;font-weight:300;margin:20px auto 30px auto;}
ul.content_box > li > a:hover ul li.mmore_pro {background:#32b8df; ;}

ul.content_box > li > a:hover,
ul.content_box > li.selected > a{
	
	color:#fff;
	opacity:1.0;
}
.oe_wrapper ul.hovered > li > a{
	/*background:#fff;
	text-shadow:0px 0px 1px #FFF;*/
}


@media all and (max-width:1200px){
	
	ul.content_box{margin:0px  auto 0px  auto;	width:90%;}
	
}
@media all and (max-width:800px){
	
	#content_in {margin:0px auto 20px auto; z-index:5;}
	
}


@media all and (max-width:640px){
	#content_in  h1{font-size:30px;   margin:30px  auto 20px  auto}
	#content_in  h1 span { font-size:13px; line-height:20px; }
	
	
	
	ul.content_box > li{width:98%; height:100%; overflow:hidden;float:none; background:#fff; margin:0 1% 4% 1%;box-sizing:border-box;	box-shadow: 1px 2px 2px #7e7e7e;}
	ul.content_box > li > a img { float:left;	 width:60%;}
	ul.content_box > li > a ul {float:left;width:38%;margin:0px;   text-align:center; }	
	ul.content_box > li > a ul h2 { margin:40px auto 0 auto;}
	ul.content_box > li > a ul li.mmore_pro {width:25px; font-size:30px;  line-height:25px;}
}

@media all and (max-width:480px){
	
	
	
    ul.content_box > li > a ul h2 {font-size:18px ; margin:25px auto 0 auto;}
	ul.content_box > li > a ul li {  font-size:12px; margin:5px 0 10px 0}
	ul.content_box > li > a ul li.mmore_pro {margin:10px auto 20px auto;}

  	
}

@media all and (max-width:320px){
	
	
	ul.content_box > li > a img { float:none;	 width:100%;}
	ul.content_box > li > a ul {float:none;width:100%;margin:0px;   text-align:center; }	
	ul.content_box > li > a ul h2 {font-size:18px}
	
}


/* END 실적리스트 */


/* ****************** 퀵메뉴바 ********************** */

/* .qmenu_wrap = main.css / content.css 에 있음 */

.qmenu_wrap {
	clear: both;
	height:100%;
	position: fixed;
	right:30px;
	z-index:50000;margin:-1600px 0 0 0; 
}



.qmenu_main {width:228px;
	top:0px;
	/*border:1px solid #fff;border-left:1px solid #8ab724;*/
	position:relative; background:url(image/m_tel_bg.png) no-repeat center;
	
}

/* qmenu_견적문의 */
div.qtel {height:100%; overflow:hidden;  margin:0px 0 0px 0;}
div.qtel .qbox {margin:60px 20px;height:100%; overflow:hidden;}
div.qtel h1 {color:#f8f8f8;font-size:18px; text-align:center; font-weight:400; margin:0 0 0px 0}
div.qtel h1.mtxt {display:none;}
div.qtel p {font-size:32px; color:#fff; margin:0 0 0px 0; font-weight:500; line-height:35px; text-align:center; letter-spacing:-1px;}
div.qtel p span {display:none;font-size:15px; color:#f8f8f8; margin:30px 0 0px 0;font-weight:300; line-height:20px;}
div.qtel p.pcicon {margin:10px auto;}
div.qtel p.micon {margin:30px auto; display:none;}

div.qtel .qbox a {display:block; width:100%; height:100%;}

@media all and (max-width:1300px){

}

@media all and (max-width:1240px){
	/* ****************** 퀵메뉴바 ********************** */
	div.qmenu_wrap {position: relative;
	width:100%;  margin:0px 0 0 0;
	left:0px;right:0;bottom:0px;}
	
	.qmenu_main {width:100%;height:100%; overflow:hidden; background:url(image/m_tel_bg02.gif) repeat }
	/* qmenu_견적문의 */
	div.qtel {   width:30%; margin:0px auto; text-align:center; }
	div.qtel h1{display:none;}
	div.qtel h1.mtxt { display:block;color:#f8f8f8;font-size:16px; line-height:30px;  background:#595959;}
	div.qtel p {font-size:40px; color:#23558c;margin:20px  auto 0 auto;line-height:50px;  }
	div.qtel p span {display:block;}
	div.qtel p.pcicon {margin:10px auto; display:none;}
	div.qtel p.micon { display:block;margin:20px auto 0 auto; padding:0px 0 0 0;}
	
	
}

@media all and (max-width:1170px){
	


}
@media all and (max-width:900px){
	
	div.qmenu_wrap { margin:0px 0 0 0;	}
}


@media all and (max-width:768px){
	
	div.qtel {  float:none; width:100%;min-height:100%;   }
	div.qtel .qbox {margin:30px 20px;height:100%; overflow:hidden;}
}

@media all and (max-width:650px){

	
	/* qmenu_견적문의 */
	
	div.qtel h1 {font-size:18px;}
	div.qtel p {font-size:32px;margin:0px 0 0 0;line-height:35px; }
	div.qtel p span {display:none;}
	

	
	
	
}