@charset "utf-8";
@import url('global.css');
@import url('layout.css');
@import url('common.css');



/* 왼쪽영역 */
.snb{ float:left; width:180px; margin-right:50px; margin-top: 0px; min-height: 100%; }
.snb  #title {font-family: ,'Nanum Gothic'; font-weight:bold;  color:#343434; font-size:26px; line-height:68px; height:70px; background:url(../images/bg_nav.png); display:block; text-align:center; color:#FFF; letter-spacing:-1px; }

.snb  #sm {   overflow:hidden;}
.snb  #sm a{ line-height:40px;font-family: ; color: #333333; font-size: 15px;  display:block;padding-left:15px; }
.snb  #sm li{ float:left; height:40px; width:200px; background-color:#fff; border-bottom:1px #c9c9c9 solid; }
.snb  #sm li.on a{ color:#000; background-color:#f5f5f5; font-weight:bold;}

.snb  .banner li{ margin-top:20px;}





/* 상단타이틀영역 */
.titleArea { position:relative; width:970px; height:54px; border-bottom:2px #595959 solid; background-position:top right; background-repeat:no-repeat; }
.titleArea > #subtitle {position: absolute; font-family: ; font-weight:bold; font-size:28px; color:#343434;top:10px;  }
.titleArea > .subtext {position: absolute; font-family: ;  font-size:14px; color:#496c98; top:45px;  }
.titleArea > #map { position: absolute; top:30px; color: #979797; font-size: 11px; background:url(../images/dot_home.png) no-repeat 0 0px; padding-left:18px; right: 0px; }


/* 컨텐츠영역 */
#content{ float:left; width:970px; margin:0 0 80px; font-size:; }

#content .wrapper{ margin: 35px 0 0 0; }

#content .wrapper > .company { position:relative; overflow:hidden;  }
#content .wrapper > .company > .text { font-family:; color: #333333; width:970px; text-align:center; }
#content .wrapper > .company > .text  .lv1{ color:#333333; font-size:26px;line-height:40px;font-weight: bold;}
#content .wrapper > .company > .text  .lv2{ color:#142938; font-size:20px; margin-top:13px;line-height:29px; margin-top:18px;}
#content .wrapper > .company > .text  strong{ color:#e41010; }
#content .wrapper > .company > .text  .lv3{ color:#666666; font-size:14px; margin-top:20px; line-height:23px;}
#content .wrapper > .company > .text  .lv4{ color:#666666; font-size:14px; margin-top:20px; line-height:23px; font-weight:bold;}
#content .wrapper > .company > .img {margin:30px auto 0; text-align: center; }


#content .wrapper2{ margin: 35px 0 0 0; padding-bottom:30px; border-bottom:1px #CCC dashed; }
#content .wrapper > h1 { color: #454545; font-size: 16px; line-height:29px;font-family: ;  padding-bottom:0px; }
#content .wrapper > h2 { font-size: 18px; color: #454545; line-height:29px; background:url(../images/dot_title.png) no-repeat 0px 6px; font-family: ; padding-left:13px; padding-bottom:0px; }
#content .wrapper > h3 { color: #0067c6; font-size: 15px; line-height:29px; font-family: ; padding-left:20px; padding-bottom:0px; margin-top: 15px; }
#content .tbBottom { margin-top:5px; font-family: ; color: #333333; font-size: 14px; }
#content .text1 { margin-top:5px; font-family: ; color: #333333; font-size: 15px; line-height: 1.7; }
#content .text1 strong{ color:#72bc08 }
#content .text2 {font-size: 15px; margin-left:15px; list-style:circle; font-family: ; color: #535353;  margin-top:5px; line-height:1.7; }
#content .text2 strong{ color:#e41010 }

#content .textImg { margin-top:5px; font-family: ; color: #333333; font-size: 15px; line-height: 1.7;  padding-right:200px; background-position:right 5px; background-repeat:no-repeat;}
#content .textImg strong{ color:#e41010 }

#content .img{ margin-top:7px; }
#content .contentsBox { border:1px #f5f5f5 solid; background:#fdfdfd;margin-top:8px; overflow:hidden; padding:10px; }

.service-gallery {display: flex; flex-wrap:wrap; justify-content:space-around; margin-top: 20px; padding:0 0.7%;}
.service-gallery li { width: 31%; margin:1% 0;}
.service-gallery li img{ width: 100%;}

ul.boxType1{}
ul.boxType1 li{ float:left; margin:1.5%; width: 30%; }
ul.boxType1 li .title{ background:#009c7d; color:#FFFFFF; text-align:center; line-height:30px; font-weight: bold; }
ul.boxType1 li .contents{ background:#fff; font-family: ; color: #535353; font-size: 14px; line-height:19px; text-align:center;  padding:15px 10px; border:1px #e1e1e1 solid;}


ul.boxType1_1{ overflow:hidden;}
ul.boxType1_1 > li{ float:left;  margin:1.5%; width: 47%;}
ul.boxType1_1 li .title{ background:#009c7d; color:#FFFFFF; text-align:center; line-height:30px; font-weight: bold; }
ul.boxType1_1 li .contents{ background:#fff; font-family: ; color: #535353; font-size: 14px; line-height:19px;  padding:15px 10px; border:1px #e1e1e1 solid; overflow:hidden; }
ul.boxType1_1 li .contents li {list-style:circle; clear:left; margin:2px 20px ; line-height:17px;}

ul.boxType2{}
ul.boxType2 li{ float:left; margin:10px; background:#fff; font-family: ; color: #535353; font-size: 14px; line-height:19px; text-align:center; width:147px; padding:15px 10px; border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;}


ul.boxType3{ display: grid;grid-template-columns: 1fr 1fr 1fr;}
ul.boxType3 li{  margin:10px; background:#fff;  color: #535353; font-size: 14px; line-height:19px; text-align:center; width:267px; padding:15px 10px;  border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;}
ul.boxType3 li img {width: 100%; margin-bottom: 20px;}

ul.boxType4{}
ul.boxType4 li{ float:left; margin:10px; background:#fff; font-family: ; color: #535353; font-size: 14px; line-height:19px; text-align:center; width:205px; padding:15px 10px;  border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;}


.list1 { padding-bottom:20px; border-bottom:#cfcfcf 1px dashed; overflow:hidden; }
.list1 > .pic{ float:left}
.list1 > .contents{ float:left; margin-left:34px; width:530px;}
.list1 > .contents > .title {font-family: ; color: #d81818; font-size: 16px;font-weight:bold; }
.list1 > .contents > .text {font-family: ; color: #535353; font-size: 15px; margin-top:5px; }
.list1 > .contents > .viewmore > a{ display:block;width:80px; line-height:20px; padding-bottom:3px; color:#FFFFFF;   background: #a5a5a5; margin-top:15px; text-align:center;font-family: ; font-weight:bold; font-size:11px;}
.list1 > .contents > .viewmore > a:hover{ background: #000; }

.list2 > li { margin-left:10px; padding-left:10px; background:url(../images/dot_title2.png) no-repeat 0px 9px; font-family: ; color: #484848; font-size: 15px; margin-top:10px; line-height:20px; }
.list3 > li { margin-left:10px; padding-left:10px; background:url(../images/dot_title2.png) no-repeat 0px 9px; font-family: ; color: #484848; font-size: 15px; margin-top:10px; line-height:20px; }




.list1 > li { margin-left:10px; padding-left:10px; background:url(../images/dot_title2.png) no-repeat 0px 9px; font-family: ; color: #484848; font-size: 15px; margin-top:10px; line-height:20px; }
.list2 > li { margin-left:10px; padding-left:10px; background:url(../images/dot_title2.png) no-repeat 0px 9px; font-family: ; color: #484848; font-size: 15px; margin-top:10px; line-height:20px; }


/* 테이블 */
.tb1 { color: #535353; font-size: 15px; width:100%; border:0; padding:0; border-spacing:0;border-collapse:collapse;  font-family: ;  }
.tb1 caption {color: #454545; font-size: 16px; line-height:29px; font-weight:bold; background:url(../images/dot_title.png) no-repeat 0px 9px;  padding-left:20px; text-align:left; }
.tb1 th,.tb1 td{border:1px #CCCCCC solid; padding:6px; }
.tb1 thead {background-color:#6893e1; color:#FFF; font-size:14px; font-weight:800;}
#content .tbBottom { margin-top:5px; font-family: ; color: #333333; font-size: 14px; }


#content .content-img { border:1px #e5e5e5 solid; margin-top:8px; overflow:hidden; padding:20px; text-align: center; }

.pcArea { display:block; }
.mobileArea { display:  none; }


.br { display:block; height:20px;}

/* 회사소개 */
.company_1_1 { width:100%; }
.company_1_1 h1 { font-size:2.0em; font-weight:600; color:#089478; line-height:1.5em; }
.company_1_1 h2 { font-size:1.4em; font-weight:500; color:#222; line-height:1.5em; }

.company_1_2 { display:flex; justify-content:space-between; flex-wrap:wrap; }
.company_1_2 span { background:#089478; border-radius:10px; padding:14px 0; margin:3.5px 0; width:16%; font-size:0.95em; font-weight:500; color:#fff; text-align:center; }

.company_1_3 { display:flex; justify-content:space-between; flex-wrap:wrap; }
.company_1_3 span { border:1px #e0e0e0 solid; width:31.5%; margin:0 0 2.2%; }
.company_1_3 img { padding:5%; width:90%; }
.company_1_3 p { display:block; padding:0 0 20px; font-size:1.1em; font-weight:600; color:#333; letter-spacing:0; text-align:center; }


/* 청소사례 블로그 연결 */
.blog_banner { width:100%; text-align:center; }
.blog_banner h1 { font-size:2.0em; font-weight:600; color:#089478; line-height:1.5em; }
.blog_banner h2 { font-size:1.4em; font-weight:500; color:#222; line-height:1.5em; }










 @media all and (max-width:640px) {
.pcArea { display: none; }
.mobileArea { display: block; }
.mobileArea > .visual{ width:100%; height:90px; background-position:center; background-size:cover;  }

.visual {height:150px !important; background-size: cover !important; ;}
#container {
*display:inline-block; width:100%; overflow:hidden; margin: 0 auto 0; }





.snb{ float:none; width:100%; margin:0; margin-top: 0px;  }
.snb  #title { display:none; }
.snb  .banner { display:none; }
.snb  #sm {overflow:hidden; margin-top:0; border: none;background:#eef1f5;padding:2px; width:100%; box-sizing:border-box;display:block;  }
.snb  #sm li{float:left;width:33%; padding:0 3px;height:30px; box-sizing:border-box;  background-color:#efefef; margin:3px 0 ; border:none;}
.snb  #sm a{width:100%; line-height:30px;font-size:0.7em; letter-spacing:-1px;color:#333; font-weight:500; display:block;  background:#fff; border:1px #e4e4e4 solid;  box-shadow:1px 1px 0px rgba(0, 0, 0, 0.1); text-align:center; padding:0; }

.snb  #sm li.on a{ color:#fff; background:#464646;border:1px #464646 solid;}

#content{ float:left;width:100%; padding:10px 10px 0; box-sizing:border-box; }

#content .wrapper > h1 { color: #454545; font-size: 16px; line-height:29px;font-family: ;  padding-bottom:0px; }
#content .wrapper > h2 { font-size: 16px; color: #454545; line-height:29px; background:url(../images/dot_title.png) no-repeat 0px 6px; font-family: ; padding-left:13px; padding-bottom:0px; }
#content .wrapper > h3 { color: #0067c6; font-size: 15px; line-height:29px; font-family: ; padding-left:20px; padding-bottom:0px; margin-top: 15px; }


/* 상단타이틀영역 */
.titleArea { position:relative; width:100%; height:37px; border-bottom:1px #969696 solid; background-size:120px; }
.titleArea > #subtitle {position: absolute; font-  family:sans-serif; font-weight:bold; font-size:1.1em; color:#343434; top:4px; }
.titleArea > #map { position: absolute; right:0px; top:15px; color: #979797; font-size: 11px; background:url(../images/dot_home.png) no-repeat 0 0px; padding-left:16px; }

#content .wrapper{ margin: 20px 0 0 0; }
#content .wrapper > .company { position:relative; overflow:hidden; }
#content .wrapper > .company > .text {position: relative; font-family: ;color: #333333; width:100%; }
#content .wrapper > .company > .text  .lv1{ color:#333333; font-size:1.5em;line-height:1.4em;}
#content .wrapper > .company > .text  .lv2{ color:#333333; font-size:1.2em; margin-top:14px;line-height:1.4em;}
#content .wrapper > .company > .text  .lv2 strong{ color:#009c7d; }
#content .wrapper > .company > .text  .lv3{ color:#666666; font-size:1.1em; margin-top:20px; line-height:1.4em;}
#content .wrapper > .company > .text  .lv4{ color:#666666; font-size:1em; margin-top:20px; line-height:1.4em; font-weight:bold;}
#content .wrapper > .company > .img img { width:340px !important; }


#content .textImg { margin-top:5px; font-family: ; color: #333333; font-size: 15px; line-height: 1.7;  padding-right:0; background-image:none !important;}
#content .contentsBox { border:1px #f5f5f5 solid; background:#fdfdfd;margin-top:4px; overflow:hidden; padding:2px;  }

	 
	 
.service-gallery {display: flex; flex-wrap:wrap; justify-content:space-around; margin-top: 20px; padding:0 0.7%;}
.service-gallery li { width: 47%; margin:1% 0;}
.service-gallery li img{ width: 100%;}

	 
	 
ul.boxType1{}
ul.boxType1 li{ float:left; padding:5px; margin:0; width:50%;box-sizing:border-box;}
ul.boxType1 li .title{ background:#009c7d; color:#FFFFFF; text-align:center; width:100%; box-sizing:border-box;display:block;  line-height:30px; font-weight: bold; }
ul.boxType1 li .contents{ background:#fff; font-family: ; color: #535353; font-size: 10px; line-height:16px; text-align:center; display:block;width:100%; padding:2px ; border:1px #e1e1e1 solid; box-sizing:border-box; height:60px; }

ul.boxType1_1{}
ul.boxType1_1 li{ float:left; padding:5px; margin:0; width:100%;box-sizing:border-box;}
ul.boxType1_1 li .title{ background:#009c7d; color:#FFFFFF; text-align:center; width:100%; box-sizing:border-box;display:block;  line-height:30px; font-weight: bold; }
ul.boxType1_1 li .contents{ background:#fff; font-family: ; color: #535353; font-size: 10px; line-height:14px; width:100%; padding:2px; height:auto !important; border:1px #e1e1e1 solid;  box-sizing:border-box;}
ul.boxType1_1 li .contents li {list-style:circle; clear:left; margin:0px ; line-height:14px;}


ul.boxType2{}
ul.boxType2 li{ float:left; padding:5px; margin:5px; background:#fff; font-family: ; color: #535353; font-size: 10px; line-height:16px; text-align:center; width:30%;  border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;box-sizing:border-box;height:60px !important;}


ul.boxType3{ display:flex; justify-content:space-between; flex-wrap:wrap; }
ul.boxType3 li{  margin:10px; background:#fff;  color: #535353; font-size: 14px; line-height:19px; text-align:center; width:35%; padding:15px 10px;  border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;}
ul.boxType3 li img {width: 100%; margin-bottom: 20px;}

ul.boxType4{}
ul.boxType4 li{ float:left; padding:5px; margin:5px; background:#fff; font-family: ; color: #535353; font-size: 10px; line-height:16px; text-align:center; width:47%;  border:1px #e1e1e1 solid;border-top:#009c7d 2px solid;box-sizing:border-box;height:60px !important;}

#content .content-img { border:1px #e5e5e5 solid; margin-top:8px; overflow:hidden; padding:20px; text-align: center; }
#content .content-img img { width:100%;}


.br { display:block; height:10px;}

/* 회사소개 */
.company_1_1 { width:100%; }
.company_1_1 h1 { font-size:1.2em; font-weight:600; color:#089478; line-height:1.5em; }
.company_1_1 h2 { font-size:1.05em; font-weight:500; color:#222; line-height:1.5em; }

.company_1_2 { display:flex; justify-content:space-between; flex-wrap:wrap; }
.company_1_2 span { background:#089478; border-radius:10px; padding:14px 0; margin:3.5px 0; width:32%; font-size:0.8em; font-weight:500; color:#fff; line-height:1.3em; text-align:center; }

.company_1_3 { display:flex; justify-content:space-between; flex-wrap:wrap; }
.company_1_3 span { border:1px #e0e0e0 solid; width:48%; margin:0 0 2.2%; }
.company_1_3 img { padding:5%; width:90%; }
.company_1_3 p { display:block; padding:0 0 10px; font-size:0.9em; font-weight:600; color:#333; line-height:1.3em; letter-spacing:0; text-align:center; }



}