@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

/* 공통 */
.doc-title {}
.doc-title:bofore {content:"";}

/* 회사소개 */
.greeting {letter-spacing:-0.03em; }
.greeting .title {color:#eee; font-size:100px; font-weight:600; display:flex; justify-content:flex-end; margin: 0 -3px 30px 0; font-family: 'Inter', sans-serif;line-height: 0.570em;}
.greeting .txt{color:#eee; font-size:80px; font-weight:600; line-height: 1.125em; margin-top: -165px; font-family: 'Inter', sans-serif;letter-spacing:-0.03em;}
.greeting ul{display:flex; margin:0 -10px}
.greeting li{width:33.333333%;padding:0 10px;}
.greeting .tit {margin:-43px 0 50px; font-size: 38px;line-height:1.368em; z-index:10;color: #2c2c2c;}
.greeting .tit .green{color: #357637;}
.greeting .tit .blue{color: #1c205a;}
.greeting .greeting-start{font-size:22px; line-height:2.364em; font-weight:500; color:#2c2c2c; margin-bottom:26px;}
.greeting .cnt {font-size:18px; line-height:1.667em; margin-bottom:40px;}
.greeting .cnt p {margin-bottom:15px;}
.greeting .cnt p:last-child {margin-bottom:0;}
.greeting .greeting-end {font-size:18px; line-height:1.667em; color:#2c2c2c; font-weight:500;}

/* 사업소개 */
.business-cnt{letter-spacing:-0.03em; text-align:center;font-weight:500; max-width:1000px; margin:0 auto;}
.business-cnt h3{color:#2c2c2c; font-weight:500;padding:20px 15px;border:2px solid #dfdfdf;background-color:#fafafa;border-radius:50px;font-size:24px; margin-bottom:60px;line-height:1.500em;}
.business-cnt h3 span{color:#357637;}
.business-cnt .group{display:flex; margin:0 -50px;}
.business-cnt .group .col {width:25%; padding:0 50px; text-align:center;}
.business-cnt .group .col .title {position:relative;width:175px;height:175px; margin:0 auto 50px;  border-radius:50%;color:#fff; background:#1c205a;line-height:1.6em; font-size:20px; display:flex;align-items:center; justify-content:center; line-height:1.600em;}
.business-cnt .group .col .title:after {content:'';width:1px; height:50px; bottom:-50px; left:50%; margin-left:-.5px; background-color:#dfdfdf; position:absolute; z-index:-1;}
.business-cnt .group .col:nth-child(even) .title{background:#357637;}
.business-cnt .group .col:last-child .title:after {display:none}
.business-cnt .sub-cnt {position:relative; display:inline-block; width:100%}
.business-cnt .sub-cnt:after {content:'';width:1px; height:100%; top:0; left:50%; margin-left:-.5px; background-color:#dfdfdf; position:absolute; z-index:-1;}
.sub-cnt {position:relative; z-index:1;}
.sub-cnt li{max-width:175px;color:#505050;background:#fafafa;border:2px solid #dfdfdf;line-height:46px;margin:0 auto 10px;}
.sub-cnt li:last-child {margin-bottom:0;}

/* 오시는길 */
.root_daum_roughmap {width:100% !important; height:380px !important;}
.root_daum_roughmap .wrap_map {height:380px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"자인산업"; font-size:12px; line-height:15px;}
.location-info{display:flex;justify-content:center;margin-top:40px; margin-left:-40px;}
.location-info .info-box{display:flex; align-items:center; padding-left:40px;}
.location-info .info-box .icon {width:94px;height:94px;border-radius:50%;background:#f4f4f4; margin-right:20px;}
.location-info .info-txt{flex:1 1 auto; min-width:0; width:1%}
.location-info .info-txt .title{color:#357637;font-size:14px;}
.location-info .info-txt .txt{color:#2c2c2c;font-size:19px;}

/* 트렌치 */
.list-tit{font-size:24px;font-weight:700;margin-bottom:30px;display: block;position:relative; padding-left:32px;color:#2c2c2c;}
.list-tit:before{content:''; background:url("../images/sub/list_icon.png") 0 0 no-repeat; background-size:cover; position:absolute; top:13px; left:0; width:16px; height:4px;}
.trench-cnt1 .con-box{display:flex; align-items:center; background-color: #1c205a; }
.trench-cnt1 .con-box .img-box{padding:8px;width:50%;}
.trench-cnt1 .con-box .txt-box{width:50%;padding:0 0 0 50px;}
.trench-cnt1 .con-box .txt-box .title{color:#fff;font-size:30px;font-weight:700;margin-bottom:40px;}
.trench-cnt1 .con-box .txt-box p{color:#bfc2e3;font-size:16px;line-height:1.875em;font-weight:300;}

.table01 table {width:100%; border-collapse:collapse; border-spacing:0px; border-top:1px solid #a8a8a8; font-size:16px;line-height:3.563em;letter-spacing:-.03em;}
.table01 table thead th {height:58px; padding:0 5px; color:#2c2c2c; font-weight:500; background:#fafafa; border:1px solid #dfdfdf; border-top:0;line-height:3.563em;}
.table01 table tbody th {padding:0 5px; color:#2c2c2c; font-weight:500; background:#fafafa; border:1px solid #dfdfdf; border-top:0;line-height:3.563em;font-weight:500;}
.table01 table tbody td {padding:0 5px; color:#505050;  text-align:center; border:1px solid #dfdfdf; border-top:0;font-weight:300;line-height:3.563em;}
.table01 table tbody td ul{height:100%;}
.table01 table tbody td ul li{font-weight:300;}
.table01 table th:first-child,
.table01 table td:first-child {border-left:0;}
.table01 table th:last-child,
.table01 table td:last-child {border-right:0;}
.table01.type2 table tbody td ul {padding-left:20px; text-align:left;}
.table01.type2 table tbody td ul li {position:relative; padding-left:15px;}
.table01.type2 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; position:absolute; top:13px; left:0;}

.trench-cnt2{margin-top:60px;}
.trench-cnt3{margin-top:60px;}
.trench-cnt3 .cnt3-box{display:flex;justify-content:center;}
.trench-cnt3 .cnt3-box>div{margin:0 35px;}
.trench-cnt3 .box-con1 .img-box{width:180px;height:180px;border-radius:50%;background-color:#1d2359;}
.trench-cnt3 .box-con2 .img-box{width:180px;height:180px;border-radius:50%;background-color:#223452;}
.trench-cnt3 .box-con3 .img-box{width:180px;height:180px;border-radius:50%;background-color:#294c48;}
.trench-cnt3 .box-con4 .img-box{width:180px;height:180px;border-radius:50%;background-color:#30633f;}
.trench-cnt3 .box-con5 .img-box{width:180px;height:180px;border-radius:50%;background-color:#357537;}
.trench-cnt3 .txt-box {text-align:center;}
.trench-cnt3 .txt-box .title{font-size:20px;line-height: 2.850em;font-weight: 500;margin-top:10px;}
.trench-cnt3 .txt-box p{font-size:16px;font-weight:400;line-height:1.625em;letter-spacing:-.03em;font-weight:300;}
.trench-cnt4 {margin-top:60px;}
.trench-cnt4 .cnt4-box{display:flex;}
.trench-cnt4 .img-box{margin-right:50px;}
.trench-cnt4 .img-box:last-child{margin-right:0;}
.trench-cnt4 .img-box img{}
.trench-cnt4 .img-box p{text-align:center;line-height:3.167em;}
.trench-cnt5{margin-top:60px;}
.trench-cnt5 .table01 table tbody td {padding:15px 0;vertical-align:top; text-align:center;}
.trench-cnt5 .table01 table tbody td ul{display:inline-block;}
.trench-cnt5 .table01 table tbody td ul li {font-size:16px; line-height:2em;}
.trench-cnt5 .table01 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; position:relative; top:-.02em; display:inline-block; margin-right:10px; vertical-align:middle; letter-spacing:0;}
.trench-cnt6{margin-top:60px;}
.trench-cnt6 .cnt6-box{display:flex;}
.trench-cnt6 .con-box{margin-right:50px;}
.trench-cnt6 .con-box:last-child{margin-right:0;}
.trench-cnt6 .con-box .img-box{position:relative;}
.trench-cnt6 .con-box .img-box .num{width:40px;height:40px;background-color:#1c205a;color:#fff;font-size:20px;font-weight:700;text-align:center;line-height:40px;position:absolute;left:0;top:0;}
.trench-cnt6 .con-box .title{font-size:18px;margin-top:20px;text-align:center;}
.trench-cnt6 .con-box img {width:100%;}
.trench-cnt7{margin-top:40px;}
.trench-cnt7 .cnt7-con{display:flex;box-sizing:border-box;}
.trench-cnt7 .cnt7-con .con-box{border:1px solid #dfdfdf; border-left:0;width:25%;padding:50px 30px;position:relative;}
.trench-cnt7 .cnt7-con .con-box:first-child {border-left:1px solid #dfdfdf;}
.trench-cnt7 .cnt7-con .con-box:nth-child(even) .title:after{background-color: #357637;}
.trench-cnt7 .cnt7-con .con-box .title{position:relative; padding-top:20px;font-size:20px;line-height:1.5em;font-weight:500; margin-bottom:10px;}
.trench-cnt7 .cnt7-con .con-box .title:after{content:"";width:24px;height:4px;background-color: #1c205a;position: absolute;top:0; left:0;}
.trench-cnt7 .cnt7-con .con-box p{font-size:16px;line-height:1.625em;font-weight:300;}
.trench-cnt8{margin-top:60px;font-size:16px;}

/* 그레이팅 */
.grating-cnt{margin-bottom:60px;}
.grating-cnt:last-child{margin-bottom:0;}
.grating-cnt .con-box{display:flex; align-items:center; background-color: #1c205a;}
.grating-cnt .con-box .img-box {padding:8px;}
/* .grating-cnt .con-box .img-box .box {padding:52px; background:#fff; display:flex;} */
.grating-cnt .con-box .txt-box {width:50%; padding-left:50px;}
.grating-cnt .con-box .txt-box .title{color:#fff;font-size:30px;font-weight:700;margin-bottom:40px;}
.grating-cnt .con-box .txt-box p {color:#bfc2e3;font-size:16px;}
.grating-cnt:nth-child(even) .con-box {background-color:#357637;}
.grating-cnt:nth-child(even) .con-box .txt-box p{color:#c5e4c6;font-size:16px;}

/* 무소음 트렌치 */
.noiseless .con-box{display:flex;}
.noiseless .table01{width:50%; padding-right:20px;}
.noiseless .img-box{width:50%; padding-left:20px;}
.noiseless .img-box ul {display:flex; margin-left:-20px;}
.noiseless .img-box ul li {padding-right:20px;}
.noiseless .cnt2{margin-top:60px;}
.noiseless .table01 table tbody td {padding:0;}
.noiseless .table01 table tbody td ul {padding-left:20px; text-align:left;}
.noiseless .table01 table tbody td ul li {position:relative; padding-left:15px;line-height:2em;}
.noiseless .table01 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; position:absolute; top:14px; left:0;}
.noiseless .table-pd {line-height:5.375em;}

/* 배수판 */
.drain .drain-btn{display:flex;}
.drain .drain-btn a{width:50%;font-size:17px;padding:20px 0;display:block;text-align:center;}	
.drain .drain-btn .display1{background-color:#1c205a;color:#fff;}
.drain .drain-btn .display2{background-color: #fafafa;color: #878787;}
/* 바닥 벽체 배수판 */
.drain .page1{margin-top:60px;}
.drain .page1 .cnt1{}
.drain .page1 .cnt1 .con-box1{background-color:#f4f4f4;display:flex;border:1px solid #dfdfdf;}
.drain .page1 .cnt1 .con-box1 img{width:100%;padding:40px;}
.drain .page1 .cnt1 .con-box1 img:first-child{border-right:1px solid #dfdfdf;}
.drain .page1 .cnt1 .table01{margin-top: 30px;}
.drain .page1 .cnt1 .table01 table tbody tr td ul{display:flex;padding: 20px 30px;flex-direction:row;flex-wrap:wrap;text-align:left;margin-left:100px;font-size:16px;}
.drain .page1 .cnt1 .table01 table tbody td ul li {position:relative; padding-left:15px;width:50%;line-height:2em;}
.drain .page1 .cnt1 .table01 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; position:absolute; top:14px; left:0; line-height: 1.8em;}
.drain .page1 .cnt2{margin-top:60px;}
.drain .page1 .cnt2 .cnt2-box{display:flex;justify-content:space-between;}
.drain .page1 .cnt2 .cnt-box{border:1px solid #dfdfdf;}
.drain .page1 .cnt2 .cnt-box:last-child{margin-right:0;}
.drain .page1 .cnt2 .cnt-box .img-box{background-color:#f4f4f4;max-width:270px;max-height:270px;padding:35px 15px;border-bottom:1px solid #dfdfdf;}
.drain .page1 .cnt2 .cnt-box .txt-box{padding:30px;}
.drain .page1 .cnt2 .cnt-box .txt-box .tit{color:#2c2c2c;font-size:20px;font-weight: 700;}
.drain .page1 .cnt2 .cnt-box .txt-box p{font-size:14px;color:#357637;margin:10px 0;}
.drain .page1 .cnt2 .cnt-box .txt-box ul{font-size:14px;}
.drain .page1 .cnt2 .cnt-box .txt-box ul li{line-height:1.571em;font-weight:300;}
.drain .page1 .cnt3{margin-top:60px;}
.drain .page1 .cnt3 .table01 table tbody tr:nth-child(2) td{padding:20px 0;}
.drain .page1 .cnt3 .table01 table tr td{padding:10px 0;}
.drain .page1 .cnt3 .table01 table tbody td p span{color: #357637;font-weight:500;}
.drain .page1 .cnt3 .table01 table tbody tr td {line-height:1.625em;}
.drain .page1 .cnt4 {margin-top:60px;}
.drain .page1 .cnt4 .cnt4-box{display:flex;align-items:center;justify-content:space-between;}
.drain .page1 .cnt4 .cnt4-box .cnt-box p{text-align:center;font-weight:500;font-size:18px;line-height:3.167em;}
.drain .page1 .cnt4 .cnt4-box .arrow-box{margin-top:-31.5px;padding:0 10px;}
.drain .page1 .cnt5{margin-top:60px;}
.drain .page1 .cnt5 .cnt5-box{display:flex;justify-content:space-between;margin:0;}
.drain .page1 .cnt5 .cnt5-box .con-box{border:1px solid #dfdfdf;}
.drain .page1 .cnt5 .cnt5-box .con-box .img-box{padding:30px 60px;}
.drain .page1 .cnt5 .cnt5-box .con-box p{font-weight:500;text-align:center;font-size:18px;line-height:3.167em;}

/* 벽체 배수판 */
.drain .page2 .cnt1-box{display:flex;background-color:#f4f4f4;text-align:center;}

.drain .page2 .cnt1 .cnt1-box .con-box .tit{width:150px;height:45px;background-color:#1c205a;border-radius:25px;color:#fff;text-align:center;line-height:45px;margin: 40px auto;}
.drain .page2 .cnt2{margin-top:60px;}
.drain .page2 .cnt2-box{display:flex;background-color:#f4f4f4;text-align:center;}
.drain .page2 .con-box{width:50%;border:1px solid #dfdfdf;box-sizing: border-box;}
.drain .con-box:first-child{border-right:0;}
.drain .con-box .tit{width:150px;height:45px;background-color:#357637;border-radius:25px;color:#fff;text-align:center;line-height:45px;margin: 40px auto;}
.drain .con-box .box{text-align:center;margin-top:50px;}
.drain .con-box .img-container{display:flex;padding: 0 55px 30px;flex-wrap:wrap;}
.drain .con-box .img-container .img-box{padding:5px;}
.drain .con-box .img-container p{text-align:center;font-size:17px;;}
.drain .page2 .cnt3 {margin-top: 60px;}
.drain .page2 .cnt3 .table01 table tbody tr td ul{display:flex;padding: 20px 30px;flex-direction:row;flex-wrap:wrap;text-align:left;margin-left:70px;font-size:16px;}
.drain .page2 .cnt3 .table01 table tbody td ul{display:flex;line-height:1.625em;}
.drain .page2 .cnt3 .table01 table tbody td ul li {position:relative; padding-left:15px;width:50%;}
.drain .page2 .cnt3 .table01 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; position:absolute; top:12px; left:0; line-height: 1.8em;}
.drain .page2 .cnt4{margin-top:60px;}
.drain .page2 .cnt4 .cnt4-box .txt-box{width:50%; padding:40px 0 40px 50px;}
.drain .page2 .cnt4 .cnt4-box .txt-box .tit{color:#fff;font-size:30px;font-weight:700;margin-bottom:40px;}
.drain .page2 .cnt4 .cnt4-box .txt-box p{color: #c5e4c6;}
.drain .page2 .cnt4 .cnt4-box{display:flex; align-items:center; background-color: #357637;}
.drain .page2 .cnt4 .cnt4-box .img-box{width:50%;padding: 8px;}


.drain .page2 .cnt4 .cnt4-box .img-box img:nth-child(1){margin-right:30px;}
.drain .page2 .cnt5 {margin-top:60px;}
.drain .page2 .cnt5 .cnt5-box{display:flex;background-color:#f4f4f4;border:1px solid #dfdfdf;}
.drain .page2 .cnt5 .cnt5-box .img-box{width:50%;padding:40px;}
.drain .page2 .cnt5 .cnt5-box .img-box:first-child{border-right:1px solid #dfdfdf;}

/* 방수턱 */
.wapr .cnt1 .cnt1-box{}
.wapr .cnt1 .cnt1-box>p{margin-bottom:30px;font-weight:300;}
.wapr .cnt1 .cnt1-box .con-box{display:flex;}
.wapr .cnt1 .cnt1-box .con-box .img-box{width:50%;}
.wapr .cnt1 .cnt1-box .con-box .img-box img:first-child{margin-right:10px;}
.wapr .cnt1 .cnt1-box .con-box .table01{width:50%;}
.wapr .cnt1 .cnt1-box .con-box .table01 table{line-height:1.875em;}
.wapr .cnt1 .cnt1-box .con-box .table01 table tbody td{font-weight:300;}
.wapr .cnt1 .cnt1-box .con-box .table01 table tbody td p{line-height:1.875em;padding: 10px 0;}
.wapr .cnt1 .cnt1-box .con-box .table01 table tbody tr:nth-child(1) td{padding-top:20px;}
.wapr .cnt1 .cnt1-box .con-box .table01 ul {display:flex;justify-content:center;}
.wapr .cnt1 .cnt1-box .con-box .table01 ul li{margin-right:50px;}
.wapr .cnt1 .cnt1-box .con-box .table01 ul li:last-child{margin-right:0;}

.wapr .cnt2{margin-top:60px;}
.wapr .cnt2 .cnt2-box{display:flex;justify-content:space-between;}
.wapr .cnt2 .cnt2-box .img-box{position:relative;}
.wapr .cnt2 .cnt2-box .img-box img{}
.wapr .cnt2 .cnt2-box .img-box .num{width:40px;height:40px;background-color:#1c205a;color:#fff;text-align:center;line-height:40px;position:absolute;top:0;left:0;}
.wapr .cnt2 .cnt2-box .img-box p{text-align:center;margin-top:15px;font-weight:500;}

.wapr .cnt3{margin-top:60px;}
.wapr .cnt3 .table01 table tbody th{line-height:1.875em;}
.wapr .cnt3 .table01 table tbody td{line-height:1.875em;padding:15px 0;}
.wapr .cnt3 .table01 table tbody tr:nth-child(1) td{padding:20px 0;}
.wapr .cnt3 .table01 table tbody tr td .img-box{padding:19.5px 0;}
.wapr .cnt3 .table01 table tbody td ul li {display:inline-block; width:100%;}
.wapr .cnt3 .table01 table tbody td ul li:before {content:''; width:5px; height:5px; background:#357637; border-radius:50%; display:inline-block; margin-top:-4px; margin-right:10px; vertical-align:middle;}