@charset "utf-8"; /* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:420px !important;} 
.root_daum_roughmap .wrap_map {height:420px !important;} 
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;} 
.roughmap_lebel_text:after {content:"경기도 화성시 정남면 만년로 765-7"; font-size:12px; line-height:15px;} 

.doc-tit {position: relative; padding-left: 12px; color: #000022; font-size: var(--font-size-25-20); font-weight: 500; line-height: 1em; letter-spacing: -.03em; margin-bottom: var(--margin-30-16); font-family: 'NEXON Lv2 Gothic';} 
.doc-tit:before {content: ""; position: absolute; top: 0; left: 0; width: 2px; height: 25px; background-color: #000022;} 

.doc-cnt {margin-bottom:var(--margin-150-50);} 
.doc-cnt:last-child {margin-bottom:0;} 
.doc-cnt.bg-grey {background-color: #f4f4f4;} 

.doc-sub-cnt {padding:var(--padding-100-60) 0;} 
.doc-sub-cnt:last-child {padding-bottom:0;} 

.mb150 {margin-bottom:var(--margin-150-50);} 
.mb20 {margin-bottom:var(--margin-20-10);} 
.mb30 {margin-bottom:var(--margin-30-16);} 
.mb0 {margin-bottom:0 !important;} 


.mt30 {margin-top:var(--margin-30-16) !important;} 
.mt40 {margin-top:var(--margin-40-20) !important;} 
.mt50 {margin-top:var(--margin-50-20) !important;} 
.mt110 {margin-top:var(--margin-110-30) !important;} 

.pt0 {padding-top:0 !important;} 
.pb0 {padding-bottom:0 !important;} 
.pb100 {padding-bottom:var(--padding-100-60) !important;} 

.txt-blue {color: var(--color-primary) !important;} 
.txt-grey {color: #888888 !important;} 

.bg-grey {background-color: #f9f9f9;} 

.flex-wrap {display:flex;} 

/* 온라인 견적 */
.inquiry-list {margin-top:30px; margin-bottom:var(--margin-130-60);} 
.inquiry-list ol {display:flex; flex-wrap: wrap; margin:-35px;} 
.inquiry-list ol li {width:33.3333%; padding:35px;} 
.inquiry-list ol li .tit-wrap {position:relative; width:fit-content; display:flex; margin-bottom:10px;} 
.inquiry-list .num {display:inline-block; width: 40px; height: 40px; margin-right:17px; background-color: rgb(37, 95, 172); box-shadow: 0px 3px 4.6px 0.4px rgba(0, 0, 0, 0.13); border-radius: 100%; text-align:center; line-height:40px; color: #fff; font-weight:700;} 
.inquiry-list .tit {position:relative; margin-right:var(--margin-30-16); font-weight:700; font-size: var(--font-size-24-20); color: var(--color-dark); line-height:40px;} 
.inquiry-list .flex-wrap {justify-content: space-between; position:relative; border-top:1px solid #ddd; padding-top: var(--padding-40-20); margin-top: var(--margin-20-10);} 
.inquiry-list .flex-wrap .tit-wrap {position: absolute; top: -20px; left: 0; z-index: 10; background: #f9f9f9;} 
.inquiry-list .desc {flex: 1 1 auto; width:1%; min-width:0; padding-right:10px; font-size: var(--font-size-17-15); line-height:1.647em;} 
.inquiry-list .img {width:150px; border-radius: 3px;} 

/* 인사말 */
.greetings .con {display:flex; position: relative;} 
.greetings-video video {width:100%; max-width: 1000px; height:550px;} 
.greetings .con .r-con {min-width:0; width:1%; flex:1 1 auto; position:relative; z-index: -1; margin-top: 80px;} 
.greetings .con .tt-wrap {background-color: #e9f8ff; display:flex; align-items:center; height:100%; margin-left: -13%; padding-left: 21%; padding-top: 100px; padding-bottom: 100px;} 
.greetings .con .tt-wrap .tt {position:relative; width: fit-content; padding-right:var(--padding-50-20); margin-bottom:var(--margin-30-16); font-family: 'NEXON Lv2 Gothic'; font-size:var(--font-size-30-20); line-height:1.4em; color: #255fac; font-weight:700;} 
.greetings .con .tt-wrap .tt::after {content: "”"; position: absolute; bottom: -30px; right: 0; font-family: 'NEXON Lv2 Gothic'; font-size: var(--font-size-100-60); color: #255fac; opacity: .2; line-height: 0;} 
.greetings .con .tt-wrap .tt2 {margin-bottom:var(--margin-20-10); font-size: var(--font-size-17-15); line-height:1.647em;} 
.greetings .con .tt-wrap .tt2:last-child {margin-bottom:0; margin-top:var(--margin-40-20);} 
.greetings .con .tt-wrap .tt2 strong {font-weight:600; color: #222222;} 

/* 연혁 */
.history-head {width:100%; height:300px; margin-bottom:var(--margin-60-30); background: url(/images/sub/bg-history.jpg) no-repeat center/cover; display:flex; justify-content: center; align-items: center; color: #333; font-size: var(--font-size-30-18); line-height:1.333em; text-align:center;} 
.history .flex-wrap .tab-menu {width: 36%;} 
.history .flex-wrap .tab-contents {flex: 1 1 auto; width:1%; min-width:0;} 
.history .tab-menu .tabs li {margin-bottom:var(--margin-15-10);} 
.history .tab-menu .tabs li a {display:inline-block; width:140px; height:40px; display:flex; justify-content: center; align-items: center; font-family: 'NEXON Lv2 Gothic'; font-weight:700; color: #888888; border: 1px solid #ddd; border-radius: 50vh;} 
.history .tab-menu .tabs li.active a {color: var(--color-primary);} 
.history .row {display: flex; margin-bottom: var(--margin-80-20);} 
.history .row:last-child {margin-bottom: 0;} 
.history .row .year {font-size: var(--font-size-50-20); font-family: 'NEXON Lv2 Gothic'; font-weight: 700; color: var(--color-primary); padding-right: var(--padding-70-20); line-height:1em;} 
.history .row .info {position: relative; padding-left: var(--padding-110-20);} 
.history .row .info .wrap {display: flex;} 
.history .row .info .wrap .month {min-width: 46px; font-weight: 700; font-family: 'NEXON Lv2 Gothic'; font-size: var(--font-size-22-16); color: #333333;} 
.history .row .info .wrap .month ul li {font-size: var(--font-size-18-16); line-height: 1.222em;} 

/* 공사실적 */
.performance-list ol {display:flex; flex-wrap: wrap; margin:-10px;} 
.performance-list ol li {display:flex; flex-direction: column; align-items: center; justify-content: center; width:calc(50% - 20px); margin:10px; min-height: 160px; border: 1px solid #ddd;} 
.performance-list li.bg {background-repeat: no-repeat; background-position: center; background-size: cover;} 
/* .performance-list li.bg1 {background-image: url(/images/sub/bg-construction-01.jpg);} 
.performance-list li.bg6 {background-image: url(/images/sub/bg-construction-02.jpg);} 
.performance-list li.bg11 {background-image: url(/images/sub/bg-construction-03.jpg);}  */
.performance-list .num {font-family: 'NEXON Lv2 Gothic'; font-weight:700; font-size: var(--font-size-22-18); line-height:1.818em; color: var(--color-primary);} 
.performance-list .desc {font-size: var(--font-size-18-16); font-weight:500; line-height:2.222em;} 

/* 오시는길 */
.directions {position:relative;} 
.directions .contact-list {position: absolute; left:0; bottom:0; width:100%; height:140px; z-index:10; background-color: #255fac; text-align: center;} 
.directions .contact-list ul {display: flex;} 
.directions .contact-list ul li {position:relative; width: 25%; height:140px; display:flex; flex-direction: column; align-items: center; justify-content: center; padding:0 var(--padding-50-20);} 
.directions .contact-list ul li::after {content: ""; position: absolute; right:0; top: 50%; transform: translateY(-50%); width:1px; height:50px; background-color: #ddd;} 
.directions .contact-list ul li:last-child::after {display:none;} 
.directions .contact-list ul li strong {color: #ddd; display: block; margin-bottom: var(--margin-20-10); font-weight:600; line-height:1em; text-transform: uppercase;} 
.directions .contact-list ul li p {font-weight:400; font-size: var(--font-size-19-17); line-height:1.368em; color: #fff;} 

/* porduct */
.flex-wrap.type2 {justify-content: initial;} 
.flex-wrap.type2 .txt-wrap {min-width: 0; width: 1%; flex: 1 1 auto; position: relative; margin-left: -90%; background-color: #fff; margin-top: 350px; margin-right: 10%; text-align:center;} 
.flex-wrap.type2 .img {width: 100%; background-repeat: no-repeat; background-position: top center; background-size: contain;} 
.product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-pool.jpg);} 
.product-head .tit {color: #222222; font-size: var(--font-size-34-24); line-height:1em; margin-top:var(--margin-40-20); margin-bottom:var(--margin-20-10); font-weight: 700; font-family: 'NEXON Lv2 Gothic'; letter-spacing: -0.04em;} 
.product-head .desc {font-size: var(--font-size-22-18); letter-spacing: -0.04em; line-height:1.555em;} 

.porduct .flex-wrap {position:relative; align-items: end;} 
.porduct .flex-wrap.start {align-items: start;} 
.porduct .flex-wrap.between {justify-content: space-between;} 
.porduct .flex-wrap.type3 .cnt {width:500px;} 
.porduct .flex-wrap.type3::after {display:none;} 
.porduct .flex-wrap.type3 > .img {flex: 1 1 auto; width:1%; min-width:0;} 
.porduct .flex-wrap.type4 .cnt {flex: 1 1 auto; width:1%; min-width:0;} 
.porduct .flex-wrap.type4 > .img {width:440px;} 
.porduct .flex-wrap.type5 {padding-top:var(--padding-70-20);} 
.porduct .flex-wrap.type5 .cnt {width:50%;} 
.porduct .flex-wrap.type5 .desc-wrap {width:50%;} 
.porduct .flex-wrap.left {flex-direction: row-reverse; justify-content: start;} 

.porduct .flex-wrap .cnt {position:relative; padding: var(--padding-40-20) var(--padding-40-20) 0 var(--padding-70-30);} 
.porduct .flex-wrap .cnt.type2 {padding: var(--padding-40-20) var(--padding-80-40) 0 var(--padding-70-30);} 
.porduct .flex-wrap .cnt.type3 {padding: var(--padding-70-30) var(--padding-50-20) 0 var(--padding-70-30);} 
.porduct .flex-wrap .cnt.type4 {padding: var(--padding-70-30) var(--padding-80-40) 0 var(--padding-70-30);} 

.porduct .flex-wrap.left::after {content: ""; position: absolute; top:0; left:0; width:160px; height:110px; background: url(/images/sub/deco-left.png) no-repeat center/contain;} 
.porduct .flex-wrap::after {content: ""; position: absolute; top:0; right:0; width:160px; height:110px; background: url(/images/sub/deco-right.png) no-repeat center/contain;} 
.porduct .product-head .flex-wrap::after {display:none;} 

.porduct .cnt-tit {margin-bottom:var(--margin-30-10); font-size: var(--font-size-30-20); font-weight:700; color: #222222; line-height:1em; letter-spacing: -0.04em;} 
.porduct .cnt .img {margin-top:var(--margin-60-30);} 

.dot-list > li {position:relative; padding-left:10px; font-size:var(--font-size-17-15); color:#454545; letter-spacing: -0.04em;} 
.dot-list > li:before {content:"·"; position:absolute; top:-2px; left:0; font-weight:900;} 
.dot-list > li strong {font-weight:600;} 

.equipment .product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-equipment.jpg);} 
.equipment .flex-wrap.type3 {align-items: center;} 
.equipment .flex-wrap.type3 .img {width:330px; margin-right:var(--margin-50-20);} 
.equipment .flex-wrap.type3 .txt p {font-size: var(--font-size-18-16); letter-spacing:-0.04em; line-height:1.555em; color:#454545;} 

.aquarium .product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-aquarium.jpg);} 
.interior .product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-interior.jpg);} 
.items .product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-items.jpg);} 
.tank .product-head .flex-wrap.type2 .img {height: 500px; background-image: url(../images/sub/bg-tank.jpg);} 

/* 상업용수조 */
.porduct .desc-wrap .flex-wrap::after {display:none;} 
.porduct .desc-tit {font-weight:700; font-size: var(--font-size-18-16); color: #222222; margin-bottom:var(--margin-20-10);} 
.porduct .desc-wrap .flex-wrap .img {width:250px; margin-right:var(--margin-30-16);} 
.porduct .desc-wrap .flex-wrap .desc {flex: 1 1 auto; width:1%; min-width:0;} 
.porduct .desc-wrap .desc {margin-bottom:var(--margin-20-10);} 
.porduct .desc-wrap .desc strong {color: #222222;} 
.porduct .desc-wrap .dot-list li {line-height: 1.875em; font-size: var(--body-font-size);} 

/* .btn-buy {display:block; margin: var(--margin-50-30) auto 0; width:140px; text-align:center; line-height:1em; font-weight:500; padding:var(--padding-20-10) 0; color: #fff; border-radius: 50vh; background-color: #255fac;}  */


/* 온라인 견적문의  */
.shape-wrap {position:relative;}
.shape-wrap.shape1 {width:580px; height:250px;}
.shape-wrap.shape2 {width:520px; height:315px;}
.shape-wrap.shape3 {width:460px; height:350px;}
.shape-wrap  .size {position: absolute;}
.shape-wrap.shape1 .vertical {top:17px; left:80px;}
.shape-wrap.shape1 .horizontal {top:75px; left:60px;}
.shape-wrap.shape1 .height {top:50px; right:-15px;}
.shape-wrap.shape1 .support {bottom:80px;right:-15px;}
.shape-wrap.shape2 .horizontal {top:-20px; left:80px;}
.shape-wrap.shape2 .height {top:40px; right:0;}
.shape-wrap.shape2 .height2 {top:120px; right:0;}
.shape-wrap.shape2 .support {bottom:90px; right:0;}
.shape-wrap.shape2 .vertical {right:50px; bottom:10px;}
.shape-wrap.shape3 .diameter {top:0; left:30px;}
.shape-wrap.shape3 .height {top:130px; right:0;}
.shape-wrap.shape3 .support {bottom:70px; right:0;}
.size span {font-weight:500; font-size: var(--font-size-15-13); color: #222222; line-height:38px; letter-spacing: 0;}
.size .input {display:inline-block; margin:0 10px;}