@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);




/* ==========================================================================
	Normalize and reset CSS
========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, header_left, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; list-style: none;}


/* =============================================================================
Header
========================================================================== */

/*----------Top----------*/


/* ----------------- Mobile Navigations ----------------- */

.wf100_menu {
	display: none;
	width: 160px;
	height: 100%;
	min-height: 100%;
	position: fixed;
	right: -161px;
	top: 0;
	overflow-x: hidden;
	z-index: 16;
	background-color:#2d2d2d;
	border-left:1px solid #444;
	border-bottom:1px solid #444;
	font-family:'Nanum Gothic Coding'
}
.wf100_menu div.menu_title{font-family:'Nanum Gothic Coding', serif; text-align:center;  line-height:120%; color:#eee; font-size:12px; padding:5px; letter-spacing:-0.1em;}
.wf100_menu ul{list-style: none; margin:5px 0;}
.wf100_menu ul li{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; color:#eee;}
.wf100_menu ul li a{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; text-decoration:none; color:#eee;}
.wf100_menu ul li a:hover{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; text-decoration:none; color:#eee;}



.header {
	position: fixed;
	top: 0;
	right: 0px;
}

.header_left {
	position: fixed;
	top: 0;
	left: 0px;
}

.wf100_menu_left {
	display: none;
	width: 160px;
	height: 100%;
	min-height: 100%;
	position: fixed;
	left: -161px;
	top: 0;
	overflow-x: hidden;
	z-index: 17;
	background-color:#ffffff;
	border-right:1px solid #bbb;
	border-bottom:1px solid #bbb;
	font-family:'Nanum Gothic Coding'
}
.wf100_menu_left div.menu_title{font-family:'Nanum Gothic Coding', serif; text-align:center;  line-height:120%; color:#000; font-size:12px; padding:5px; letter-spacing:-0.1em;}
.wf100_menu_left ul{list-style: none; margin:5px 0;}
.wf100_menu_left ul li{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; color:#2d2d2d;}
.wf100_menu_left ul li a{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; text-decoration:none; color:#2d2d2d;}
.wf100_menu_left ul li a:hover{ width:100%; font-size: 14px; padding:10px 0; text-align:center; letter-spacing:-0.1em; text-decoration:none; color:#2d2d2d;}


/* ----------------- 실제 모바일 메뉴움직이는 부분 시작 ----------------- */
.wf100_menu, .header {
	-webkit-transition: all .30s ease;
	-ms-transition: all .30s ease;
	transition: all .30s ease;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wf100_menu.showNav, .header.showNav {
	-webkit-transform: translateX(-160px);
	-ms-transform: translateX(-160px);
	transform: translateX(-160px);
}

/* ----------------- 좌측 메뉴 시작 ----------------- */
.wf100_menu_left {
	-webkit-transition: all .30s ease;
	-ms-transition: all .30s ease;
	transition: all .30s ease;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.header_left {
	-webkit-transition: all .30s ease;
	-ms-transition: all .30s ease;
	transition: all .30s ease;
	-webkit-transform: translateX(0px);
	-ms-transform: translateX(0px);
	transform: translateX(0px);
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.wf100_menu_left.showNav {
	-webkit-transform: translateX(160px);
	-ms-transform: translateX(160px);
	transform: translateX(160px);
}


.header_left.showNav {
	-webkit-transform: translateX(160px);
	-ms-transform: translateX(160px);
	transform: translateX(160px);
}
/* ----------------- 좌측 메뉴 끝 ----------------- */

/* ----------------- 메뉴버트 관련 처리 시작 ----------------- */


@media all and (max-width: 900px) {
.wf100_menu { display: inline-block; }
}

@media all and (max-width: 900px) {
.wf100_menu_left { display: inline-block; }
}


/* ----------------- 메뉴버트 관련 처리 끝 ----------------- */

/* ----------------- 실제 모바일 메뉴움직이는 부분 끝 ----------------- */
}

#wrap{width:auto; margin:0 auto;}

#Navi{width:100%; position:absolute; padding:0px; margin:0px; top:0; z-index:50; }


/*contents*/
#main{width:100%; position:relative; padding:0px; margin:0;  background-color:#ffffff;}
#main div.m_logo{width:100%; text-align:center; padding:15px 0;}
#main div.m_img{width:100%; text-align:center; padding:20px 0 0 0;}
#main p.tl{width:100%; font-family:'Nanum Gothic Coding', serif; text-align:center; color:#000; font-size:17px; font-weight:bold; padding:10px 0; letter-spacing:-0.1em;}
#main div.m_btn{width:100%; text-align:center; padding:30px 0;}
#main div.m_btn img{ margin:1px;}


/*실내온도조절기*/
#manual{width:100%; position:relative; padding:0px; margin:60px 0 0 0;  background-color:#fff;}
#manual div.m_title{width:100%; margin:0; padding:40px 0 15px 0;  text-align:center; font-family:'Nanum Gothic Coding', serif; font-size:16px; letter-spacing:-0.1em; }
#manual div.s_title{width:100%; margin:0; padding:30px 0 40px 0; text-align:center; font-family:'Nanum Gothic Coding', serif; font-size:40px; font-weight:bold; letter-spacing:-0.1em; }
#manual p.line{width:100%; margin:0; padding:0;  text-align:center;}
#manual div.contents{width:100%; margin:0; padding:0  0 20px 0;  text-align:center; font-family:'Nanum Gothic Coding', serif;}
#manual div.contents p.expl_img{ padding:0;  text-align:center; margin:10px 0;}
#manual div.contents p.expl_img2{ padding:0;  text-align:center; margin-top:-10px;}
#manual div.contents p.expl_copy{margin:0; padding:10px 10px 50px 10px;  text-align:center;  line-height:140%; font-family:'Nanum Gothic Coding', serif; font-size:13px; color:#222; letter-spacing:-0.1em;}
#manual div.contents p.dotted {margin:0 10px; padding:0; border-bottom:dashed 1px #ccc; height:1px;}
img.tx_img{ margin-bottom:-5px;}
p.notice{width:100%; margin:0; padding:7px 0;  text-align:center; font-family:'Nanum Gothic Coding', serif; font-size:17px; font-weight:bold; color:#222;}

#manual div.contents table.code{max-width:700px; margin:0 15px;  border-collapse:collapse; padding:0; font-family:'Nanum Gothic Coding', serif; font-size:13px; color:#222; border:1px solid #999;}
#manual div.contents table.code td{border_bottom:1px solid #aaa; border_top:1px solid #aaa; padding:7px; text-align:left; font-size:13px;}
#manual div.contents table.code td.error{ text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:35px; padding:7px;}
#manual div.contents table.code td.tl{ background-color:#CCC; margin:0; border_bottom: 1px solid #aaa; border_top: 1px solid #aaa; padding:7px; text-align:left;}


#app{width:100%; position:relative; padding:60px 0 0 0; margin:0;  background-color:#2d2d2d; color:#eee;}
#app div.m_title{width:100%; margin:0; padding:40px 0 15px 0;  text-align:center; font-family:'Nanum Gothic Coding', serif; font-size:16px; letter-spacing:-0.1em; }
#app div.s_title{width:100%; margin:0; padding:30px 0 40px 0; text-align:center; font-family:'Nanum Gothic Coding', serif; font-size:40px; font-weight:bold; letter-spacing:-0.1em;}
#app p.line{width:100%; margin:0; padding:0;  text-align:center;}
#app div.contents{width:100%; margin:0; padding:0  0 20px 0;  text-align:center;}
#app div.contents p.expl_img{ padding:0;  text-align:center; margin:10px 0;}
#app div.contents p.expl_copy{margin:0; padding:10px 10px 50px 10px;  text-align:center;  line-height:140%; font-family:'Nanum Gothic Coding', serif; font-size:13px; color:#eee; letter-spacing:-0.1em;}
#app div.contents p.dotted {margin:0 10px; padding:0; border-bottom:dashed 1px #555; height:1px;}





#con .as {float:left; width:100%; vertical-align:top; margin-bottom:20px; padding-bottom:10px; background-color:#de5683;}
#con .as .img_area{float:left; width:100%; text-align:center; vertical-align:top;}
#con .as .img_area p{margin:5px 15px 7px 15px; font-size:12px; color:#888;}
#con .as .big_copy{font-family:Dotum; font-size:14px; color:#666; line-height:120%; text-align:left; margin:10px 0px 20px 7px; padding-right:-15px; letter-spacing:-0.5px;}
#con .as .input_area{float:left; width:auto; vertical-align:top; border:#f2a7c0 solid 1px; padding:3px 3px 3px 3px; margin:3px 7px 15px 7px;}
#con .as .input_area h1 {color:#de5683; font:bold 13px "Dotum", Arial, sans-serif; background-color:#FFF;  padding:3px 3px 3px 3px; margin-bottom:10px;}
#subForm {font-size:12px; color:#FFF; width:298px;}
#subForm  p{margin-top:10px; margin-bottom:10px;}
.agree_check{width:auto; background-color:#c93163; padding:4px 4px 4px 4px; font-size:11px; margin-left:3px; margin-right:3px;}
#subForm .label {float:left; clear:left; width:65px; text-indent:3px; text-align:left; font-weight:bold; font-size:14px;}
#subForm input#name, input#email, textarea#comments {width:210px; font-family:"Dotum"; font-size:12px; padding:3px 3px 3px 3px;}
#subForm input#address{width:210px; font-family:"Dotum"; font-size:12px; padding:3px 3px 3px 3px; margin-left:65px; margin-top:-5px;}
#subForm input#post{width:40px; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:3px 3px 3px 3px;}
#subForm input#phone {width:50px; font-family:Arial, Helvetica, sans-serif; font-size:12px; padding:3px 3px 3px 3px; margin-left:5px;}
#subForm select#num {font-family:"Dotum";}
#subForm input#post_sch {font-family:"Dotum"; font-size:11px;}
#subForm  input#subscribe {font-family:"Dotum"; font-size:12px; width:80px; background-color:#333; border:1px solid #000; color:#FFF; font-weight:bold; margin-left:67px; padding:3px 0px 3px 0px;}
.radio_tx{margin-left:3px; margin-right:15px;}
.ck_tx{margin-left:2px; margin-top:-4px;}
#con .as .input_area .privacy{float:left; width:auto; vertical-align:top; padding:10px 10px 10px 10px; margin:3px 3px 10px 3px; background-color:#f9d8e3; font-family:"Dotum"; font-size:11px;}
#con .as .input_area .privacy p{letter-spacing:-1px; color:#555;}






/*footer*/
#ft {width:100%; position:relative; height:auto; margin:0px; padding:0px; background-color:#fff;}
p.bt_logo{padding:20px 0 0 0; text-align:center;}
p.bt_logo img{ width:inherit;}
p.copyright{padding:10px 0 30px 0; text-align:center; font-family:Tahoma, Geneva, sans-serif; font-size:11px; color:#777;}
p.bt_phone {font-family: 'Nanum Gothic Coding', serif; text-align:center; color:#777; font-size:15px; padding:15px 0 0 0;}
p.bt_phone a{font-family: 'Nanum Gothic Coding', serif; text-align:center; color:#777; font-size:15px; text-decoration:none;}
p.bt_phone a:hover{font-family: 'Nanum Gothic Coding', serif; text-align:center; color:#777; font-size:15px;  text-decoration:none;}
p.as_link{padding:40px 0 ; text-align:center; font-size:17px; color:#bbb; border-bottom:solid 1px #383838; font-family: 'Nanum Gothic Coding', serif;}
p.as_link a{ text-decoration:none; color:#bbb; font-size:17px;}
p.as_link a:hover{ text-decoration:none; color:#eee; font-size:17px;}