@charset "utf-8";

/* 
 * content CSS Document
 *
 */

#header .gnb > li > a {height: 145rem;}
#header .head-box {padding: 0 50rem;}

#content {padding: 170rem 0 140rem; min-height: 800rem;}
body.bt0 #content {padding: 170rem 0 0;}

.area-subVisual {position: relative; top: 20rem; width: 98%; margin: 0 auto;}
.area-subVisual__inr {border-radius: 10rem; overflow: hidden;} 
.area-subVisual i {display: block; width: 100%; height: 630rem; animation: visual-Scale 8s both;}
.area-subVisual[data-subLayout="about"] i {background: url('/images/content/s-visual01.jpg') no-repeat center/cover;}
.area-subVisual[data-subLayout="business"] i {background: url('/images/content/s-visual02.jpg') no-repeat center/cover;}
.area-subVisual[data-subLayout="product"] i {background: url('/images/content/s-visual03.jpg') no-repeat center/cover;}
.area-subVisual[data-subLayout="performance"] i {background: url('/images/content/s-visual04.jpg') no-repeat center/cover;}
.area-subVisual[data-subLayout="customer"] i {background: url('/images/content/s-visual05.jpg') no-repeat center/cover;}

.visual-tit {position: absolute; top: 42%; left: 0; width: 100%;}
.visual-tit__inr {max-width: 1580rem; margin: 0 auto; padding: 0 50rem;}
.visual-tit span {display: block; font-size: 24rem; font-weight: 300; color: #fff; animation: visual-ani 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.visual-tit h2 {padding-top: 28rem; font-size: 70rem; font-weight: 600; color: #fff; animation: visual-ani 1.5s cubic-bezier(0.4, 0, 0.2, 1) both; animation-delay: 0.3s;}

.sub-tit {padding-bottom: 65rem; text-align: center; font-size: 48rem; font-weight: #101010;}

[data-width] {margin: 0 auto; padding: 0 30rem;}
[data-width="1580"] {max-width: 1580rem;}
[data-width="1380"] {max-width: 1380rem;}
[data-width="1300"] {max-width: 1300rem;}
[data-width="1200"] {max-width: 1200rem;}
[data-width="1180"] {max-width: 1180rem;}

@keyframes visual-ani {
	from {opacity: 0; -webkit-transform: translateY(50rem); transform: translateY(50rem);}
	to {opacity: 1.0; -webkit-transform: translateY(0); transform: translateY(0);}
}
@keyframes visual-Scale{
	0%{transform:scale(1.13)}
	100%{transform:scale(1)}
}

@media screen and (max-width:1300px) {
    #header .head-box {height: 120rem;}
    #header .btn_menu {right: 40rem;}
    .area-subVisual {width: 97%;}
}
@media screen and (max-width:1024px) {
    .area-subVisual > i {height: 500rem;}
    .visual-tit span {font-size: 20rem;}
    .visual-tit h2 {padding-top: 22rem; font-size: 60rem;}
    .sub-tit {font-size: 40rem;}
}
@media screen and (max-width:768px) {
    #content {padding: 150rem 0 100rem;}
    body.bt0 #content {padding: 150rem 0 0;}
    .area-subVisual {top: 15rem; width: 96%;}
    .sub-tit {padding-bottom: 45rem; font-size: 35rem;}
}
@media screen and (max-width:620px) {
    .area-subVisual i {height: 400rem;}
    .visual-tit span {font-size: 18rem;}
    .visual-tit h2 {padding-top: 20rem; font-size: 50rem;}
}
@media screen and (max-width:540px) {
    #header .head-box {height: 90rem; padding: 0 30rem;}
    #header .btn_menu {right: 20rem;}
    #content {padding: 120rem 0 100rem;}
    body.bt0 #content {padding: 120rem 0 0;}
    .area-subVisual {top: 10rem;}
    .area-subVisual[data-subLayout="about"] i {background-position-x: -230rem;}
    .visual-tit__inr {padding: 0 30rem;}
    .sub-tit {padding-bottom: 45rem; font-size: 30rem;}
    [data-width] {padding: 0 20rem;}
}


/* lnb */
.lnb {position: absolute; bottom: -47rem; left: 50%; display: flex; width: 743rem; height: 93rem; background: #fff; border-radius: 8rem; transform: translateX(-50%); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; z-index: 8;}
.lnb .home {position: relative; width: 93rem; height: 93rem; border-radius: 8rem 0 0 8rem; background: #d71414; flex: none;}
.lnb .home::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url('../images/content/ic-home.svg') no-repeat; width: 22rem; height: 22rem;} 
.lnb .home a {display: block; overflow: hidden; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; font-size: 0; text-indent: 100%; white-space: nowrap;}
.lnb .dept {display: flex; align-items: center; justify-content: center; height: 100%; flex: auto;}
.lnb .dept > li {position: relative; width: 50%; height: 100%;}
.lnb .dept > li:nth-child(2) {border-left: 1rem solid #eee;}
.lnb .dept > li a {display: flex; align-items: center; justify-content: space-between; padding: 0 44rem; height: 100%; color: #101010; font-size: 20rem; font-weight: 600;}
.lnb .dept > li i {display: none;}
.lnb .dept_tit {height: 100%;}
.lnb .dept_tit a::after {content:''; display:block; width: 15rem; height: 8rem; background:url('/images/content/ic-lnb-arrow.svg') no-repeat;}
.lnb .dept_tit a.active::after {transform: rotate(180deg); margin-top: -3rem;}
.lnb .dept_list {display: none; position: absolute; top: 88rem; left: 50%; background: #fff; border-radius: 8rem; box-shadow: rgba(100, 100, 111, 0.2) 0rem 7rem 29rem 0rem; width: 100%; transform: translateX(-50%); z-index: 9;}
.lnb .dept_list > li > .box {display: none;}
.lnb .dept .dept_list li:nth-child(n+2) {border-top: 1rem solid var(--color-gray);}
.lnb .dept .dept_list li a {padding: 14rem 20rem; font-size: 16rem; color: #666;}
.lnb .dept .dept_list li a:hover,
.lnb .dept .dept_list li a.on {background: #fff9f9; color: #101010;}

@media screen and (max-width:1300px) {
    .lnb {height: 90rem;}
    .lnb .home {width: 90rem; height: 90rem;}
}
@media screen and (max-width:768px) {
    .lnb {width: 90%; height: 75rem;}
    .lnb .home {display: none;}
    .lnb .dept {justify-content: space-between;}
    .lnb .dept > li {width: 50%;}
    .lnb .dept > li:nth-child(2) {margin: 0;}
    .lnb .dept > li a {font-size: 16rem;}
}
@media screen and (max-width:620px) {
    .lnb {height: 60rem;}
}
@media screen and (max-width:540px) {
    .lnb {width: 80%;}
    .lnb .dept > li {width: 100%;}
    .lnb .dept > li:nth-child(1) {display: none;}
    .lnb .dept > li:nth-child(2) {border-left: 0;}
    .lnb .dept > li a {padding: 0 28rem;}
}

/* ceo 인사말 */
.greeting-tit {display: block; text-align: center; font-size: 45rem; font-weight: 600; line-height: 1.4;}
.greeting-img {display: block; margin-top: 58rem; overflow: hidden; border-radius: 10rem;}
.greeting-img i {display: block; background: url('../images/content/greeting.jpg') center/cover no-repeat; height: 500rem;}
.greeting-img i.active {animation: visual-Scale 8s both;}
.greeting-txt {display: flex; justify-content: center; align-items: flex-start; margin-top: 60rem;}
.greeting-txt__lt {font-size: 30rem; font-weight: 500; color: #222; line-height: 1.4;}
.greeting-txt__rt {margin-left: 7%;}
.greeting-txt__rt p {font-size: 18rem; font-weight: 300; color: #444; line-height: 1.7;}
.greeting-txt__rt p:nth-child(n+2) {padding-top: 40rem;}
.greeting-txt__rt p:last-child {display: flex; align-items: center; padding-top: 68rem;}
.greeting-txt__rt .ceo-name {display: block; padding-left: 15rem;}
.greeting-txt__rt .ceo-name img {height: 45rem;}

@media screen and (max-width:1580px) {
    .greeting-txt__lt {width: 40%;}
    .greeting-txt__lt br {display: none;}
    .greeting-txt__rt {width: 40%;}
    .greeting-txt__rt p br {display: none;}
}
@media screen and (max-width:1024px) {
    .greeting-tit {font-size: 38rem;}
    .greeting-img {margin-top: 40rem;}
    .greeting-txt {flex-direction: column; justify-content: unset; text-align: center;}
    .greeting-txt__lt {width: 100%;}
    .greeting-txt__lt br {display: block;}
    .greeting-txt__rt {width: 100%; margin-left: 0; margin-top: 40rem;}
    .greeting-txt__rt p br {display: block;}
    .greeting-txt__rt p:last-child {justify-content: center;}
}
@media screen and (max-width:768px) {
    .greeting-img i {height: 400rem;}
    .greeting-tit {font-size: 32rem;}
    .greeting-txt__lt {font-size: 25rem;}
    .greeting-txt__rt p {font-size: 17rem;}
    .greeting-txt__rt p br {display: none;}
    .greeting-txt__rt p:nth-child(n+2) {padding-top: 28rem;}
    .greeting-txt__rt p:last-child {padding-top: 50rem;}
}
@media screen and (max-width:620px) {
    .greeting-img i {height: 300rem;}
}
@media screen and (max-width:540px) {
    .greeting-img i {height: 250rem;}
    .greeting-tit {font-size: 26rem;}
    .greeting-tit br {display: none;}
    .greeting-txt__lt br {display: none;}
    .greeting-img {margin-top: 30rem;}
    .greeting-txt {margin-top: 40rem; text-align: left;}
    .greeting-txt__lt {font-size: 21rem;}
    .greeting-txt__lt span {display: block;}
    .greeting-txt__rt {margin-top: 28rem;}
    .greeting-txt__rt p {font-size: 16rem;}
    .greeting-txt__rt p:nth-child(n+2) {padding-top: 20rem;}
    .greeting-txt__rt p:last-child {padding-top: 50rem; justify-content: start;}
    .greeting-txt__rt .ceo-name img {height: 35rem;}
}

/* 사업비전 및 연혁 */
.vision-diagram {position: relative; display: table; margin: 60rem auto 0;}
.vision-diagram > img {height: 344rem;}
.vision-diagram__list {position: absolute; top: 0; width: 97rem; height: 97rem;}
.vision-diagram__list i {display: flex; align-items: center; justify-content: center; height: 100%;}
.vision-diagram__list p {position: absolute; top: -50rem;  left: 50%; transform: translateX(-50%); width: 100%; text-align: center; font-size: 20rem; font-weight: 600;}
.vision-diagram__list.item01 {top: 26.4%; left: 2.4%;}
.vision-diagram__list.item02 {top: 4.3%; left: 42%;}
.vision-diagram__list.item03 {top: 26.4%; right: 2.4%;}
.vision-diagram__list.item01 i img {height: 38rem;}
.vision-diagram__list.item02 i img {height: 35rem;}
.vision-diagram__list.item03 i img {height: 38rem;}
.vision-diagram__list.item01 p {color: #b5b6be;}
.vision-diagram__list.item02 p {color: #c53025;}
.vision-diagram__list.item03 p {color: #418dd6;}
.vision-diagram__tit {position: absolute; bottom: 25rem; left: 50%; transform: translateX(-50%);}
.vision-diagram__tit span {display: flex; gap: 10rem; justify-content: center;}
.vision-diagram__tit span i {display: block; width: 8rem; height: 8rem; border-radius: 100%;}
.vision-diagram__tit span i:nth-child(1) {background: #b3b4bc;}
.vision-diagram__tit span i:nth-child(2) {background: #c53025;}
.vision-diagram__tit span i:nth-child(3) {background: #418dd6;}
.vision-diagram__tit strong {display: block; padding-top: 10rem; font-size: 50rem;}

.vision-img {display: grid; grid-template-columns: repeat(3, 1fr); gap: 34rem; margin-top: 110rem;}
.vision-imgBox {height: 435rem; border-radius: 10rem;}
.vision-imgBox.ibox1 {background: url('../images/content/img-vision01.jpg') no-repeat center/cover;}
.vision-imgBox.ibox2 {background: url('../images/content/img-vision02.jpg') no-repeat center/cover;}
.vision-imgBox.ibox3 {background: url('../images/content/img-vision03.jpg') no-repeat center/cover;}
.vision-imgBox__cont {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;}
.vision-imgBox__cont strong {font-size: 35rem; color: #fff; font-weight: 600;}
.vision-imgBox__cont ul {display: flex; justify-content: center; align-items: center; gap: 10rem; padding-top: 38rem;}
.vision-imgBox__cont ul li {font-size: 20rem; font-weight: 300; text-align: center; padding: 7rem 10rem; border-radius: 100rem; background: rgba(255,255,255,.1); color: #fff;}

.area-history {padding: 114rem 0; margin-top: 114rem; background: #f9f9f9;}
.area-history h4 {padding-bottom: 75rem; font-size: 42rem; font-weight: 600; text-align: center;}
.history-list {display: flex; justify-content: space-between;}
.history-list__tit {position: sticky; top: 30rem; height: 100%;}
.history-list__tit strong {display: block; font-size: 80rem; font-weight: 600; color: #c40d0d; letter-spacing: -3rem;}
.history-list__tit p {padding-top: 22rem; font-size: 16rem; font-weight: 600;}
.history-list__cont {width: 65%;}
.history-list__cont ul li {display: flex; align-items: center; padding: 26rem 0; font-size: 20rem; font-weight: 300; color: #666;}
.history-list__cont ul li:nth-child(n+2) {border-top: 1rem solid #e7e7e7;}
.history-list__cont ul li:last-child {border-bottom: 1rem soldi #e7e7e7;}
.history-list__cont ul li span {display: inline-block; padding-right: 38rem; font-size: 25rem; font-weight: 600; color: #101010;}

@media screen and (max-width:1300px) {
    .vision-img {gap: 20rem;}
    .vision-imgBox {height: 380rem;}
}
@media screen and (max-width:1024px) {
    .vision-imgBox__cont strong {font-size: 30rem;}
    .vision-imgBox__cont ul {flex-direction: column; padding-top: 28rem;}
    .vision-imgBox__cont ul li {font-size: 17rem;}

    .area-history {padding: 70rem 0; margin-top: 100rem;}
    .area-history h4 {font-size: 35rem;}
    .history-list__tit strong {font-size: 60rem;}
    .history-list__cont ul li {font-size: 18rem;}
    .history-list__cont ul li span {font-size: 22rem;}
}
@media screen and (max-width:768px) {
    .vision-img {grid-template-columns: 1fr; margin-top: 90rem;}
    .vision-imgBox {height: 280rem;}
    .vision-imgBox__cont ul {flex-direction: unset;}

    .area-history h4 {padding-bottom: 45rem; font-size: 30rem;}
    .history-list {flex-direction: column;}
    .history-list__cont {width: 100%; margin-top: 35rem;}
    .history-list__tit {position: unset; padding: 30rem 20rem; box-sizing: border-box; background: #fff; border-radius: 10rem; border: 1rem solid #c40d0d; text-align: center;}
    .history-list__tit strong {font-size: 45rem; letter-spacing: -1rem;}
    .history-list__tit p {padding-top: 6rem;}
}
@media screen and (max-width:620px) {
    .vision-diagram {margin: 50rem auto 0;}
    .vision-diagram > img {width: 100%; height: 319rem;}
    .vision-diagram__list {width: 90rem; height: 90rem;}
    .vision-diagram__list p {font-size: 18rem;}
    .vision-diagram__tit strong {font-size: 40rem;}
}
@media screen and (max-width:540px) {
    .vision-diagram > img {height: 225rem;}
    .vision-diagram__list {width: 65rem; height: 64rem;}
    .vision-diagram__list.item01 i img {height: 27rem;}
    .vision-diagram__list.item02 i img {height: 25rem;}
    .vision-diagram__list.item03 i img {height: 27rem;}
    .vision-diagram__list p {font-size: 17rem; top: -40rem;}
    .vision-diagram__list p span {display: block;}
    .vision-diagram__list.item03 p {top: -60rem;}
    .vision-diagram__tit span {gap: 8rem;}
    .vision-diagram__tit span i {width: 6rem; height: 6rem;}
    .vision-diagram__tit strong {font-size: 30rem;}

    .vision-img {margin-top: 45rem; gap: 12rem;}
    .vision-imgBox {height: 230rem;} 
    .vision-imgBox__cont strong {font-size: 24rem;}
    .vision-imgBox__cont ul {padding-top: 22rem;}
    .vision-imgBox__cont ul li {font-size: 15rem;}

    .area-history {padding: 60rem 0; margin-top: 85rem;}
    .area-history h4 {padding-bottom: 35rem;}
    .history-list__cont ul li {padding: 22rem 0; font-size: 17rem;}
    .history-list__cont ul li span {padding-right: 18rem; font-size: 20rem;}
    .history-list__tit strong {font-size: 35rem;}
}

/* 인증현황 */
.cf-list ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 40rem;}
.cf-list__imgBox {display: block; height: 426rem; background: #f8f8f8;}
.cf-list__img {display: flex; align-items: center; justify-content: center; height: 100%;}
.cf-list__img img {height: 80%;}
.cf-list__txt {padding-top: 30rem; font-size: 22rem; font-weight: 500; text-align: center;}

body:has(.certificate-dialog[open]){ overflow: clip; }
.certificate-dialog{ border: 0; }
.dialog-close{ float: right; position: sticky; top: 0; right: 0; width: 45rem; aspect-ratio: 1; background: #222; }
.dialog-close::before, .dialog-close::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 60%; height: 2px; background: #fff; }
.dialog-close::before{ rotate: 45deg; }
.dialog-close::after{ rotate: -45deg; }
.dialog-img{ display: block; max-width: 100%; width: 100%; height: auto; }
@media screen and (max-width:768px) {
    .cf-list__imgBox {height: 300rem;}
    .cf-list ul {gap: 15rem;}
    .cf-list__txt {font-size: 20rem;}
}
@media screen and (max-width:620px) {
    .cf-list ul {grid-template-columns: repeat(2,1fr); gap: 40rem 15rem;}
}
@media screen and (max-width:540px) {
    .cf-list__imgBox {height: 250rem;}
    .cf-list__txt {padding-top: 18rem; font-size: 17rem;}
}

/* 오시는 길 */
.root_daum_roughmap .wrap_controllers {display: none;}
.root_daum_roughmap_landing {border-radius: 10rem;}
.root_daum_roughmap .border1,
.root_daum_roughmap .border2,
.root_daum_roughmap .border3,
.root_daum_roughmap .border4 {border: 0 !important; background-color: transparent !important;}
.loation-info {display: flex; justify-content: center; margin-top: 62rem;}
.loation-info__txt {width: 65%;}
.loation-info__txt p {font-size: 30rem; font-weight: 600;}
.loation-info__txt ul {display: flex; margin-top: 30rem; padding-top: 49rem; border-top: 1rem solid #ddd;}
.loation-info__txt ul li {font-size: 20rem; font-weight: 500; color: #101010;}
.loation-info__txt ul li:nth-child(n+2) {padding: 0 0 0 45rem;} 
.loation-info__txt ul li span {display: inline-block; padding: 0 8rem 0 0; font-weight: 600; color: #c3c3c3;}
.loation-info__btn {display: flex; justify-content: center; align-items: center; width: 149rem; height: 133rem; margin: 0 0 0 4%; border-radius: 5rem; background: #d71414;}
.loation-info__btn span {color: #fff; font-size: 18rem; font-weight: 600;}
.loation-info__btn i {display: block; background: url('../images/content/ic-location.svg') no-repeat; width: 17rem; height: 22rem; margin: 0 auto 12rem;}

@media screen and (max-width:1300px)  {
    .root_daum_roughmap .wrap_map {height: 450rem !important;}
}
@media screen and (max-width:1024px) {
    .loation-info__txt {width: 80%;}
    .loation-info__txt p {font-size: 25rem;}
    .loation-info__txt ul li {font-size: 18rem;}
}
@media screen and (max-width:768px) {
    .loation-info__txt ul {flex-direction: column; margin-top: 25rem; padding-top: 25rem;}
    .loation-info__txt ul li:nth-child(n+2) {padding: 10rem 0 0;}
}
@media screen and (max-width:620px) {
    .root_daum_roughmap .wrap_map {height: 350rem !important;}
    .loation-info {flex-direction: column;}
    .loation-info__btn {margin: 35rem 0 0; width: 100%; height: auto; padding: 20rem; box-sizing: border-box;}
    .loation-info__btn span {display: flex; align-items: center;}
    .loation-info__btn i {margin: 0 15rem 0 0;}
    .loation-info__txt {width: 100%;}
}
@media screen and (max-width:540px) {
    .root_daum_roughmap .wrap_map {height: 280rem !important;}
    .loation-info__txt p {font-size: 20rem;}
    .loation-info__txt ul li {font-size: 16rem;}
    .loation-info__btn span {font-size: 16rem;}
}

/* comm content */
.area-business .fullImg-top {background: url('../images/content/water-design-bg.jpg') no-repeat center/cover; background-attachment: fixed;}
.area-product .fullImg-top {background: url('../images/content/water-design-bg2.jpg') no-repeat center/cover; background-attachment: fixed;}
.fullImg-top {height: 522rem;}
.fullImg-top__inr {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.fullImg-top strong {display: block; padding-bottom: 30rem; font-size: 45rem; font-weight: 600; color: #fff;}
.fullImg-top strong span {display: flex; align-items: center; justify-content: center; width: max-content; padding: 10rem; margin-bottom: 15rem; font-size: 18rem; font-weight: 400; background: #fff; border-radius: 5rem; color: #c40d0d;}
.fullImg-top p {font-size: 35rem; font-weight: 600; color: #fff; line-height: 1.5;}
.fullImg-top p.ty2 {font-size: 22rem; font-weight: 400;}

.flex-box__wrap {margin-top: 130rem;}
.flex-box {display: flex; justify-content: space-between; align-items: center; gap: 30rem;}
.flex-box.ty2 {align-items: unset;}
.flex-box.ty2 .flex-box__cont-wrap {width: 35%; padding-top: 35rem;}
.flex-box:nth-child(n+2) {margin-top: 80rem; padding-top: 80rem; border-top: 1rem solid #ddd;}
.flex-box__mainTxt {font-size: 30rem; font-weight: 600;}
.flex-box__subTxt {display: block; padding-top: 18rem; font-size: 18rem; font-weight: bold; color: #999;}
.flex-box__cont {display: flex; gap: 44rem; padding-top: 42rem;}
.flex-box__cont p {position: relative; padding-left: 22rem; font-size: 23rem; font-weight: 600;}
.flex-box__cont p::before {content: ''; position: absolute; top: 7rem; left: 0; width: 0; height: 0; border-top: 7rem solid transparent; border-right: 10rem solid transparent; border-bottom: 7rem solid transparent; border-left: 10rem solid #d71414;}
.flex-box__cont ul li {position: relative; padding-left: 14rem; font-size: 18rem; font-weight: 300; color: #444; line-height: 1.4;}
.flex-box__cont ul li::before {content: ''; position: absolute; top: 9rem; left: 0; width: 5rem; height: 5rem; border-radius: 100%; background: #cacaca;}
.flex-box__cont ul li:nth-child(n+2) {margin-top: 20rem;}
.flex-box__img span {display: block; width: 100%; border: 1rem solid #eee;}
.flex-box__img.flex {display: flex; gap: 22rem;}
.flex-box__img img {width: 100%;}

.area-product .flex-box {gap: 70rem;}
.area-product .flex-box__cont-wrap {width: 47%;}
.area-product .flex-box__cont {padding-top: 30rem;}
.area-product .flex-box__cont ul li {line-height: 1.8; padding-left: 0;}
.area-product .flex-box__cont ul li::before {display: none;}
.area-product .flex-box__cont ul li span {color: #c40d0d;}
.area-product .flex-box__mainTxt {font-size: 35rem;}

@media screen and (max-width:1300px) {
    .flex-box__cont {flex-direction: column; gap: 30rem;}

    .area-product .flex-box__cont-wrap {width: 60%;}
    .area-product .flex-box__cont ul li br {display: none;}
}
@media screen and (max-width:1024px) {
    .flex-box__wrap {margin-top: 100rem;}
    .flex-box__mainTxt {font-size: 25rem;}
    .flex-box__subTxt {font-size: 15rem;}
    .flex-box__cont-wrap {width: 70%;}
    .flex-box__cont p {padding-left: 17rem; font-size: 19rem;}
    .flex-box__cont p::before {top: 5rem;}
    .flex-box__cont ul li {font-size: 16rem;}
    .flex-box__cont ul li:nth-child(n+2) {margin-top: 15rem;}
    .flex-box__cont ul li::before {width: 3rem; height: 3rem;}

    .fullImg-top {height: 450rem;}
    .fullImg-top p {font-size: 28rem;}

    .area-product .flex-box__cont-wrap {width: 70%;}
}
@media screen and (max-width:768px) {
    .flex-box__img {width: 40%;}
    .flex-box.ty2 {flex-direction: column; align-items: unset;}
    .flex-box.ty2 .flex-box__img {width: 100%;}
    .flex-box.ty2 .flex-box__cont-wrap {padding-top: 0;}
    .flex-box:nth-child(n+2) {margin-top: 50rem; padding-top: 50rem;}
    .flex-box__cont-wrap {width: 47%;}
    .flex-box__cont {padding-top: 28rem;}
    .flex-box__cont ul li:nth-child(n+2) {margin-top: 12rem;}

    .area-business .fullImg-top,
    .area-product .fullImg-top {background-attachment: unset;}

    .fullImg-top strong {font-size: 38rem;}
    .fullImg-top p.ty2 {font-size: 17rem;}
}
@media screen and (max-width:620px) {
    .flex-box__wrap {margin-top: 80rem;}
    .flex-box {flex-direction: column; align-items: unset;}
    .flex-box__cont-wrap {width: 100%;}
    .flex-box__cont {gap: 20rem;}
    .flex-box.ty2 .flex-box__cont-wrap {width: 100%;}
    .flex-box__mainTxt {font-size: 22rem;}
    .flex-box__img {width: 100%; padding: 20rem; background: #f9f9f9; box-sizing: border-box;}
    .flex-box__img span {width: 50%; margin: 0 auto; } 

    .fullImg-top {height: 350rem;}
    .fullImg-top p {font-size: 24rem;}
    .fullImg-top p br {display: none;}
    .fullImg-top strong {padding-bottom: 20rem; font-size: 30rem;}

    .area-product .flex-box {gap: 40rem;}
    .area-product .flex-box__cont-wrap {width: 100%;}
    .area-product .flex-box__img {padding: 0; background: #fff;}
    .area-product .flex-box__img span {width: 100%;}
    .area-product .flex-box__mainTxt {font-size: 30rem;}
    
}
@media screen and (max-width:540px) {
    .flex-box__wrap {margin-top: 65rem;}
    .flex-box__cont ul li:nth-child(n+2) {margin-top: 8rem;}

    .fullImg-top {height: 300rem;}


}

/* 제품소개 > Active 여과 시스템 */
.active-system {padding: 130rem 0; margin-top: 130rem; background: #f8f8f8; text-align: center;}
.active-system strong {display: block; padding-bottom: 30rem; font-size: 45rem; font-weight: 600;}
.active-system strong span {display: flex; align-items: center; justify-content: center; width: max-content; padding: 10rem;margin: 0 auto 15rem; font-size: 18rem; font-weight: 400; background: #fff; border-radius: 5rem; color: #c40d0d;}
.active-system__inr > p {font-size: 18rem; font-weight: 400; line-height: 1.6;}
.active-system__img {display: block; width: 100%; margin-top: 50rem;}
.active-system__img img {width: 100%; border: 1rem solid #eee;}
.active-system__table {padding-top: 80rem;}
.active-system__table p {text-align: left; font-size: 22rem; font-weight: 500;}
.active-system table.table thead th {background: #222; color: #fff;}
.table-box:nth-child(2) {margin-top: 50rem;}
@media screen and (max-width:768px) {
    .active-system {padding: 100rem 0;}
    .active-system strong {font-size: 38rem;}
    .active-system__inr > p {font-size: 17rem;}
    .active-system__inr > p br {display: none;}
}
@media screen and (max-width:620px) {
    .active-system strong {font-size: 30rem;}
    .active-system__table p {font-size: 20rem;}
}


/* 수처리/일반설비 */
.facility-list {display: grid; gap: 43rem; grid-template-columns: repeat(3,1fr);}
.facility-list__box {padding: 60rem 44rem; background: #f6f6f6; border-radius: 10rem; box-sizing: border-box;}
.facility-list__box span {display: flex; justify-content: center; align-items: center; width: 142rem; height: 42rem; margin: 0 auto; background: #fff; border-radius: 100rem; font-size: 17rem; font-weight: 500; color: #d71414;}
.facility-list__box strong {display: block; /* padding-top: 26rem; */ text-align: center; font-size: 30rem; font-weight: 600;}
.facility-list__box ul {margin-top: 38rem; padding-top: 38rem; border-top: 1rem solid #e5e5e5;}
.facility-list__box ul li {position: relative; padding-left: 48rem; font-size: 20rem; font-weight: 400; color: #666;}
.facility-list__box ul li::before {content: ''; position: absolute; top: -5rem; left: 0; width: 32rem; height: 32rem; border-radius: 100%; background: url('../images/content/ic-check.svg') no-repeat center #fff; background-size: 12rem 9rem;}
.facility-list__box ul li:nth-child(n+2) {margin-top: 33rem;}
@media screen and (max-width:1580px) {
    .facility-list {gap: 20rem;}
}
@media screen and (max-width:1300px) {
    .facility-list__box span {font-size: 15rem;}
    .facility-list__box strong {font-size: 25rem;}
    .facility-list__box ul li {padding-left: 43rem; font-size: 18rem;}
    .facility-list__box ul li::before {top: -4rem; width: 28rem; height: 28rem; background-size: 10rem 7rem;}
    .facility-list__box ul li:nth-child(n+2) {margin-top: 28rem;}
}
@media screen and (max-width:1024px) {
    .facility-list__box {padding: 40rem 22rem;}
}
@media screen and (max-width:768px) {
    .facility-list {grid-template-columns: repeat(1, 1fr);}
}

/* board-list */
.board-list ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 95rem 43rem;}
.board-list ul li .img {overflow: hidden;}
.board-list ul li span {display: block; padding-top: 10rem; text-align: center; font-size: 15rem; font-weight: 500; color: #666;}
.board-list ul li:hover .img img {transform: scale(1.1); transition: all .3s;}
.board-list ul li:hover .img {border: 2rem solid #d71414; transition: all .3s;}
.board-list .img {display: block; aspect-ratio: 249/190; border-radius: 7rem; background: #f8f8f8; border: 2rem solid #eee; transition: all .3s;}
.board-list .img img {object-fit: cover; width: 100%; height: 100%; transition: all .3s;}
.board-list p {padding-top: 35rem; text-align: center; font-size: 20rem; font-weight: 500;}
@media screen and (max-width:1300px) {
    .board-list ul {gap: 90rem 30rem;}
}
@media screen and (max-width:1024px) {
    .board-list p {font-size: 18rem;}
}
@media screen and (max-width:768px) {
    .board-list ul {grid-template-columns: repeat(2,1fr); gap: 60rem 20rem;}
}
@media screen and (max-width:540px) {
    .board-list ul {gap: 40rem 15rem;}
    .board-list p {padding-top: 20rem; font-size: 15rem;}
    .board-list ul li span {padding-top: 6rem; font-size: 14rem;}
}

/* 상세페이지 */
.product-detail__slide {overflow: hidden; width: 42%; box-sizing:border-box; border:1rem solid #ddd;}
.product-detail__top {display: flex; justify-content: space-between; align-items: center; overflow: hidden;}
.product-detail__top .detailSwiper2 {position: relative;}
.product-detail__top .detailSwiper2 .swiper-slide {width: 100% !important; aspect-ratio: 290 / 219; }
.product-detail__top .detailSwiper2 .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

.product-detail__top .detailSwiper .swiper-slide {aspect-ratio: 25/19; box-sizing: border-box; border: 1rem solid #ddd;}
.product-detail__top .detailSwiper .swiper-slide-thumb-active {border: 2rem solid #d71414;}
.product-detail__top .detailSwiper .swiper-slide img {display: block; width: 100%; height: 100%; object-fit: cover;}

.product-detail__slide-info {width: 52%; overflow: hidden;}
.product-detail__tit {margin-bottom: 70rem;}
.product-detail__tit span {display: block; font-size: 16rem; font-weight: bold; color: #d71414;}
.product-detail__tit strong {display: block; padding-top: 18rem; font-size: 33rem; color: #101010; font-weight: 600;}

.detail-control {display: flex; justify-content: space-between; align-items: center; position: absolute; bottom: 27rem; width: 100%; padding: 0 34rem; box-sizing: border-box;}
.detail-control .swiper-button-next,
.detail-control .swiper-button-prev {display: block; position: unset; color: #cecece; margin-top: 0; width: unset; height: unset;}
.detail-control .swiper-button-next:after,
.detail-control .swiper-button-prev:after {font-size: 25rem;}
.detail-control .swiper-pagination {position: unset;}
.detail-control .swiper-pagination {position: unset; width: auto; font-size: 0;}
.detail-control .swiper-pagination span {font-size: 16rem; font-weight: bold; color: #000;}
.detail-control .swiper-pagination-total {position: relative; padding-left: 14rem; margin-left: 14rem; color: #ccc !important;}
.detail-control .swiper-pagination-total::before {content: ''; position: absolute; top: 50%; left: -3rem; transform: translateY(-50%); width: 5rem; height: 5rem; border-radius: 100%; background: #e4e4e4;}

.product-detail__info {margin-top: 115rem;} 
.detail-infoBox:nth-child(2) {padding-top: 100rem;}
.detail-infoBox strong {display: block; font-size: 26rem; font-weight: 600; padding-bottom: 20rem; border-bottom: 1rem solid #101010;}
.detail-infoBox .edit-wrap {margin-top: 35rem;}
@media screen and (max-width:768px) {
    .product-detail__tit {margin-bottom: 50rem;}
    .product-detail__tit span {font-size: 14rem;}
    .product-detail__tit strong {padding-top: 12rem; font-size: 26rem;}
    .product-detail__slide {width: 44%;}
    .detail-control {bottom: 16rem;}
    .detail-control .swiper-button-next:after,
    .detail-control .swiper-button-prev:after {font-size: 17rem;}
    .detail-control .swiper-pagination span {font-size: 13rem;}
    .detail-control .swiper-pagination-total::before  {width: 3rem; height: 3rem;}
    .detail-infoBox strong {font-size: 22rem;}
}
@media screen and (max-width:620px) {
    .product-detail__top {flex-direction: column;}
    .product-detail__slide {width: 100%;}
    .product-detail__slide-info {width: 100%; margin-top: 40rem;}
    .product-detail__tit {margin-bottom: 30rem;}
    .product-detail__info {margin-top: 85rem;}

    .swiper.detailSwiper {height: 200rem;}
}

/* 진행중 현장 팝업 */
.site-popup {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); z-index: 99;}
.site-popup__box {position: absolute; top: 50%; left: 50%; width: 640rem; transform: translate(-50%, -50%); border-radius: 7rem; background: #fff;}
.site-popup__boxImg {aspect-ratio: 16/10; width: 100%; border-radius: 7rem 7rem 0 0; overflow: hidden;}
.site-popup__boxImg img {object-fit: cover; width: 100%; height: 100%; border-radius: 7rem 7rem 0 0;}
.site-popup__boxImg .swiper {position: relative;}
.site-popup__boxImg .swiper-button-next, 
.site-popup__boxImg .swiper-button-prev {color: #fff;}
.site-popup__boxImg .swiper-pagination-bullet {background: #fff;}
.site-popup__info {padding: 50rem 32rem; box-sizing: border-box;}
.site-popup__info li {display: flex; font-size: 17rem;}
.site-popup__info li em {display: flex; flex: none; align-items: center; justify-content: center; width: 91rem; height: 33rem; border-radius: 3rem; background: #101010; color: #fff; font-weight: 600;}
.site-popup__info li:nth-child(n+2) {margin-top: 14rem;}
.site-popup__info li p {padding: 6rem 0 0 20rem; font-weight: 500; color: #666;}
.site-popup__close {position: absolute; top: 0; right: -90rem; width: 62rem; height: 62rem; border-radius: 100%; border: 1rem solid rgba(255,255,255,.5);}
.site-popup__close span {position: absolute; top: 50%; left: 50%; display: block; width: 19rem; height: 3rem; background: #fff;}
.site-popup__close span:nth-child(1) {transform: translate(-50%, -50%) rotate(45deg);}
.site-popup__close span:nth-child(2) {transform: translate(-50%, -50%) rotate(-45deg);}
@media screen and (max-width:768px) {
    .site-popup__close {right: 0; top: -90rem;}
    .site-popup__box {width: 95%;}
    .site-popup__boxImg .swiper-button-next:after, 
    .site-popup__boxImg .swiper-button-prev:after {font-size: 40rem;}
}
@media screen and (max-width:540px) {
    .site-popup__info {padding: 35rem 20rem;}
    .site-popup__info li {flex-direction: column; font-size: 16rem;}
    .site-popup__info li p {padding: 10rem 0 0;}
    .site-popup__close {width: 54rem; height: 54rem; top: -70rem;}
    .site-popup__close span {width: 17rem; height: 2rem;}
}

/* 공사실적 */
.prf-list ul {display: grid; grid-template-columns: repeat(3,1fr); gap: 35rem;}
.prf-list ul li {padding: 47rem 27rem 38rem; border-radius: 8rem; border: 1rem solid #eee; box-sizing: border-box;}
.prf-list .img{display:block; aspect-ratio:16/10;}
.prf-list .img img{object-fit:cover; width:100%; height:100%;}
.prf-list .tag {display: block; padding-top:20rem; font-size: 17rem; font-weight: 600; color: #d71414;}
.prf-list .tit {display: block; padding-top: 20rem; font-size: 23rem; font-weight: 600; line-height: 1.4;}
.prf-company {display: flex; padding-top: 22rem; font-size: 17rem;}
.prf-company em {flex: none; color: #999;}
.prf-company p {position: relative; padding-left: 8rem; margin-left: 8rem;}
.prf-company p::before {content: ''; position: absolute; top: 3rem; left: 0; width: 2rem; height: 15rem; background: #e2e2e2;}
@media screen and (max-width:1300px) {
    .prf-list ul {grid-template-columns: repeat(3,1fr); gap: 22rem;}
}
@media screen and (max-width:768px) {
    .prf-list ul {grid-template-columns: repeat(2,1fr);}
    .prf-list .tit {font-size: 20rem;}
}
@media screen and (max-width:620px) {
    .prf-company {flex-direction: column;}
    .prf-company p {padding-left: 0; margin-left: 0; padding-top: 8rem;}
    .prf-company p::before {display: none;}
}
@media screen and (max-width:540px) {
    .prf-list ul {grid-template-columns: repeat(1,1fr);}
}