/* Written By MJS */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
@font-face { font-family: 'NotoSerifKR'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NotoSerifKR.woff') format('woff'); font-weight: normal; font-style: normal; }

*{-webkit-text-size-adjust:none}
body, form, div, p, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, fieldset, th, td, input, textarea,button,select{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;font-weight:normal}
body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}
li{list-style:none}
a{text-decoration:none;color:#333}
a[href^="tel"]{ font-style:normal}
address, caption, em, var{font-style:normal;font-weight:normal}
input, textarea, select{letter-spacing:normal}
ol, ul, dl{list-style:none}
fieldset, img{border:0}
legend, caption{display:none}
img{border:0;vertical-align:top}
hr{display:none}
table{border-collapse:collapse;border-spacing:0}
br{letter-spacing:normal}
p{letter-spacing:normal}
input{vertical-align:middle}
input[type="text"], input[type="password"]{-webkit-appearance:none}
input[type="checkbox"]{-webkit-appearance:none;-webkit-border-radius:0}
input:checked[type="checkbox"]{-webkit-appearance:checkbox}
input[type="radio"]{border:none;-webkit-appearance:none}
button,input[type="button"],input[type="submit"],input[type="reset"],input[type="file"]{-webkit-appearance:button;border-radius:0}
textarea{-webkit-appearance:none}
select{-webkit-appearance:menulist-text}

body{min-width:320px;max-width:1000px;height:100%;margin:0 auto;}





/*================================== 상단 ==================================*/
#header{position:relative;float:left;width:94%;padding:3%;}
a.logo{float:left;width:66%;margin-right:20%;}
a.icon{float:left;width:14%}


/* 메뉴 5종 */
#menu{position:relative;float:left;width:100%;background:#008842;}
#menu ul{position:relative;}
#menu ul li{float:left;width:33%;border-left:1px solid #fff;border-bottom:1px solid #fff;}
#menu ul li a{float:left;display:block;width:100%;padding:8% 0;text-align:center;font-size:15px;letter-spacing:-0.1em;color:#fff;letter-spacing:-1px;font-weight:bold;}




/*================================== 메인 ==================================*/
#slideShowImages{position:relative;float:left;width:100%;overflow-x:hidden;}
#slideShowImages img{position:relative;}


/* 하니컴판넬이란? */
.m_honey{position:relative;float:left;width:100%;}


/* 제품리스트 */
#photo{position:relative;float:left;width:100%;}
.photo_w{position:relative;float:left;width:94%;padding:6% 3%;}
.m_title{float:left;width:100%;font-size:140%;margin-bottom:3%;font-weight:600;text-align:left;color:#000;}
.photo_w ul{float:left;width:104%;margin-left:-2%;}
.photo_w ul li{float:left;width:46%;margin:0 2%;}
a.more{position:absolute;top:8%;right:3%;font-size:140%;font-weight:600;color:#000;}



/*================================== 하단 ==================================*/
#footer{position:relative;float:left;width:100%;}
.info{position:relative;float:left;width:100%;}
.info img{float:left;width:50%;}
.copy{position:relative;float:left;width:100%;text-align:center;padding:4% 0 2% 0;color:#898989;font-size:12px;}

/* 버튼 style */
#button{position:relative;float:left;width:100%;padding:4% 0;text-align:center;margin-bottom:4%}
.btn{margin:0 1%;padding:2% 4%;font-size:76%;color:#898989;
background:#fff;
border:1px solid #ccc;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
behavior:url(ie-css3.htc);}






/*================================== 서브 ==================================*/
#sub_content{position:relative;float:left;width:100%;}


/* 서브 메뉴 */
.sub_menu{position:relative;float:left;width:94%;padding:4% 3%;background:#f9f9f9;border-bottom:1px solid #ccc}
.sub_menu h3{float:left;width:100%;font-size:18px;line-height:150%;font-weight:600;color:#000;}
.sub_menu ul{float:left;width:100%;margin:2% 0;}
.sub_menu ul li{float:left;padding:0 3%;line-height:90%;border-left:1px solid #ccc;}
.sub_menu ul li:first-child{padding-left:0;border-left:none}
.sub_menu ul li a{font-size:14px;font-weight:bold;color:#898989;letter-spacing:-1px;}
.sub_menu ul li a.on{font-weight:bold;color:#000;}


.page{position:relative;float:left;width:94%;min-height:200px;padding:8% 3%;margin-bottom:5%;}



/* 인사말 */
#greeting{position:relative;float:left;width:100%;min-height:300px;background:url(../../img/gree_bg.jpg) no-repeat;background-size:100%;}
#greeting:after{content:"";position:absolute;left:50%;top:50%;display:block;width:90%;height:50%;background:url(../../img/gree_txt.png) no-repeat;background-size:100%;margin:-7% 0 0 -45%;z-index:1;}


/* 찾아오시는길 */
.add{position:relative;float:left;width:100%;line-height:22px;font-size:14px;font-weight:600;color:#333;margin-top:4%;}


/* 색상표 */
.color_list{float:left;width:100%;}
.color_list ul{float:left;width:104%;margin-left:-2%;}
.color_list ul li{float:left;width:29%;margin:0 2%;}
.color_list ul li p{float:left;width:100%;font-size:90%;font-weight:600;color:#333;margin-top:2%;letter-spacing:-1px;text-align:center;}


/* 시공내역 */
.build_list{float:left;width:100%;}
.build_list ul{float:left;width:104%;margin-left:-2%;}
.build_list ul li{float:left;width:48%;margin:0 2%;}
.build_list ul li p{float:left;width:100%;font-size:90%;font-weight:600;color:#333;margin-top:2%;letter-spacing:-1px;text-align:center;}


/* 화장실칸막이-하드웨어 */
.hard_list{float:left;width:100%;}
.hard_list ul{float:left;width:102%;margin-left:-1%;}
.hard_list ul li{float:left;width:48%;margin:0 1%;}
.hard_list ul li p{float:left;width:100%;font-size:90%;font-weight:600;color:#333;margin-top:2%;letter-spacing:-1px;text-align:center;}


/* 고객센터 */
.cs_center{float:left;width:100%;min-height:230px;}
.cs_left{float:left;width:48%;min-height:198px;padding:4%;background:#f9f9f9;}
.cs_left_tt{float:left;font-size:140%;font-weight:bold;color:#b0b0b0;letter-spacing:-2px;margin-bottom:4%;}
.cs_left_txt{float:left;font-size:80%;line-height:150%;color:#555;}
.cs_right{float:left;width:44%;min-height:230px;background:url(../img/6-1.jpg) no-repeat 0 0;background-size:100%;}













/* 이미지 크기 제멋대로일때 잡아주는 소스 */
@media screen and (min-width:320px) and (max-width:420px) {
.color_list ul li{position:relative;float:left;width:48%;min-height:240px;margin:1% 1% 3% 1%;}
.build_list ul li{position:relative;float:left;width:48%;min-height:180px;margin:1% 1% 3% 1%;}
.hard_list ul li{position:relative;float:left;width:48%;min-height:180px;margin:1% 1% 3% 1%;}



.cs_center{float:left;width:100%;min-height:200px;}
.cs_left{float:left;width:58%;min-height:146px;padding:4%;background:#f9f9f9;}
.cs_left_tt{float:left;width:100%;font-size:140%;font-weight:bold;color:#b0b0b0;letter-spacing:-2px;margin-bottom:4%;}
.cs_left_txt{float:left;width:100%;font-size:70%;line-height:120%;margin-bottom:4%;color:#555;}
.cs_left_txt2{float:left;width:100%;font-size:70%;line-height:140%;color:#555;}
.cs_right{float:left;width:100%;width:34%;min-height:200px;background:url(../img/6-1.jpg) no-repeat 0 0;background-size:100%;}
}

@media screen and (min-width:421px) and (max-width:767px) {
.color_list ul li{position:relative;float:left;width:48%;min-height:320px;margin:1% 1% 3% 1%;}
.build_list ul li{position:relative;float:left;width:48%;min-height:320px;margin:1% 1% 3% 1%;}
.hard_list ul li{position:relative;float:left;width:48%;min-height:220px;margin:1% 1% 3% 1%;}



.cs_center{float:left;width:100%;min-height:460px;}
.cs_left{float:left;width:48%;min-height:318px;padding:4%;background:#f9f9f9;}
.cs_left_tt{float:left;width:100%;font-size:220%;font-weight:bold;color:#b0b0b0;letter-spacing:-2px;margin-bottom:4%;}
.cs_left_txt{float:left;width:100%;font-size:90%;line-height:120%;margin-bottom:6%;color:#555;}
.cs_left_txt2{float:left;width:100%;font-size:90%;line-height:140%;color:#555;}
.cs_right{float:left;width:44%;min-height:460px;background:url(../img/6-1.jpg) no-repeat 0 0;background-size:100%;}
}

@media screen and (min-width:768px) and (max-width:1023px) {
.color_list ul li{position:relative;float:left;width:48%;min-height:420px;margin:1% 1% 3% 1%;}
.build_list ul li{position:relative;float:left;width:48%;min-height:350px;margin:1% 1% 3% 1%;}
.hard_list ul li{position:relative;float:left;width:48%;min-height:310px;margin:1% 1% 3% 1%;}



.cs_center{float:left;width:100%;min-height:460px;}
.cs_left{float:left;width:48%;min-height:368px;padding:4%;background:#f9f9f9;}
.cs_left_tt{float:left;width:100%;font-size:230%;font-weight:bold;color:#b0b0b0;letter-spacing:-2px;margin-bottom:4%;}
.cs_left_txt{float:left;width:100%;font-size:120%;line-height:180%;margin-bottom:4%;color:#555;}
.cs_left_txt2{float:left;width:100%;font-size:120%;line-height:180%;color:#555;}
.cs_right{float:left;width:44%;min-height:460px;background:url(../img/6-1.jpg) no-repeat 0 0;background-size:100%;}
}

@media screen and (min-width:1024px) and (max-width:1920px) {
.color_list ul li{position:relative;float:left;width:48%;min-height:520px;margin:1% 1% 3% 1%;}
.build_list ul li{position:relative;float:left;width:48%;min-height:460px;margin:1% 1% 3% 1%;}
.hard_list ul li{position:relative;float:left;width:48%;min-height:400px;margin:1% 1% 3% 1%;}



.cs_center{float:left;width:100%;min-height:570px;}
.cs_left{float:left;width:48%;min-height:480px;padding:4%;background:#f9f9f9;}
.cs_left_tt{float:left;width:100%;font-size:320%;font-weight:bold;color:#b0b0b0;letter-spacing:-2px;margin-bottom:4%;}
.cs_left_txt{float:left;width:100%;font-size:160%;line-height:180%;margin-bottom:4%;color:#000;}
.cs_left_txt2{float:left;width:100%;font-size:150%;line-height:200%;color:#555;}
.cs_right{float:left;width:44%;min-height:570px;background:url(../img/6-1.jpg) no-repeat 0 0;background-size:100%;}
}









/*===================================== 240406 추가 =====================================*/
/* 리뉴얼중입니다. */
#renewal{display:block;width:100%;text-align:center;position:absolute;top:50%;transform:translate(0, -56%);}
#renewal img{display:inline-block;width:60%;}
#renewal h1{display:block;width:100%;line-height:100%;font-size:24px;font-weight:bold;color:#3277cc;margin-top:5%;}
#renewal p{display:block;width:100%;line-height:20px;font-size:13px;color:#666;margin:5% 0;}
#renewal a{display:block;width:100%;line-height:100%;font-size:20px;font-weight:bold;color:#3277cc;}
#renewal a b{font-size:17px;color:#000;}


/* 서브타이틀 */
h1.sub_title{position:relative;float:left;width:100%;line-height:100%;font-size:22px;font-weight:bold;margin-bottom:5%;color:#333;padding-top:3%;}
h1.sub_title:after{content:"";position:absolute;left:0;top:0;width:26px;height:3px;background:#114aee;}
h1.sub_title p{line-height:18px;font-size:12px;color:#777;margin-top:2%;}


/* 인사말 */
#greeting{position:relative;float:left;width:100%;min-height:320px;text-align:center;background:url(../img/gree_bg.jpg) no-repeat;background-size:100%;}
#greeting:after{content:"";position:absolute;left:50%;top:50%;display:block;width:90%;height:50%;background:url(../img/gree_txt.png) no-repeat;background-size:100%;margin:-12% 0 0 -45%;z-index:1;}
#greeting img{position:absolute;left:50%;bottom:10%;width:140px;margin:0 0 0 -70px;}


/* 벽패널~패널색상표 */
.pro_method{position:relative;float:left;width:100%;margin-bottom:8%;}
.pro_method ul{float:left;width:100%;}
.pro_method ul li{position:relative;float:left;width:100%;margin:2% 0;overflow:hidden;}
.pro_method ul li img{float:left;width:100%;}
.pro_method ul li b{float:left;width:100%;line-height:32px;font-size:14px;text-align:center;margin-top:3%;background:#00309d;color:#fff;}
.pro_method table{float:left;width:100.6%;margin-top:3%;}
.pro_method table th,.pro_method table td{font-size:14px;text-align:center;padding:4px 10px;border:1px solid #78c2ea;border-left:none;}
.pro_method table th{padding:6px;background:#e8f2f8;}
.pro_method table td{}
.pro_method table td p{text-align:left !important;}

.pro_method2{position:relative;float:left;width:100%;margin-bottom:8%;}
.pro_method2 ul{float:left;width:100%;}
.pro_method2 ul li{float:left;width:100%;text-align:center;}
.pro_method2 ul li:first-child{margin-bottom:7%;}
.pro_method2 ul li img{display:inline-block;width:100%;}
.pro_method2 ul li b{float:left;width:100%;line-height:32px;font-size:14px;text-align:center;margin-top:3%;background:#00309d;color:#fff;}

.pro_icon{position:relative;float:left;width:100%;margin-bottom:8%;}
.pro_icon ul{float:left;width:100%;box-sizing:border-box;padding:2% 4%;border:5px solid #c1ead3;}
.pro_icon ul li{float:left;width:50%;height:220px;box-sizing:border-box;padding:2%;text-align:center;}
.pro_icon ul li:first-child{border-top:none;}
.pro_icon ul li img{display:inline-block;width:50%;}
.pro_icon ul li p{display:block;width:100%;font-size:13px;vertical-align: middle;color:#555;margin-top:3%;}
.pro_icon ul li p b{display:block;width:100%;line-height:100%;font-size:16px;margin-bottom:15px;color:#00622b;letter-spacing:-0.05em;}

.pro_text{position:relative;float:left;width:100%;margin-bottom:8%;}
.pro_text ul{position:relative;float:left;width:100%;}
.pro_text ul li{position:relative;float:left;width:100%;line-height:34px;font-size:13px;box-sizing:border-box;padding:2%;padding-left:34px;font-weight:600;background:#e8f2f8;letter-spacing:-0.05em;}
.pro_text ul li:after{content:"";position:absolute;left:0;top:50%;display:block;width:16px;height:16px;background:url(../img/check_bullet.png) no-repeat 0 0;background-size:100%;margin:-7px 0 0 3%;z-index:1;}
.pro_text ul li:nth-child(even){background:#d1e7f3;}


/* 색상 표본 */
.pro_type{position:relative;float:left;width:100%;box-sizing:border-box;padding:0 4% 4% 4%;background:#e8f2f8;margin-bottom:8%;}
.pro_type ul{float:left;width:102%;margin-left:-1%;}
.pro_type ul li{float:left;width:48%;margin:5% 1% 0;}
.pro_type ul li img{float:left;width:100%;}
.pro_type ul li b{float:left;width:100%;line-height:100%;font-size:13px;text-align:center;margin-top:5%;}

.pro_type2{position:relative;float:left;width:100%;margin-bottom:8%;}
.pro_type2 ul{float:left;width:102%;margin-left:-1%;}
.pro_type2 ul li{float:left;width:24%;margin:0 0.5% 4% 0.5%;}
.pro_type2 ul li img{float:left;width:100%;}
.pro_type2 ul li b{float:left;width:100%;line-height:100%;font-size:13px;text-align:center;margin-top:5%;}