@charset "utf-8";


/* 서브페이지 기본 세팅 s */
.sub {font-size: 17px;}
ol.basic { margin-top:20px;}
ol.basic > li {list-style-type:decimal; margin-left:17px; }
ol.basic > li > ul { margin-top:5px; color:#000; margin-bottom:5px;}
ol.basic > li > ul li {  padding:0 0 0 12px;}
.finish { margin-top:70px; margin-bottom:120px;}


ul.basic {margin-top: 30px;font-family: 'Noto Sans KR', sans-serif;}
ul.basic li{padding-left: 12px; position: relative; margin-bottom: 5px; line-height: 150%; word-break: keep-all; text-align: left;}
ul.basic li:last-child {margin-bottom: 0;}
ul.basic li:before {width: 2px; height: 2px; position: absolute; background-color: #333; content: ""; top: 12px; left: 0;}


select { border-radius:0; /* 아이폰 사파리 보더 없애기 */ -webkit-appearance:none; /* 화살표 없애기 for chrome*/ -moz-appearance:none; /* 화살표 없애기 for firefox*/ appearance:none /* 화살표 없애기 공통*/ }
select::-ms-expand{ display:none /* 화살표 없애기 for IE10, 11*/ }
button {/* width: 100%; height: 100%; */ background: none; border: none; cursor: pointer;}

p.basic { margin-top:20px;}

table.basic thead th {background-color: #fafafa; font-weight: 400;}
table.basic tbody th {background-color: #fafafa;}
table.basic tbody th.th {background-color: #fafafa; font-weight: 400;}
table.basic tbody td.th {background-color: #fafafa; font-weight: 400;}
table.basic tbody td {line-height: 150%; font-size: 14px; transform: skew(-0.03deg);}

table.basic {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; table-layout: fixed;font-weight: 300; min-width: 1024px; border-top: 2px solid #3a3c8a;}
table.basic th, table.basic td {border-top: 1px solid #eee; border-right: 1px solid #eee; padding: 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: break-all; white-space: normal;}
table.basic td:last-child {border-right: none;}
table.basic img {width: 100%;}

table.basic2 thead th {background-color: #fafafa; font-weight: 400;}
table.basic2 tbody th {background-color: #fafafa;}
table.basic2 thead th.th {background-color: #3a3c8a; color: #fff;}
table.basic2 tbody th.th {background-color: #fafafa; font-weight: 400;}
table.basic2 tbody th{background-color: #fafafa; font-weight: 400;}
table.basic2 tbody td.th {background-color: #3a3c8a; font-weight: 400;}
table.basic2 tbody td {line-height: 150%; transform: skew(-0.03deg);}

table.basic2 {background-color: #fff; border-bottom: 1px solid #ddd; width: 100%; table-layout: fixed; font-weight: 300; border-left: 1px solid #eee; border-right: 1px solid #eee;}
table.basic2 th, table.basic2 td {border-top: 1px solid #eee; border-right: 1px solid #eee; padding: 10px; text-align: center; font-weight: 300; vertical-align: middle; word-break: break-all; white-space: normal;}
table.basic2 td:last-child {border-right: none;}
table.basic2 img {width: 100%;}
table.keepall th, table.keepall td { word-break:keep-all;}




/* flicking */
.f_wrapper { border-radius:10px; width:100%; margin-top: 30px;}
.f_wrapper .f_wrapper_inner {overflow:auto; -webkit-overflow-scrolling: touch; overflow-y: hidden;}
.f_wrapper .touch { display:none; background:url("/resources/img/common/ico_flicking.png") left 3px top -2px no-repeat; height:27px; background-size:contain; padding:0 0 0 36px; line-height:27px; margin-bottom:10px;}
.f_scroller {display:block; height:100%; padding:0; width:100%; text-align:left;}
.f_wrapper .list_table,.f_wrapper .colum_table { margin-top:20px;}
/* 서브페이지 기본 세팅 e */

.flicking {min-width: 1024px;}

#container.sub {overflow: hidden; position: relative;}


.sub_vis {width: 100%; height: 300px; position: relative; background: url("/resources/img/sub/sub_vis1.jpg")no-repeat center/cover; overflow: hidden;}
.sub_vis02 {background: url("/resources/img/sub/sub_vis2.jpg")no-repeat center/cover;}
.sub_vis03 {background: url("/resources/img/sub/sub_vis3.jpg")no-repeat center/cover;}
.sub_vis04 {background: url("/resources/img/sub/sub_vis4.jpg")no-repeat center/cover;}
.sub_vis05 {background: url("/resources/img/sub/sub_vis5.jpg")no-repeat center/cover;}
.sub_vis06 {background: url("/resources/img/sub/sub_vis6.jpg")no-repeat center/cover;}


.sub_vis h2 {color: #fff; position: absolute;   width: 100%; color: #fff; bottom: 60px; left: 0px;}
.sub_vis h2 .inner {box-sizing: border-box; padding-left: 68px; width: 100%;}
.sub_vis h2 .tit {font-weight: 600; display:block; font-size: 55px;}
.sub_vis h2 .txt {font-size: 20px; margin-top: 15px;}


.lnb {height: 58px;  background-color: #3a3c8a; font-size: 17px;   box-sizing: border-box;width: 100%; margin: 0 auto; margin-left: -600px; position: absolute; left: 50%; z-index: 1; }
.lnb::before {/* content:''; display:inline-block; width:100%; position:absolute; left:0; width:100%; height:50px; border-bottom: 1px solid #ddd; box-sizing:border-box; border-top: 1px solid #ddd; */}
.lnb div {float: left;}
.lnb .home {width: 68px; height: 58px; background: #2e307d url("/resources/img/sub/sub_ico.png")no-repeat 23px 16px;}
.lnb .home a {display: inline-block; width: 100%; height: 100%; text-indent: -9999px;}
.lnb .depth1_name {width: 130px;text-align: center; border-left: 1px solid #585997;}
.lnb .depth1_name span {color: #eee; line-height: 58px; display: inline-block; width: 100%; height: 100%; box-sizing: border-box;}
.lnb .lnb_menu {width: 240px;position: relative; z-index: 10; margin-top: 58px;}
.lnb .lnb_menu ul { border-top: none; border-bottom: none; background-color: #fff; box-sizing: border-box; position: absolute; width: 100%;}
.lnb .lnb_menu li {display: none;border-top: 1px solid #585997;}
.lnb .lnb_menu li.on {display: block; position: absolute; top: -58px; width: 100%; border: 1px solid #585997; box-sizing: border-box; border-top: none; border-bottom:0;}
.lnb .lnb_menu li {height: 58px;  box-sizing: border-box; background-color: #3a3c8a;}
.lnb .lnb_menu li a {display: inline-block; width: 100%; height: 100%; line-height: 58px; color: #fff; padding-left: 20px; box-sizing: border-box;font-weight: 400; transition: all .3s ease;}
.lnb .lnb_menu li a:hover {background-color: #ea650c;}

.lnb .lnb_menu .more_btn {width: 18px; height: 10px; background: url("/resources/img/sub/sub_ico.png")no-repeat left -87px top 0px; position: absolute; top: -32px; right: 20px; text-indent: -9999px; cursor: pointer; transition: all .3s ease-in-out;}
.lnb_menu .more_btn.more_add { transform: rotate(-180deg); top: -35px; right: 25px;}

/*eng*/
/*.eng .lnb .depth1_name {width: 220px;}*/

/*contents s*/

h3 {font-size: 40px; font-weight: 100; line-height: 120%; text-align: center; word-break: keep-all;}
h3 span{display: block; font-weight: 300; line-height: 120%;}
h3 .txt {font-weight: 100;}
h4, .h4 {font-size: 26px; font-weight: 400; padding-left: 37px;position: relative; margin-top: 55px; word-break: keep-all;}
h4:before, .h4:before {display: inline-block; position: absolute; width: 28px; height: 24px; background: url("/resources/img/sub/sub_ico.png")no-repeat 0px -76px; top: 2px; left: 0; content: "";}

.h4 {padding-left: 0; font-size: 24px; margin-top: 0;}
.h4:before {position: static; margin-right: 10px; vertical-align: middle;}


h5 {color: #3a3c8a; font-weight: 400; padding-left: 12px; font-size: 22px; margin-top: 50px; position: relative; word-break: keep-all;}
h5:before {content: ""; display: inline-block; width: 3px; height: 20px; background-color: #3a3c8a; position: absolute; top: 2px; left: 0;}

h6 {font-weight: 400; padding-left: 12px; position: relative; margin-top: 30px; font-size: 20px; word-break: keep-all;line-height: 130%;}
h6:before {content: ""; display: inline-block; width: 4px; height: 4px; background-color: #333; position: absolute; top: 9px; left: 0;}

.c_box {padding: 20px; border: 4px solid #eee; word-break: keep-all; line-height: 150%; margin-top: 30px;}
.m_color {color: #3a3c8a; line-height: 150%;}
.p_color {color: #ea650c;line-height: 150%;}

.tab_box {text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center; margin-top: 40px;}

.perf1 .tab_box { font-size:0; display:block; width:100%;} /* 200701 - 시공실적 ej */
.perf1 .tab_box a { width:12%; font-size:17px;}

.tab_box a {display: inline-block; height: 50px; border: 1px solid #ddd; text-align: center; line-height: 50px; box-sizing: border-box; width: 20%;margin-left: -1px; transition: all .3s ease-in-out;}

.tab_box a.on, .tab_box a:hover {background-color: #3a3c8a; color: #fff; border: 1px solid #3a3c8a; z-index: 1;}

.txt {line-height: 150%; word-break: keep-all;}

img {max-width: 100%;}

.contents {padding: 138px 0 140px;}


/*기술인증서 s*/


.cfi .img_wrap { text-align: center;}
.cfi .img_box {display: inline-block; margin: 0 5%;margin-top: 50px; width: 311px; vertical-align: top;}
.cfi .img_box .txt{font-weight: 400; margin-top: 15px; line-height: 150%; word-break: keep-all;}



/*회사소개 s*/

.cp .line {margin: 50px 0; border-top: 3px dashed #eee;}

.cp .txt {text-align: center;}

.cp .vision {margin: 80px 0;}
.cp .vision .img img{display: block; margin: 0 auto; width:auto; max-width:100%;} 
.cp .vision .txt{margin-top: 70px; text-align: center; line-height:160%; }

.cp .vision .img .m_img {display: none;}

.cp .bg { height: 210px; background: url("/resources/img/sub/cp_bg.jpg")no-repeat center/cover; background-attachment: fixed;}
.cp .bg .inner {display: flex; justify-content: space-between; align-items: center; height: 100%;}

.cp .bg .tit {font-size: 30px;}
.cp .bg .txt {font-size: 20px;}

.cp .bg .tit, .cp .bg .txt { font-weight: 600; color: #fff;}

.cp .greet {margin-top: 80px;}
.cp .greet .txt {text-align: center;}
.cp .greet .sign_box {margin-top: 50px; text-align: right;}
.cp .greet .sign_box span {font-weight: 400; display: inline-block; vertical-align: middle;}
.cp .greet .sign_box span.sign {background: url("/resources/img/sub/sign.png?ver=200630")no-repeat center; background-size:cover; font-size: 0; width: 120px; height: 62px; margin-left: 35px;}



.cp .top_txt {}
.cp .top_txt .txt_left { text-align:left; color:#000; float:left; width:65%; box-sizing:border-box;}
.cp .top_txt .txt_right {float:right; width:35%; box-sizing:border-box;padding-left:30px;  }
.cp .top_txt .txt_right .name {display:inline-block; width:100%; color:#fff; box-sizing:border-box; padding:20px 10px; background:#2e307d;}
.cp .top_txt .sub_title { margin-top:20px; color:#3a3c8a; font-size:33px; letter-spacing:-1px; font-weight:600; padding-bottom:20px; border-bottom:1px solid #ddd;}
.cp .top_txt .txt_left p { line-height:160%; }

/*location s*/

.map {margin-top: 50px; height: 450px; width: 100%; position: relative;}
.map iframe {width: 100%; height: 100%;}

.map .other {position: absolute; width: 100%; text-align: right; right: 65px; bottom: 25px;}
.map .other a {display: inline-block; width: 80px; height: 80px; background-color: #3a3c8a; transition: all .3s ease-in-out; margin: 0 4px; padding-top: 12px; box-sizing: border-box;}
.map .other a:hover {opacity: .8;}
.map .other a span {display: block; color: #fff;}
.map .other a span.ico {width: 28px; height: 38px; background:url("/resources/img/sub/map_ico.png")no-repeat; background-position: 0px 0px; margin: 0 auto;}
.map .other a span.txt {margin-top: 5px; text-align: center; font-size: 12px;}

.map .other a.kakao .ico {background-position: right 0 top 0;}


.location .inform {margin-top: 50px; border-top: 5px solid #3a3c8a;}
.location .inform .cont_box .h4 {margin-bottom: 20px;}

.location .inform .cont_wrap {width: 50%;}
.location .inform .cw1 {float: left;}
.location .inform .cw2 {float: right; background-color: #fafafa;}

.location .inform .cont_box {padding: 50px 0;}
.location .inform .cont_box div {margin-bottom: 12px;}
.location .inform .cont_box div:last-child {margin-top: 0;}

.location .cont {width: 100%;}
.location .cont span {display: inline-block;}
.location .cont .tit {font-weight: 400; width: 20%;}
.location .cont .txt {}

.location .way {padding: 30px 0; border-top: 1px solid #ddd; border-bottom: 2px solid #ddd; float: left; width: 50%; box-sizing: border-box;}

.location .inform .cw2 .cont_box{padding-left: 4%;}

.location .way2 {float: right; background-color: #fafafa; padding-left: 2%;}

/*history*/
.history .his {margin-top: 50px;}
.history .his .img_box {width: 100%;height: 450px; background: url("/resources/img/sub/history1.jpg")no-repeat center/cover; text-indent: -9999px;}
.history .his2 .img_box{background: url("/resources/img/sub/history2.jpg")no-repeat center/cover;}

.history .his .cont_wrap {margin-top: 50px; border-top: 5px solid #3a3c8a; padding: 50px 3%; box-sizing: border-box; background: url("/resources/img/sub/his_bg.png")no-repeat right 0px bottom 0px; border-bottom: 2px solid #ddd;}

.history .his .h4:before {margin-right: 20px;}
.history .his .tit, .history .his .month {float: left;}
.history .his .tit {font-weight: 600;}

.history .his .month {margin-left: 23px;}
.history .his .month p span {display: inline-block; vertical-align: top;}
.history .his .month p span.num {width: 30px; font-weight: 400;}
.history .his .month p {margin-bottom: 5px;}
.history .his .month p:last-child{margin-bottom: 0;}
.history .his .cont {margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px dashed #ddd;}
.history .his .cont:last-child {margin-bottom: 0px;padding-bottom: 0; border: none;}


/*에코텍트 공법*/

.img_box {border: 1px solid #eee;}

.et .img_box {padding: 50px 5%; box-sizing: border-box;}

.et .img_box .cont_wrap {margin-top: 30px;}
.et .img_box .cont_wrap .cont {float: left; width: 33%;}
.et .img_box .cont_wrap .cont .tit {background-color: #3a3c8a; color: #fff; padding: 20px 2%; box-sizing: border-box; word-break: keep-all; text-align: center; border-right: 1px solid #fff;}
.et .img_box .cont_wrap .cont:last-child .tit {border-right: none;}

.et .img_box .cont_wrap .cont .txt {padding: 5%; box-sizing: border-box; border: 1px solid #3a3c8a; border-right: none; min-height: 160px;}
.et .img_box .cont_wrap .cont:last-child .txt {border-right: 1px solid #3a3c8a;}

.et .img_box .f_wrapper {margin-top: 0;}


.et .ib2 .img {float: left; width: 67%;}
.et .ib2 .img2 {width: 27%; float: right;}
.et .ib2 .img2 .img_m {display: none;}


/*에코텍트 공법 특징*/

.title_bold {font-size: 20px; font-weight: 400; text-align: center; word-break: keep-all;}
.et2 .wrap2 .cont_wrap .cont_box .cont {float: left;}
.et2 .wrap2 .cont_wrap .cont_box .ct1 {width: 60%;}
.et2 .wrap2 .cont_wrap .cont_box .ct2 {width: 36%; float: right;}

.et2 .wrap3 .cont_wrap, .et2 .wrap4 .cont_wrap .cont_box, .et2 .wrap8 .cont_wrap .cont_box , .et2 .wrap9 .cw1 .cb1{display: flex; align-items: center; justify-content: center;}
.et2 .wrap3 .cont_wrap .cont, .et2 .wrap4 .cont_wrap .cont{display: inline-block; width: 35%; margin: 0 3%;}
.et2 .wrap3 .cont_wrap .ct2 {width: 20%; margin-top: 50px;}

.et2 .wrap3 .cont_wrap .img_m {display: none;}


.et2 .wrap6 .cont {float: left; width: 46%;}
.et2 .wrap6 .ct2 {float: right; width: 46%;}

.et2 .wrap6 .cont .txt {width: 100%; padding: 12px 2%; box-sizing: border-box; border: 1px solid #ddd; text-align: center; font-weight: 400; margin-top: 10px;}
.et2 .wrap6 .ct2 .txt {color: #ea650c;}


.b_box {padding: 20px; word-break: keep-all; line-height: 150%; background-color: #f5f5f5; margin-top: 35px;}


.et2 .wrap7 .cont_wrap .cont {float: left; width: 70%;}
.et2 .wrap7 .cont_wrap .ct2 {float: right; width: 28%;}

.et2 .wrap7 .cont_wrap .ct2 .img {border: 1px solid #ddd; padding: 15px 0; box-sizing: border-box;}
.et2 .wrap7 .cont_wrap .ct2 .img:first-child {border-bottom: none;}
.et2 .wrap7 .cont_wrap .ct2 .img img {width: 80%; display: block; margin: 0 auto;}

.et2 .wrap7 .cont_wrap .ct2 .txt {font-weight: 400; text-align: center; color: #3a3c8a; margin-top: 10px; font-size: 14px; }
.et2 .wrap7 .cont_wrap .ct2 .img2 .txt {color: #d83e48;}
.et2 .wrap7 .cont_wrap .ct2 .img2 img {width: 70%;}

.et2 .wrap8 .cont_wrap .cont_box .cont {display: inline-block; width: 30%; margin: 0 3%;}
.et2 .wrap8 .cont_wrap .cont_box .ct1 {width: 33%;}

.et2 .wrap8 .cont_wrap .cont_box .cont .txt {font-weight: 400; margin-top: 20px; text-align: center;}

.et2 .wrap8 .img_wrap {padding: 50px 0; box-sizing: border-box; background-color: #f2f2f2;}

.et2 .wrap8 .img_wrap img {display: block; width: 80%; margin: 0 auto;}

.et2 .wrap9 .cw1 .tit {margin: 0 auto; text-align: center; font-size: 20px; font-weight: 400; color: #fff; background-color: #3a3c8a; padding: 10px 20px; border-radius: 50px; max-width: 200px;}

.et2 .wrap9 .cw1 .cb1 {border: 1px solid #ddd; padding: 50px 0; box-sizing: border-box;}
.et2 .wrap9 .cw1 .cb1 .cont {width: 43%; margin: 0 3%;}

.et2 .wrap9 .cw1 .cb2 .tit {background-color: #fff; border: 1px solid #3a3c8a; font-size: 17px; color: #3a3c8a; max-width: 200px;}

.et2 .wrap9 .cw1 .cb2 .cont {float: left; width: 30%;  margin-right: 5%;}
.et2 .wrap9 .cw1 .cb2 .cont:last-child {margin-right: 0;}

.et2 .wrap9 .cw1 .cb2 .cont .txt_box {background-color: #fafafa;border: 1px solid #ddd; padding: 30px; box-sizing: border-box; min-height: 420px; margin-top: 30px;}


.et2 .wrap9 .cw2, .et2 .wrap10 .cont_wrap {border: 1px solid #ddd; padding: 30px; box-sizing: border-box;}
.et2 .wrap9 .cw2 .cont {width: 31%; margin-right: 3%; float: left;}
.et2 .wrap9 .cw2 .cont:last-child {margin-right: 0;}

.et2 .wrap9 .cw2 .tit, .et2 .wrap10 .cont_wrap .cont .tit {width: 100%; text-align: center; color: #fff; font-size: 20px; font-weight: 400; background-color: #3a3c8a; padding: 10px 2%; box-sizing: border-box; margin-top: 10px;}
.et2 .wrap9 .cw2 .txt_box {padding: 5%; box-sizing: border-box; border: 1px solid #3a3c8a;}

.et2 .wrap10 .cont_wrap .cont {float: left; width: 48%; margin-right: 2%;}
.et2 .wrap10 .cont_wrap .cont:last-child {margin-right: 0;}

.et2 .wrap10 .cont_wrap .cont .txt_box {padding: 3%; box-sizing: border-box; border: 1px solid #eee; margin-top: 10px;}
.et2 .wrap10 .cont_wrap .cont .txt_box ul li span {font-weight: 400;}

.et2 .wrap7 .f_wrapper {margin-top: 0;}
.et2 .wrap7 .basic2.flicking {min-width: inherit;}


/*에코텍트 공법 시공방법*/
.et3 .wrap1 .box {width: 30%; padding-right:2.5%; margin-right:2.5%; display: inline-block; float: left;position: relative; }
.et3 .wrap1 .box::after {content: ""; display: inline-block; position: absolute; width: 20px; height: 20px; top: 45%; right: -10px; transform: translateY(-50%); background: url(/resources/img/sub/et2_arw.png) center no-repeat;}
.et3 .wrap1 .box:nth-child(3n) {padding-right:0; margin-right:0;}
.et3 .wrap1 .box:nth-child(3n)::after {display: none;}
.et3 .wrap1 .box .tit {width: 100%; height: 35px; border: 1px solid #eee; box-sizing: border-box;margin: 10px 0 30px; font-size: 14px; padding: 6px 0; text-align: center;}
.et3 .wrap1 .box .tit .num {display: inline-block;width: 35px; height: 35px; background: #3a3c8a;  position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: #fff;vertical-align: middle; padding: 2.5px 0; box-sizing: border-box; font-weight: 600; font-size: 20px;}
.et3 .wrap2 {margin-top: 50px;}
.et3 .wrap2 .img {width: 50%; display: inline-block; float: left; padding-right: 30px; box-sizing: border-box;}
.et3 .wrap2 .table_pc { width: 50%; display: inline-block; float: left; font-size: 14px;}
.et3 .wrap2 .table_pc .thead {width: 100%; background: #3a3c8a; font-size: 14px; color: #fff; text-align: center; padding: 10px 0; }
.et3 .wrap2 .table_m {display: none;font-size: 14px;}



/*에코텍트 공법 공법의 적용*/
.et4 .wrap1 .w1_table thead > tr > th:first-child {width: 20%;}
.et4 .wrap1 .w1_td .td1 {display: table-cell; width: 33%;}
.et4 .wrap1 .w1_td .td2 {display: table-cell; width: 66%; vertical-align: middle;box-sizing: border-box; padding-left: 20px;}
.et4 .wrap1 .w1_td .td2 ul {text-align: left; font-size: 14px;}
.et4 .wrap1 .w1_td .td2 ul li {margin-bottom: 10px; padding-left: 6px; position: relative;}
.et4 .wrap1 .w1_td .td2 ul li:last-child {margin-bottom: 0;}
.et4 .wrap1 .w1_td .td2 ul li::before {content: ""; left: 0; top: 50%; transform: translateY(-50%); position: absolute; width: 2px; height: 2px; background: #000;}
.et4 .wrap2 .img1 {width: 822px; margin: 0 auto; display: block;}
.et4 .wrap3 .img1 {width: 784px; margin: 0 auto; display: block;}
.et4 .wrap3 .img_wrap {width: 784px; margin: 0 auto; display: block;}
.et4 .wrap3 .img_wrap img {width: 22%; margin-left: 4%; float: left;}
.et4 .wrap3 .img_wrap img:first-child {margin-left: 0;}
.et4 .wrap4 {height: 600px;}
.et4 .wrap4 .w4 {width: 50%; display: inline-block; float: left; box-sizing: border-box; border: 1px solid #eee;height: 100%;}
.et4 .wrap4 .w4.w4_l {border-right: none; padding: 60px 30px;}
.et4 .wrap4 .w4.w4_r .w4_up, .et4 .wrap4 .w4.w4_r .w4_bt { padding: 50px;}
.et4 .wrap4 .w4.w4_r .w4_up {border-bottom: 1px solid #eee;}
.et4 h6 > span {font-size: 16px; font-weight: 300; margin-left: 17px;}
.et4 .wrap5 {width: 100%; border: 1px solid #eee; box-sizing: border-box; padding: 30px;}
.et4 .wrap5 .img {width: 30%; margin-left: 4.5%; float: left;}
.et4 .wrap5 .img:first-child{margin-left: 0;}
.et4 .wrap5 .img .txt {text-align: center; box-sizing: border-box; padding: 6px 2%; width: 100%; border-radius: 99px; border: 1px solid #ddd; margin-top: 10px; background: #fafafa;}

/*코러실1 개요*/
.cs1_1 .wrap1 {font-size: 17px; line-height: 150%; word-break: keep-all;}
.cs1_1 .wrap3 {border:1px solid #eee;}
.cs1_1 .wrap3 > div {width: 50%; display: inline-block; float: left; padding: 40px 30px; box-sizing: border-box;}
.cs1_1 .wrap3 .img2 {padding: 110px 30px;}

/*코러실1 시공방법*/

.cs1_2 .wrap1 {width: 100%; text-align: center;box-sizing: border-box;}
.cs1_2 .wrap2, .cs1_2 .wrap3 {border: 1px solid #eee; width: 100%; padding: 60px 0; box-sizing: border-box; text-align: center;}
.cs1_2 .wrap1 img, .cs1_2 .wrap2 img, .cs1_2 .wrap3 img {width: auto}

/*코러실1 특징*/
.cs1_3 img {width: auto;}
.cs1_3 h6 {margin-top: 50px;}
.cs1_3 .wrap1 {padding: 35px; background: #fafafa; margin-top: 35px;}
.cs1_3 .wrap1 h6:first-child {margin-top: 0;}
.cs1_3 .wrap1 .txt {font-size: 17px;font-weight: 300; display: block;}
.cs1_3 .wrap2 {width: 100%; border: 1px solid #eee; padding: 50px 0; text-align: center;box-sizing: border-box;}
.cs1_3 .wrap3 > div {width: 48%; display: inline-block; float: left;}
.cs1_3 .wrap3 > div.wp3_2 {float: right;}
.cs1_3 .wrap3 .box {border:1px solid #eee; height: 250px; display: table;width: 100%; margin-top: 30px;}
.cs1_3 .wrap3 .wp3_1 .box {background: #fafafa;}
.cs1_3 .wrap3 .wp3_1 .box .fom {display: table-cell; vertical-align: middle;padding-left: 30px;}
.cs1_3 .wrap3 .wp3_1 .box .fom p {font-size: 24px; font-weight: 400; margin-top: 25px;}
.cs1_3 .wrap3 .wp3_1 .box .fom p:first-child {margin-top: 0;}
.cs1_3 .wrap3 .wp3_2 .box .img {display: table-cell; vertical-align: middle; text-align: center;}
.cs1_3 .wrap4 > div {width: 48%; display: inline-block; float: left;}
.cs1_3 .wrap4 > div.wp4_2 {float: right;}
.cs1_3 .wrap5 {width: 100%; box-sizing: border-box; padding: 30px; border:1px solid #eee;}
.cs1_3 .wrap5 .wp5 {display: inline-block; width: 31.5%; margin-right: 2%; float: left;}
.cs1_3 .wrap5 .wp5 > p {text-align: center; width: 100%; text-align: center; padding: 12px 0; margin: 10px 0; border-radius: 50px; border:1px solid #ddd;}
.cs1_3 .wrap5 .wp5:nth-child(3n) {margin-right: 0;}
.cs1_3 .txt_box {line-height: 150%; margin-top: 30px; padding: 0 10px; word-break: keep-all;font-weight: 400;}
.cs1_3 table ul.basic {margin-top: 0;}

/*코러실2*/
.cs2 .txt_box {line-height: 150%; margin-top: 30px; padding: 0 10px; word-break: keep-all;font-weight: 300; box-sizing: border-box;}

/*코러실2 개요*/
.cs2_1 .wrap1 {padding: 50px; box-sizing: border-box; border:1px solid #eee;}
.cs2_1 .wrap1 .wp1 {width: 48%; display: inline-block; float: left; margin-right: 4%;}
.cs2_1 .wrap1 .wp1:first-child, .cs2_1 .wrap1 .wp1:nth-child(2) {margin-bottom: 10px;}
.cs2_1 .wrap1 .wp1:nth-child(2n) { margin-right:0;}
.cs2_1 .wrap1 .wp1 .tit {color: #3a3c8a; padding: 15px 0; text-align: center; border: 1px solid #3a3c8a; border-radius: 99px; margin-top: 10px;font-weight: 400;}
.cs2_1 .wrap2 .txt_box {background: #fafafa; padding: 30px;}

/*코러실2 시공방법*/
.cs2_2 .wrap {margin-top: 35px;}
.cs2_2 h5 {margin-top: 80px;}
.cs2_2 h5:first-child {margin-top: 50px;}
.cs2_2 .wrap > div {width: 50%; display: inline-block; float: left;box-sizing: border-box; padding: 30px;}
.cs2_2 .wrap .wp1 {border: 1px solid #eee;}
.cs2_2 .wrap .wp1 table {margin-top: 30px;}
.cs2_2 .wrap .wp2 ul {padding-left: 45px; font-size: 16px; font-weight: 400;}
.cs2_2 .wrap .wp2 ul .tit {position: relative; color: #3a3c8a;font-weight: 600; padding-left:20px; }
.cs2_2 .wrap .wp2 ul .tit::before {content: "";position: absolute; left: 0; top: 50%; transform: translateY(-50%) rotate(45deg); width: 7px; height: 7px; background: #3a3c8a;}
.cs2_2 .wrap .wp2 ul li:first-child {margin-top:0;}
.cs2_2 .wrap .wp2 ul li {margin-top: 20px;}

/*코러실2 철재강교*/
.cs2_3 .tit1 {width: 250px; padding: 19px 0; text-align: center;margin: 35px auto; background: #3a3c8a; border-radius: 99px; color: #fff;}
.cs2_3 .wrap1 {box-sizing: border-box; padding: 45px 90px; border:1px solid #eee;}
.cs2_3 .wrap1 .wp1 {width: 27%; display: inline-block; float: left; margin-left: 9.5%; position: relative;}
.cs2_3 .wrap1 .wp1:first-child {margin-left: 0;}
.cs2_3 .wrap1 .wp1:first-child::before {display: none;}
.cs2_3 .wrap1 .wp1::before {content: ""; width: 17%; height: 17%; position: absolute; left: -26.5%; top:50%; transform: translateY(-50%); background: url("/resources/img/sub/co3_arw.png") center/contain no-repeat;}
.cs2_3 .wrap1 .wp1 .tit {text-align: center; border: 1px solid #eee; border-radius: 99px; padding: 12px 0; margin-top: 18px;}
.cs2_3 .wrap2 {padding: 35px;background: #fafafa; margin-top: 35px;}
.cs2_3 .wrap2 h6:first-child {margin-top: 0;}
.cs2_3 .wrap2 .txt {font-size: 17px;font-weight: 300; display: block;}
.cs2_3 .wrap2 .wp1 {margin-top: 30px;}
.cs2_3 .wrap2 .wp1 h6 {width: 50%; display: inline-block; float: left; box-sizing: border-box;}
.cs2_3 .wrap2 .wp1 .img { display: inline-block; float: left; box-sizing: border-box; width: 48%; padding: 20px 20px 20px 20px; margin-left: 2%; background: #fff; border: 1px solid #eee;}
.cs2_3 .wrap2 .wp1 .img img {width: 30%; display: inline-block; float: left;}
.cs2_3 .wrap2 .wp1 .img .desc {width: 70%;display: inline-block; float: left; padding-left: 30px;box-sizing: border-box;}
.cs2_3 .wrap2 .wp1 .img .desc ul {margin: 25px 0 35px;}
.cs2_3 .wrap2 .wp1 .img .desc .blue {color:#3a3c8a; font-weight: 400;}
.cs2_3 .wrap3 .txt_box {margin-top: 0;width: 80%; }
.cs2_3 .wrap3 .txt_box, .cs2_3 .wrap3 img { display: inline-block; float: left;}
.cs2_3 .wrap3 img {width: 18%; margin-left: 2%;}
.cs2_3 .wrap4 {margin-top: 35px;}
.cs2_3 .wrap4 .wp1 {display:inline-block; float: left; width: 30%; margin-right: 4.5%;}
.cs2_3 .wrap4 .wp1:nth-child(3n){margin-right: 0;}
.cs2_3 .wrap4 .wp1 .tit {padding: 15px 0; text-align: center; margin: 10px 0 ; border-radius: 99px; border:1px solid #eee;}
/*코러실2 강관*/
.cs2_4 .wrap1 {border: 1px solid #eee; box-sizing: border-box; padding: 35px; margin-top: 35px;}
.cs2_4 .wrap1 h6 {margin-top: 0;}
.cs2_4 .wrap1 h6 > span {font-size: 17px; font-weight: 300; line-height: 150%; word-break: keep-all; margin-top: 15px;}
.cs2_4 .wrap1 > div {width: 50%; display: inline-block; float: left;box-sizing: border-box;}
.cs2_4 .wrap1 .wp1 { padding-right:35px;}
.cs2_4 .wrap1 .wp2 { padding-left:35px;}
.cs2_4 .wrap1 .wp2 .img_wrap {margin-top: 15px;}
.cs2_4 .wrap1 .wp2 .img {width: 22%; margin-right: 4%;display: inline-block; float: left;box-sizing: border-box;}
.cs2_4 .wrap1 .wp2 .img .tit {text-align: center; margin: 10px 0;}
.cs2_4 .wrap1 .wp2 .img:nth-child(4n) {margin-right: 0;}
.cs2_4 .wrap1 .wp2 .img:nth-child(n+5):nth-child(-n+8) .tit {margin-bottom: 0;}
.cs2_4 .wrap2 {border: 1px solid #eee; box-sizing: border-box; padding: 35px; margin-top: 35px;}
.cs2_4 .wrap2 .txt_box {margin-top: 0;width: 60%; display: inline-block; float: left;box-sizing: border-box; padding-right: 50px;}
.cs2_4 .wrap2 img {width: 40%; display: inline-block; float: right;box-sizing: border-box;}
.cs2_4 .wrap3 > ul {width: 50%; display: inline-block; float: left;box-sizing: border-box; padding: 20px; margin-top: 0;}
.cs2_4 .wrap4 {margin-top: 35px;}
.cs2_4 .wrap4 .wp1 { display: inline-block; float: left; width: 30%; margin-right: 4.5%; position: relative;}
.cs2_4 .wrap4 .wp1::after {content: ""; width: 8%; height: 8%; position: absolute; right: -11.3%; top:50%; transform: translateY(-50%); background: url("/resources/img/sub/co4_arw.png") center/contain no-repeat;}
.cs2_4 .wrap4 .wp1:nth-child(3n)::after {display: none;}
.cs2_4 .wrap4 .wp1:nth-child(3n) {margin-right: 0;}
.cs2_4 .wrap4 .wp1 .tit {text-align: center; position: relative; padding: 10px 0; box-sizing: border-box; border:1px solid #eee;    margin: 10px 0 20px; max-height: 36px;}
.cs2_4 .wrap4 .wp1 .tit .num {width: 35px; height: 35px; background: #3a3c8a; color: #fff; font-size: 20px; font-weight: 400; position: absolute; left: 0; top: 50%; transform: translateY(-50%);box-sizing: border-box; padding: 2px 1px 0 0;}
.cs2_4 .wrap5 {padding: 0 20px 20px;}

/*시공사진*/
.perf2 .tab_box {align-items: center; justify-content: center; margin-top: 40px; display: block; text-align: center;}
.perf2 .tab_box .tab_box_1, .perf2 .tab_box .tab_box_2 {box-sizing: border-box; float: left; display: inline-block;}
.perf2 .tab_box .tab_box_1 {width: 37.5%; padding-right: 3px;}
.perf2 .tab_box .tab_box_2 {width: 62.5%; padding-left: 3px;}
.perf2 .tab_box a {margin-left:0;float: left; border: none;}
.perf2 .tab_box .tab_top {width: 100%; border: 1px solid #eee;box-sizing:border-box;}
.perf2 .tab_box .tab_top a {width: 100%; background-color: #eee;}
.perf2 .tab_box .tab_top a.on { background-color: #3a3c8a;}
.perf2 .tab_box a.on, .perf2 .tab_box a:hover { background-color: #3a3c8a;}
.perf2 .tab_box .tab_btm {border: 1px solid #eee;border-top:none;width: 100%;box-sizing:border-box;}
.perf2 .tab_box .tab_btm a{border: none; border-left: 1px solid #eee;}
.perf2 .tab_box .tab_btm a:first-child {border: none;}
.perf2 .tab_box .tab_box_1 .tab_btm a {width: 33.33%;}
/* 
.perf2 .tab_cont {transition:.3s ease; transform:translateY(-20%) !important;}
.perf2 .tab_cont.tab1 {transition:.3s ease;  transform:translateY(0) !important;}
 */

.perf2 .perf_p {margin: 50px 1.33% 0 0;box-sizing: border-box; width: 24%; display: inline-block; float: left;}
.perf2 .perf_p:nth-child(4n) {margin-right: 0;}
.perf2 .perf_p .photo {overflow: hidden;height: 200px;width: 100%;position: relative;}
.perf2 .perf_p .photo a { display:block; height:100%;}
.perf2 .perf_p .photo img { min-height: 210px; max-width: 100%; width: 100%; height: auto;position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.perf2 .perf_p .tit {text-align: center;box-sizing: border-box;padding: 6px 30px; display: table;width: 100%; height: 52.5px; border-radius: 99px; border: 1px solid #ddd;margin-top: 10px;    background: #fafafa;}
.perf2 .perf_p .tit p {font-weight: 400; display: table-cell; vertical-align: middle; width: 100%;font-size: 15px; line-height: 120%;}
.perf2 .perf_p .photo .img1::after { transition: all .2s ease-in-out; content: ""; position: absolute; width: 100%; height: 100%; border: 5px solid #3a3c8a; box-sizing: border-box; opacity: 0; top: 0; left: 0; z-index: 1;}
.perf2 .perf_p .photo .img1:hover::after  {opacity: 1;}


/*ec 에코씰*/
.c_box .bar {height: 15px; width: 1px; background: #999; display: inline-block;  margin: 0 15px; vertical-align: middle;}
.ec .sec1 .txt_box, .ec .sec1 .img_box {width: 50%; display: inline-block; float: left; box-sizing: border-box;margin-top: 30px;}
.ec .sec1 .txt_box.txt_box1 {padding: 35px 5%; width: 60%;}
.ec .txt_box, .ec .txt_box2 { padding: 35px;background: #fafafa;}
.ec .sec1 .txt_box h6:first-child { margin-top:0;}
.ec .sec1 .txt_box h6 > span {font-weight: 300; font-size: 17px;}
.ec ol > li {margin-top: 5px;line-height: 140%; word-break: keep-all;}
.ec .sec1 .img_box {width: 38%;padding: 10px;display: inline-block;box-sizing: border-box;} 

.ec .sec2 .img_box {padding: 10px; margin-top: 30px;} 
.ec .sec2 .img_box .img {width: 49.4%; display: inline-block;}
.ec .sec2 .img_box .img2 {margin-left: 0.2%;float: right;}
.ec .sec2 .img_box .img > img {width: 100%;height: auto;}

.ec2 .sec1 .txt_box {width: 100%;}
.ec2 .sec1 .txt_box .tb {width: 50%; display: inline-block; float: left; box-sizing: border-box;}
.ec2 .sec2 .txt_box2 {margin-top: 30px;}
.ec2 .sec2 .txt_box2 ol.basic {margin-top: 0;}
.ec3 table tbody th {text-align: left;}
.ec3 .th2 {color: #3a3c8a;}




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

    /*cfi*/
    .cfi .tab_box {flex-wrap: wrap;}
    .cfi .tab_box a {width: 25%; margin-top: -1px;}
  /*코러실1 시공방법*/
  .cs1_2 .wrap2, .cs1_2 .wrap3 {padding: 40px;}
  .cs1_2 .wrap1 img, .cs1_2 .wrap2 img, .cs1_2 .wrap3 img {width: 100%;}

}


@media screen and (max-width:1200px){
    .lnb {left: 0; margin-left: 0;}


    /*history*/

    .history .his .tit, .history .his .month{float: none; width: 100%;}
    .history .his .month{margin-left: 0; margin-top: 30px;}

    .history .his .month p span.num {width: 5%; }
    .history .his .month p span.txt {width: 94%;}

    /*ecotect 시공방법*/
    .et3 .wrap1 .box {width: 47.5%;}
    .et3 .wrap1 .box:nth-child(3n) {padding-right:2.5%; margin-right:2.5%;}
    .et3 .wrap1 .box:nth-child(3n)::after {display: inline-block;}
    .et3 .wrap1 .box:nth-child(2n) {padding-right:0; margin-right:0;}
    .et3 .wrap1 .box:nth-child(2n)::after {display: none;}
/*코러실공법 특징*/
    .cs1_3 img { width: 100%;}
    .cs1_3 .wrap2 {padding: 50px;}
    .cs1_3 .wrap3 .wp3_2 .box .img {padding: 20px;}
}

@media screen and (max-width:1100px){

    /*에코텍트공법*/
    .et .img_box .cont_wrap .cont .txt {min-height: 200px;}
    .et .img_box .cont_wrap .cont .tit {min-height: 87px; display: flex; align-items: center; justify-content: center;}

    /*에코텍트공법 특징*/
    .et2 .wrap3 .cont_wrap .ct2 {margin-top: 20px;}

}
@media screen and (max-width:1024px){

    .f_wrapper .touch {display:block;}

/*location*/
    .location .inform .cont .txt {display: block;}
    .et2 .wrap7 .cont_wrap .cont {float: none; width: 100%;}
    .et2 .wrap7 .cont_wrap .ct2 {display: flex; justify-content: center; margin-top: 30px;}
    .et2 .wrap7 .cont_wrap .ct2 .img {width: 50%;}
    .et2 .wrap7 .cont_wrap .ct2 .img:first-child {border-bottom: 1px solid #ddd; border-right: none;}
    .et2 .wrap7 .basic2.flicking {min-width: 1024px;}
    .et2 .wrap9 .cw1 .cb2 .cont { float: none; width: 100%; margin-top: 30px;}
    .et2 .wrap9 .cw1 .cb2 .cont:first-child {margin-top: 0;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box {min-height: inherit; margin-top: 20px;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box:after {clear: both; content: ""; display: block;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box .img {float: left; width: 25%;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box ul.basic {float: left;margin-left: 5%; margin-top: 0; width: 63%;}
    .et2 .wrap9 .cw1 .cb2 .tit {margin: 0;}
    .et2 .wrap9 .cw2 .txt_box {min-height: 158px;}
    .et2 .wrap10 .cont_wrap .cont .txt_box ul li{font-size: 16px;}

    /*ecotect 시공방법*/
    .et3 .wrap2 .img, .et3 .wrap2 .table_m {width: 100%;display: block;}
    .et3 .wrap2 .img {margin-bottom: 50px; float: none;}
    .et3 .wrap2 .table_pc {display: none;}
    .et4 .wrap4 {height: auto; width: 100%;}
    .et4 .wrap4 .w4 {width: 100%;}
    .et4 .wrap4 .w4.w4_l {border-right: 1px solid #eee;border-bottom:none;}

    /*코러실공법 특징*/
    .cs1_3 .wrap3 .wp3_1 .box .fom p {font-size: 18px;    margin-top: 20px;}
    .cs1_3 .wrap3 .wp3_1 .box .fom {height: 180px;}
    .cs1_3 .wrap3 .wp3_2 .box .img {height: 180px; box-sizing: border-box;  padding: 0 20px;}
    .cs1_3 .wrap5 .wp5 > p { font-size: 14px;}
    /*코러실2 시공방법*/
    .cs2_2 .wrap > div {width: 100%; display: block; float: none; padding: 20px;}
    .cs2_2 .wrap .wp1 {text-align: center;}
    .cs2_2 .wrap .wp1 img {max-width: 500px;}

    /*코러실2 강관*/
    .cs2_4 .wrap4 .wp1 {width: 46%; margin-right:8%;}
    .cs2_4 .wrap4 .wp1::after {width: 8%; height: 8%;right: -12%;}
    .cs2_4 .wrap4 .wp1:nth-child(3n)::after {display: inline-block;}
    .cs2_4 .wrap4 .wp1:nth-child(3n) {margin-right: 8%;}
    .cs2_4 .wrap4 .wp1:nth-child(2n)::after {display: none;}
    .cs2_4 .wrap4 .wp1:nth-child(2n) {margin-right: 0;}
    /*시공사진*/
    .perf2 .tab_box .tab_box_1, .perf2 .tab_box .tab_box_2 {width: 100%; padding: 0;}
    .perf2 .tab_box .tab_box_2 {margin-top: 25px;}
    .perf2 .tab_box .tab_box_2 .tab_btm a {width: 20%;}
    .perf2 .perf_p {width: 48%; margin-right:2%;}
    .perf2 .perf_p:nth-child(2n) {margin-right: 0;}

    /*ec 에코씰*/
    .ec2 .sec1 .txt_box .tb1 {padding-right: 10px;}
    .ec2 .sec1 .txt_box .tb2 {padding-left: 10px;}
}

@media screen and (max-width:768px){


     /*공통*/
    .contents {padding: 110px 0 120px;}
    h3 {font-size: 34px;}

    /*cfi*/
    .cfi .tab_box a {width: 50%;}

    /*company*/
    .cp .vision {margin: 50px 0;}
    .cp .greet {margin-top: 60px;}
    .cp .greet .sign_box {margin-top: 60px;}
    .cp .vision .txt{margin-top: 50px;}

	
	.cp .top_txt {}
	.cp .top_txt .txt_left { text-align:center; width:100%; float:none;}
	.cp .top_txt .txt_right { float:none; width:70%; padding-left:0; margin:0 auto;}
	.cp .top_txt .sub_title { font-size:25px;}

    /*location*/
    .location .inform .cont_wrap {float: none; width: 100%;}
    .location .way {float: none; border-bottom: none; width: 100%; padding-left: 3%;}
    .location .way2 {border-bottom: 2px solid #eee;}
    .location .inform .cont_wrap .cont_box {padding-left: 3%;}
    .location .inform .cont .txt {display: inline-block;}

   .location .inform .cont_box {padding: 30px 0;}
    .location .inform .cw2 .cont_box {border-top: 1px solid #eee;}

    /*history*/
    .history .his .month p span.num {width: 7%; }
    .history .his .month p span.txt {width: 92%;}



    .history .tab_box a {width: 40%;}

    .tab_box a {width: 25%;}

    /*에코텍트공법*/
    .et .img_box {padding: 30px 3%;}

    .et .ib2 .img, .et .ib2 .img2 {float: none; width: 100%;}
    .et .ib2 .img2 img {display: none;}
    .et .ib2 .img2 .img_m {display: block;}
    .et .ib2 .img2 {margin-top: 30px;}

    /*에코텍트공법 특징*/
    .et2 .wrap2 .cont_wrap .cont_box .cont {float: none; width: 100%;}
    .et2 .wrap2 .cont_wrap .cont_box .ct2 img {display: block; width: 50%; margin: 30px auto 0;}
    .et2 .wrap3 .cont_wrap .ct2 img{display: none;}
    .et2 .wrap3 .cont_wrap .ct2 .img_m {display: block;}
    .et2 .wrap3 .cont_wrap, .et2 .wrap4 .cont_wrap .cont_box {display: block;}
    .et2 .wrap3 .cont_wrap .cont, .et2 .wrap4 .cont_wrap .cont {width: 100%; display: block; margin: 0;}
    .et2 .wrap3 .cont_wrap .ct2, .et2 .wrap4 .cont_wrap .ct2 {margin: 30px auto 0;}
    .et2 .wrap3 .cont_wrap .ct1 img, .et2 .wrap4 .cont_wrap .cont img{display: block; width: 50%; margin: 0 auto;}
    .et2 .wrap6 .cont {float: none; width: 55%; margin: 0 auto;}
    .et2 .wrap6 .ct2 {margin-top: 30px;}
    .et2 .wrap8 .cont_wrap .cont_box .cont {width: 39%;}
    .et2 .wrap8 .cont_wrap .cont_box .ct1 {width: 43%;}
    .title_bold {font-size: 16px; transform: skew(-0.03deg);}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box {padding: 30px 3%;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box .img {width: 40%;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box ul.basic {width: 55%;}
    .et2 .wrap9 .cw1 .cb1 {padding: 30px 0;}
    .et2 .wrap9 .cw2 .cont {width: 100%; float: none; margin-top: 30px;}
    .et2 .wrap9 .cw2 .cont:after {clear: both; display: block; content: "";}
    .et2 .wrap9 .cw2 .cont:first-child {margin-top: 0;}
    .et2 .wrap9 .cw2 .cont .img{float: left; width: 50%; height: 180px; overflow: hidden; position: relative;}
    .et2 .wrap9 .cw2 .cont .img img {height: 100%; width: auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);}
    .et2 .wrap9 .cw2 .txt_box {min-height: 137px;}
    .et2 .wrap9 .cw2 .txt_wrap {float: right;  width: 50%;}
    .et2 .wrap9 .cw2 .txt_wrap .tit {margin-top: 0;}
    .et2 .wrap10 .cont_wrap .cont {float: none; width: 100%;}
    .et2 .wrap10 .cont_wrap .ct2 {margin-top: 20px;}
    .et2 .wrap9 .cw2, .et2 .wrap10 .cont_wrap {padding: 30px 3%;}

    /*ecotect 시공방법*/
    .et3 .wrap1 .box {width: 100%;padding-right:0; margin-right:0;}
    .et3 .wrap1 .box::after {display: none;}

    .et4 .wrap2.flicking, .et4 .wrap3.flicking {min-width: 550px;}
    .et4 .wrap2 .img1, .et4 .wrap3 .img1 {width: 550px;}
    .et4 .wrap3 .img_wrap {width: 550px;}
    .et4 .wrap5 { padding: 10px;}
    .et4 .wrap5 .img {width: 32%; margin-left: 2%;}
    /*코러실1 개요*/
    .cs1_1 .wrap2.flicking {min-width: 550px;}
    .cs1_1 .wrap3 > div {width: 100%; padding: 40px 30px;}
    .cs1_1 .wrap3 .img2 {padding: 0 30px 40px 30px;}
    /*코러실1 시공방법*/
    .cs1_2 .wrap1.flicking {min-width: 550px; padding: 20px;}
    .cs1_2 .wrap2.flicking , .cs1_2 .wrap3.flicking  {min-width: 550px; padding: 30px;}
    /*코러실1 특징*/
    .cs1_3 .wrap2.flicking {min-width: 550px; padding: 20px;}
    .cs1_3 .wrap3 > div, .cs1_3 .wrap4 > div {width: 100%;}
    .cs1_3 .wrap3 .wp3_1 .box .fom {text-align: center; padding: 0;}
    .cs1_3 .wrap5 .wp5 {width: 49%;}
    .cs1_3 .wrap5 .wp5:nth-child(3n) {margin-right: 2%;}
    .cs1_3 .wrap5 .wp5:nth-child(2n) {margin-right: 0;}

    /*코러실2 개요*/
    .cs2_1 .wrap1 .wp1, .cs2_1 .wrap1 .wp1:first-child, .cs2_1 .wrap1 .wp1:nth-child(2) {width: 100%; margin:0 0 20px 0;}
    .cs2_1 .wrap1 .wp1:last-child {margin: 0;}

    /*코러실2 철재강교*/
    .cs2_3 .wrap1 {padding: 30px;}
    .cs2_3 .wrap2 .wp1 h6, .cs2_3 .wrap2 .wp1 .img {width: 100%;}
    .cs2_3 .wrap2 .wp1 .img {margin:20px 0 0;}
    .cs2_3 .wrap3 .txt_box {width: 60%;}
    .cs2_3 .wrap3 img {width: 38%;}
    .cs2_3 .wrap4 .wp1 {width: 48%; margin-right: 4%;}
    .cs2_3 .wrap4 .wp1:nth-child(3n) {margin-right: 4%;}
    .cs2_3 .wrap4 .wp1:nth-child(2n) {margin-right: 0;}
    .cs2_3 .wrap4 .wp1 .tit {padding: 10px 0;}

    /*코러실2 강관*/
    .cs2_4 .wrap1, .cs2_4 .wrap2 {padding: 20px;}
    .cs2_4 .wrap1 > div {width: 100%;}
    .cs2_4 .wrap1 .wp1, .cs2_4 .wrap1 .wp2 {padding:0;}
    .cs2_4 .wrap1 .wp2 {margin-top: 35px;}
    .cs2_4 .wrap1 .wp2 .img .tit {font-size: 14px;}
    .cs2_4 .wrap2 .txt_box {width: 100%;padding:0;}
    .cs2_4 .wrap2 img {width: 100%;margin-top: 35px;}
    .cs2_4 .wrap3 > ul {width: 100%;}

    /*시공사진*/
    .perf2 .tab_box .tab_btm a {font-size: 14px;}

    
    /*ec 에코씰*/
    .ec2 .sec1 .txt_box .tb {width: 100%; padding: 0;}
    .ec2 .sec1 .txt_box .tb2 {margin-top: 30px;}
}
@media screen and (max-width:650px){

    /*공통*/
    .lnb .depth1_name, .lnb .home {display: none;}

    .lnb .lnb_menu {width: 100%;}

    .sub_vis h2 {bottom: 80px;}
    .sub_vis h2 .inner {padding-left: 0; text-align: center;}
    .sub_vis h2 .tit {font-size: 40px;}

/*company*/
    .cp .bg .inner {display: block;justify-content: inherit; align-items:baseline; padding: 28px 0; box-sizing: border-box; text-align: center;}
    .cp .bg .txt {margin-top: 20px;}

    .cp .vision .img img {display: none;}
    .cp .vision .img .m_img {display: block;}

    .cp .bg .tit, .cp .bg .txt {animation-name: fadeInDown;}

    .tab_box {flex-wrap:wrap;}
    .tab_box a {margin-top: -1px; width: 50%;}

    /*에코텍트 공법*/
    .et .img_box .cont_wrap .cont {float: none; width: 100%;}
    .et .img_box .cont_wrap .cont .tit {border:none; min-height: inherit;}
    .et .img_box .cont_wrap .cont .txt {border: 1px solid #3a3c8a !important;  min-height: inherit; padding: 3%;}

     /*시공실적*/
     .perf .tab_box a { width: 33.33%;}

     /*시공사진*/
     .perf2 .perf_p {width: 100%; margin-right:0;}
     .perf2 .perf_p .tit {height: auto; padding: 10px 30px;}
    
      /*ec 에코씰*/
    .ec .sec1 .txt_box.txt_box1, .ec .sec1 .img_box {width: 100%;}
    .ec .sec1 .img_box .diagram img {width: 100%;}
    .ec .txt_box, .ec .txt_box2 {padding: 20px;}

}
@media screen and (max-width:550px){

    /*에코텍트 공법 특징*/
      .et2 .wrap9 .cw2 .cont .img{ float: none; width: 100%; height: auto; position: static;}
    .et2 .wrap9 .cw2 .cont .img img {position: static; height: auto; width: 100%; transform: none;}
    .et2 .wrap9 .cw2 .txt_box {min-height: inherit;}
    .et2 .wrap9 .cw2 .txt_wrap {float: none; width: 100%;}
    .et2 .wrap9 .cw2 .txt_wrap {margin-top: 10px;}
    /*코러실1 특징*/
    .cs1_3 .wrap5 .wp5 {width: 100%;margin-right: 0;}
    /*코러실2 철재강교*/
    .cs2_3 .wrap3 .txt_box, .cs2_3 .wrap3 img {width: 100%;}
    .cs2_3 .wrap3 img {margin: 20px 0 0 0; }
    .cs2_3 .wrap2 .wp1 .img img {max-width: 178px; display: block; float: none; margin: 0 auto;}
    .cs2_3 .wrap2 .wp1 .img .desc {width: 100%; padding: 0; margin-top: 20px;}

    /*코러실2 강관*/
    .cs2_4 .wrap4 .wp1, .cs2_4 .wrap4 .wp1:nth-child(3n) {width: 100%; margin-right:0;}
    .cs2_4 .wrap4 .wp1::after, .cs2_4 .wrap4 .wp1:nth-child(3n)::after {display: none;}
    
    /*ec 에코씰*/
    .ec .sec2 .img_box .img {width: 100%;}
    .ec .sec2 .img_box .img2 { margin-left: 0; float: none; margin-top: 12px;}
    .ec .c_box .bar {height: auto; display: block;}


}
@media screen and (max-width:500px){

 /*공통*/
    h3 {font-size: 30px;}

/*company*/
    .cp .greet .sign_box {text-align: center;}
    .cp .line {margin: 30px 0;}
    .cp .vision .txt {margin-top: 30px;}

    /*location*/

    .location .inform .cont .txt {display: block;}
    .map .other {text-align: center; right: 0;}

    /*history*/
     .history .his .month p span.num {display: block; width: 100%; font-weight: 600;}
    .history .his .month p span.txt {width: 100%;}

    .history .his .month p {margin-top: 5px;}
    .history .his .h4:before {margin-right: 10px;}
    .history .his .img_box {height: 350px;}
    .history .tab_box a {width: 50%;}

    h4, .h4 {font-size: 22px;}
    h4:before, .h4:before  {top: 0;}

    h5 {font-size: 20px;}
    h5:before {height: 18px;}

    /*에코텍트공법 특징*/
    .et2 .wrap2 .cont_wrap .cont_box .ct2 img {width: 100%;}
    .et2 .wrap3 .cont_wrap .ct1 img, .et2 .wrap4 .cont_wrap .cont img {width: 80%;}
    .et2 .wrap6 .cont {width: 80%;}
    .et2 .wrap7 .cont_wrap .ct2 {flex-direction: column;}
    .et2 .wrap7 .cont_wrap .ct2 .img:first-child {border-right: 1px solid #ddd; border-bottom: none;}
    .et2 .wrap7 .cont_wrap .ct2 .img {width: 100%;}
    .et2 .wrap8 .cont_wrap .cont_box {flex-direction: column;}
    .et2 .wrap8 .cont_wrap .cont_box .cont {width: 75%;}
    .et2 .wrap8 .cont_wrap .cont_box .ct1 {width: 81%;}
    .et2 .wrap8 .img_wrap img {width: 100%;}
    .et2 .wrap8 .img_wrap {padding: 30px 3%;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box .img, .et2 .wrap9 .cw1 .cb2 .cont .txt_box ul.basic {width: 100%; float: none;}
    .et2 .wrap9 .cw1 .cb2 .cont .txt_box ul.basic {margin-top: 20px; margin-left: 0;}
    .et2 .wrap9 .cw1 .cb2 .tit {margin: 0 auto;}
    .et2 .wrap9 .cw1 .cb1 {flex-direction: column;}
    .et2 .wrap9 .cw1 .cb1 .cont {width: 90%;}

    /*코러실2 개요*/
    .cs2_1 .wrap1 {padding: 20px;}
    .cs2_1 .wrap1 .wp1 .tit {padding: 10px 0;}
    /*코러실공법 시공방법*/
    .cs2_2 .wrap .wp2 ul {padding-left:0; font-size: 14px;}
    .cs2_2 .wrap .wp1 table {font-size: 14px;}
    .cs2_2 .wrap .wp2 ul li {margin-top: 10px;}


}