@charset "utf-8";


.inner {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    max-width: var(--inner);
    width:95%
}


/* font-size */
.h2 {font-size:8rem; font-weight:600}
.h3 {font-size:6rem; font-weight:600}
.h4 {font-size:4.8rem; font-weight:600}
.h5 {font-size:4rem; font-weight:600}

.en .h2 {font-size:8rem; font-weight:500}
.en .h3 {font-size:7.2rem; font-weight:500}
.en .h4 {font-size:4.8rem; font-weight:500}
.en .h5 {font-size:4rem; font-weight:500}


/* .en .h2,
.en .h3,
.en .h4,
.en .h5 {
    font-weight:500
} */


/* button */
.viewbtn {
    font-size: 1.6rem;
    display: inline-block;
    padding: 1.2rem 4rem;
    border: 1px solid var(--sec-black);
    border-radius: .4rem;
    transition: all .3s;
    line-height: 1;
}

.viewbtn.small {
    padding-left: 2.8rem;
    padding-right: 2.8rem;
}

.viewbtn:hover {
    border-color:var(--main-blue);
    color:var(--main-blue);
    background:var(--gray-bg)
}

/* icon */
.ic {display: inline-block;}
.ic::before {content: ''; display: block; width: 20px; height:20px; background-repeat: no-repeat; background-position: center; background-size: contain;}
.ic.lang::before {background-image: url(../img/common/icon-lang.svg);}
.ic.s-arrow::before {
    background-image: url(../img/common/icon-slide-arrow.svg);
}
.ic.link::before {
    background-image: url(../img/common/icon-link.svg);
}

.ic.item1::before {background-image: url(../img/sub/a2b1.svg);}
.ic.item2::before {background-image: url(../img/sub/a2b2.svg);}
.ic.item3::before {background-image: url(../img/sub/a2b3.svg);}
.ic.item4::before {background-image: url(../img/sub/a2b4.svg);}
.ic.item5::before {background-image: url(../img/sub/a2b5.svg);}
.ic.item6::before {background-image: url(../img/sub/a2b6.svg);}
.ic.item7::before {background-image: url(../img/sub/a2b7.svg);}

.ic.a3-1::before {background-image: url(../img/sub/a3-1.svg);}
.ic.a3-2::before {background-image: url(../img/sub/a3-2.svg);}
.ic.a3-3::before {background-image: url(../img/sub/a3-3.svg);}
.ic.a3-4::before {background-image: url(../img/sub/a3-4.svg);}
.ic.a3-5::before {background-image: url(../img/sub/a3-5.svg);}


.ic.punching-screen::before {
    background-image: url(../img/common/icon-punching-screen.svg);
}
.ic.wedge-screen::before {
    background-image: url(../img/common/icon-wedge-screen.svg);
}
.ic.cleaning::before {
    background-image: url(../img/common/icon-cleaning.svg);
}
.ic.sensor::before {
    background-image: url(../img/common/icon-sensor.svg);
}
.ic.multiscreen::before {
    background-image: url(../img/common/icon-multiscreen.svg);
}
.ic.mesh-screen::before {
    background-image: url(../img/common/icon-mesh-screen.svg);
}
.ic.bubble::before {
    background-image: url(../img/common/icon-bubble.svg);
}
.ic.heat::before {
    background-image: url(../img/common/icon-heat.svg);
}
.ic.vortex::before {
    background-image: url(../img/common/icon-vortex.svg);
}
.ic.jet::before {
    background-image: url(../img/common/icon-jet.svg);
}
.ic.mixing::before {
    background-image: url(../img/common/icon-mixing.svg);
}
.ic.shower::before {
    background-image: url(../img/common/icon-shower.svg);
}
.ic.uv::before {
    background-image: url(../img/common/icon-uv.svg);
}
.ic.exchange::before {
    background-image: url(../img/common/icon-exchange.svg);
}

.ic.arrow::before {
    background-image: url(../img/common/ic-arrow.svg)
}


.grain-bg {
    position: fixed;;
    z-index: 3;
    background-image: url(../img/common/bg.png);
    background-position: 0 0;
    background-size: 500px;
    display: block;
    inset: 0%;
    pointer-events:none
}

body:has(.main) .header:not(.active)  {color:#fff}
body:has(.main) .header:not(.active) .logo {filter : grayscale(10) brightness(20)}
body:has(.main) .header:not(.active) .h-inset .snb .snb-lang > a {background: #fff; color:#333;}
body:has(.main) .header:not(.active) .ic.lang::before {filter: none;}


.header {
    z-index: 100;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%; 
    box-sizing: border-box;
    z-index: 10;
}
.header .h-inset {
    height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 160rem;
    margin: 0 auto;
    width: 95%;
}

.header .h-inset::before {
    content:'';
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    position:absolute;
    inset:0%;
    width:100%;
    z-index:-1;
    transition: height.3s, background-color .3s;
    opacity: 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
}

.header .h-inset .logo {
    aspect-ratio: 1/ 0.33;
    width: 100%;
    max-width: 12rem;
}
.header .h-inset .logo > a {
    display: block;
    /* max-width: 12rem; */
    width: 100%;
    transition: all .2s;
    background: url(../img/common/logo-color.svg) no-repeat center/cover;
    /* aspect-ratio: 0.4/1; */
    height: 100%;
}
.header .h-inset .logo.change > a {
    background: url(../img/common/kom-bi.svg) no-repeat center/contain;
}


.header .h-inset .nav {
    display: flex;
}
.header .h-inset .nav .toggle-m {
    display: none;
}
.header .h-inset .nav .gnb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    align-items: center;
    top: 0;
    display: flex;
    align-items: center;
    z-index: 1;
    transition: all .3s;
}
.header .h-inset .nav .gnb .gnb-list {
    display: flex;
    font-size: 1.6rem;
    height: 100%;
    align-items: center;
}
.header .h-inset .nav .gnb .gnb-list > li {
    height: 100%;
    padding: 0 4rem;
    position: relative;
    align-items: center;
    display: flex;
    transition: padding.3s;
}

.header .h-inset .nav .gnb .gnb-list > li::before {
    content:'';
    background: #505864;
    width: 100%;
    position: absolute;
    top: 0;
    height: 0;
    left: 0;
    z-index: -1;
    opacity:0
}

.header .h-inset .nav .gnb .gnb-list > li > a {
    font-weight: 500;
    white-space: nowrap;
}
.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap {
    opacity:0;
    position: absolute;
    bottom: -10px;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 100%;
    padding: 20px 0;
    visibility: hidden;
    transition: opacity .3s ease .25s;
}
.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list {}
.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li {
    padding-left: 3.2rem;
}

.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li + li {
    margin-top:1.2rem
}

.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li .dp2 {
    font-weight: 300;
    font-size:15px;
    position: relative;
}
.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li .dp2::after {
    content:'';
    width: 0;
    height:1px;
    background:#fff;
    position: absolute;
    bottom: -4px;
    transition: width 0.3s;
    left: 0;
    transform: translate(0, 100%);
}


.header .h-inset .snb {}
.header .h-inset .snb .snb-lang {}
.header .h-inset .snb .snb-lang > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 20px 8px 16px;
    background: #333;
    border-radius: 50px;
    color: #fff;
    transition: all .3s
}
.header .ic.lang::before {
    filter:brightness(10)
}
.header .h-inset .snb .snb-lang > a > p {
    font-size: 1.4rem;
    font-weight: 500;
}

.en.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li {
    padding-right:1.6rem
}



/* 스크롤내릴때 */
.header.active .h-inset::before {
    opacity:1;
    background-color : #ffffff60
}
.header.active .logo img {filter:none}
.header.active .h-inset .nav .gnb .gnb-list > li > a {
    color: #333;
    transition: color .3s;
}

.header.active .h-inset .snb .snb-lang > a {
    background: #333;
    color:#fff;
}

.header.active .ic.lang::before {
    filter:brightness(20)
}


/* nav-open */
.header.nav-open .h-inset::before {
    padding-bottom:350px;
    opacity:1;
    background: rgba(0,0,0,.4);
    transition: height.3s, background-color .3s;
}
.en.header.nav-open .h-inset::before {
    padding-bottom:380px
}

.header.nav-open .logo img {
    filter:grayscale(10) brightness(20)
}
.header.nav-open .h-inset .nav .gnb .gnb-list > li > a {
    color: #fff;
}

.header.nav-open .h-inset .nav .gnb .gnb-list > li .dp2-wrap {
    opacity:1;
    visibility: visible;
}
.header.nav-open .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li .dp2 {
    color: #fff;
}
.header.nav-open .h-inset .nav .gnb .gnb-list > li {
    padding:0 6.4rem
}
.header.nav-open .h-inset .nav .gnb .gnb-list > li::before {
    transition: height  ease-in-out.5s, opacity ease-in-out .5s;
    height: 350px;
}
.en.header.nav-open .h-inset .nav .gnb .gnb-list > li::before {
    height: 380px;
}



/* hover */

.header.nav-open .h-inset .nav .gnb .gnb-list > li:hover::before {
    opacity:1
}




/* footer */
.footer {
    border-top: 1px solid var(--border);
    padding: 5rem 0;
}
.footer .inner {
    display: flex;
    /* align-items: center; */
    gap: 4rem;
}
.footer .inner .info-sec {
    display: flex;
    /* align-items: flex-end; */
    /* justify-content: space-between; */
    width: 100%;
    flex-direction: column;
    gap: 2rem;
}
.footer .inner .logo {
    filter: grayscale(1) brightness(2.5);
    flex:none
}
.footer .inner .info-sec .info-wrap {
    font-size: 1.4rem;
    color: var(--sec-black);
}
.footer .inner .info-sec .info-wrap .top {}
.footer .inner .info-sec .info-wrap .top span {}
.footer .inner .info-sec .info-wrap .top span + span {
    margin-left:2rem
}
.footer .inner .info-sec .info-wrap p + p {}
.footer .inner .info-sec .info-wrap .address {}
.footer .inner .copyright {
    font-size: 1.4rem;
    color: #8b8b8b;
}
.footer .inner .copyright a {
    display:inline-block
}
.footer .inner .btn-sec {}
.footer .inner .btn-sec > a {
    font-size: 1.4rem;
    color: var(--sec-black);
    font-weight: 500;
}

.footer .family-site-wrapper {
    flex: none;
    position: relative;
}
.footer .family-site-wrapper .family-site-button {
    display: block;
    padding: 1.2rem 2.4rem;
    width: 16rem;
    position: relative;
    border: 1px solid var(--sec-black);
    border-radius: .4rem;
    transition: all .3s;
    line-height: 1.15;
    cursor: pointer;
}
.footer .family-site-wrapper .family-site-button .family-site {
    /* position: relative; */
}
.footer .family-site-wrapper .family-site-button .family-site .upper {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 1.4rem;
    justify-content: space-between;
}
.footer .family-site-wrapper .family-site-button .family-site .upper .ic::before {background: url(../img/common/icon-arrow-down.svg) no-repeat center/cover;transform: rotate(180deg);}
.footer .family-site-wrapper .family-site-button .family-site .family-site-list {
    display: none;
    position: absolute;
    bottom: 102%;
    left: 0;
    padding: 1.6rem 2.4rem;
    width: 100%;
    background: var(--main-blue);
    color: #fff;
    /* box-shadow: 1px 1px 10px  rgba(0,0,0,.1); */
    border-radius: .4rem;
}
.footer .family-site-wrapper .family-site-button .family-site .family-site-list > li {}
.footer .family-site-wrapper .family-site-button .family-site .family-site-list > li > a {
    font-size: 1.4rem;
}




body:has(.sub-nav-wrap) {
    padding-top:24rem
}

/* sub-nav */
.sub-nav-wrap {}
.sub-nav-wrap .inner {}
.sub-nav-wrap .inner .sub-page-tit {
    overflow: hidden;
}
.sub-nav-wrap .inner .sub-page-tit > span {
    display:block;
}
.sub-nav-wrap .tab-wrap {
    border-bottom: 1px solid var(--border);
    padding-top: 8rem;
    padding-bottom: 2.8rem;
}
.sub-nav-wrap .tab-wrap .tablist {
    display: flex;
    align-items: center;
    gap: 4rem;
    font-size: 2.4rem;
    font-weight: 500;
}
.sub-nav-wrap .tab-wrap .tablist > li {}
.sub-nav-wrap .tab-wrap .tablist > li > a {
    display: block;
    opacity:.4
}
.sub-nav-wrap .tab-wrap .tablist > li.on > a {
    opacity:1;
    font-weight:600
}

body:has(.rnd) .sub-nav-wrap .tab-wrap {
    border-bottom:none
}

.sub-nav-wrap .sub-page-tit + .page-desc {
    font-size: 1.8rem;
    color: var(--sec-black);
    margin-top: 6rem;
    line-height: 1.5;
}




/* /////////////// en /////////////// */
.header.en .h-inset .nav .gnb .gnb-list > li > a,
.sub-nav-wrap.en .inner .sub-page-tit > span {
    text-transform: uppercase;
}
.en.sub-nav-wrap .inner .sub-page-tit {
    font-weight:500;
    /* font-size:7.2rem */
}
.en.header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li .dp2 {
    font-weight: 300;
    font-family: 'Pretendard';
}

.en.sub-nav-wrap .tab-wrap .tablist > li > a {
    font-size:2.2rem;
    font-weight:400;
    letter-spacing:0.2px
}
.en.sub-nav-wrap .tab-wrap .tablist > li.on > a {
    font-weight:500
}


/* admin login */

.login-container {
    background: #f1f1f1;
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login-container .logo {
    max-width: 140px;
    margin: auto
}
.login-container .logo img {
    width:100%
}
.login-container .mbskin {
    margin: 0;
    max-width: 500px;
    width: 100%;
}
.login-container .mbskin_box {
    border: none;
    border-radius: 16px;
    margin-top: 28px;
}
.login-container #login_fs {
    display: flex;
    padding: 48px 40px;
    gap: 20px;
    height: 100%;
}
.login-container #login_fs .inputset {
    flex-shrink: 0;
}
.login-container #login_fs .inputset .input-group {
    margin: 0;
    flex-wrap: nowrap;
    display: flex;
    align-items: center;
}
.login-container #login_fs .inputset .input-group + .input-group {
    margin-top: 6px;
}
.login-container #login_fs .inputset .input-group label {
    min-width: 76px;
    text-align: left;
    font-size: 16px;
}
.login-container #mb_login #login_fs .frm_input {
    margin: 0;
    font-size: 15px;
    font-family: 'Pretendard';
    padding: 8px 12px;
    box-shadow: none;
    -webkit-box-shadow: none;
    border-radius: 6px;
    height: 44px;
    border-color: #e6e6e6;
}
.login-container #login_fs .button-wr {
    width: 100%;
    background: var(--main-blue);
    border-radius: 8px;
}
.login-container #mb_login #login_fs .btn_submit {
    margin: 0;
    background: none;
    font-size: 16px;
    font-weight: 600;
    height: 100%;
}



@media (max-width:1440px) {
    .h2 {font-size:7.2rem;}
    .h3 {font-size:5.2rem;}
    .h4 {font-size:4rem;}
    .h5 {font-size:3.2rem;}
}

@media (max-width: 1200px)/* , (hover: none) and (pointer: coarse) */ {

    .h2 {font-size:6rem;}
    .h3 {font-size:4rem;}
    .h4 {font-size:2.8rem;}
    .h5 {font-size:2.2rem;}


    body:has(.main) .header:not(.active) .h-inset .nav .toggle-m {
        filter:none
    }
    .header .h-inset .nav .toggle-m {
        display:block;
        width: 32px;
        height: 32px;
        background:url('../img/common/ic-menu.svg')no-repeat center/cover;
        filter: brightness(0.1);
    }
    /* .sub .header .h-inset .nav .toggle-m {
        filter: brightness(0.1);
    } */
    .header.mo-nav-open .h-inset .nav .toggle-m {
        z-index:10;
        background: url('../img/common/icon-close.svg') no-repeat center/cover;
    }
    /* .header.active .h-inset .nav .toggle-m {
        filter: brightness(0.1);
    } */

    .header .h-inset .nav .gnb {
        /* display:none; */
        left: 0;
        transform: translate(100%,0);
        right: 0;
        bottom: 0;
        width: 100%;
        min-height: 100vh;
        overflow-y: scroll;
        display: block;
        padding: 0 2rem;
        padding-top: 8rem;
    }
    .header .h-inset .nav .gnb .gnb-list {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        width: 100%;
    }
    .header .h-inset .nav {
        flex-direction: row-reverse;
        gap: 2rem;
    }

    .header.active .h-inset .nav .toggle-m {
        filter:brightness(0.1)
    }
    .header.mo-nav-open .h-inset .nav .toggle-m {
        filter:none
    }

    .viewbtn {
        font-size:14px
    }

    .header.mo-nav-open .h-inset .nav .gnb {
        left: -100%;
        background: rgba(0,0,0,0.6);
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
    }

    .header .h-inset .nav .gnb .gnb-list > li {
        flex-direction:column;
        align-items: flex-start;
        padding: 0;
        height: auto;

        width: 100%;
    }
    .header .h-inset .nav .gnb .gnb-list > li .dp2-wrap {
        position:static;
        transform: translate(0,0);
        display: none;
        visibility: visible;
        opacity: 1;
        padding: 2rem 0;

        padding-left: 1.5rem;
    }
    html:has(.mo-nav-open) {
        overflow: hidden;
    }
    .header .h-inset .nav .gnb .gnb-list > li > a {
        pointer-events:none;
        padding: 1.4rem 0;
        width: 100%;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li {
        padding:0
    }
    .header .h-inset .nav .gnb .gnb-list > li .dp2-wrap .dp2-list li .dp2 {
        font-size:14px;
        color: #fff;
    }

    .header .h-inset .nav .gnb .gnb-list > li > a::after {
        content:'';
        display: block;
        width: 24px;
        height: 24px;
        background: url(../img/common/icon-arrow-down.svg) no-repeat center/cover;
        filter: brightness(20);
        transition: transform .2s
    }
    .header .h-inset .nav .gnb .gnb-list > li.on > a::after {
        transform:rotate(180deg);
    }
    .header.mo-nav-open .h-inset .nav .gnb .gnb-list > li > a {
        color:#fff
    }
}

@media (max-width: 904px) {
    .viewbtn {
        padding:1rem 2.8rem
    }

    .h2 {font-size:4.8rem;}
    .h3 {font-size:3.6rem;}
    .h4 {font-size:2.4rem;}
    .h5 {font-size:2rem;} 

    .en .h2 {font-size:5.4rem;}
    .en .h3 {font-size:4.8rem;}
    .en .h4 {font-size:3.2rem;}
    .en .h5 {font-size:2.4rem;} 


    .header .h-inset .logo {
        max-width:9rem
    }
    .header .h-inset {
        height: 64px;
    }
    .header .h-inset .snb .snb-lang > a > p {
        font-size:13px
    }
    .ic.lang::before {
        width: 16px;
        height:16px;
    }
    .header .h-inset .snb .snb-lang > a {
        padding: 6px 16px 6px 14px;
    }
    .footer {
        padding: 4rem 0;
    }

    .footer .inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer .inner .logo {
        max-width:9rem;
        width:100%
    }

    body:has(.sub-nav-wrap) {
        padding-top:15rem
    }
    .sub-nav-wrap .tab-wrap {
        padding-top:6rem
    }

    

}


@media (max-width:599px) {

    .h2 {font-size:4rem;}
    .h3 {font-size:3.2rem;}
    .h4 {font-size:2rem;}
    .h5 {font-size:1.8rem;} 

    .en .h2 {font-size:5rem;}
    .en .h3 {font-size:4.8rem;}
    .en .h4 {font-size:2.6rem;}
    .en .h5 {font-size:2.2rem;} 

    .header .h-inset .nav .toggle-m {
        width:28px;
        height:28px
    }
    .header .h-inset .nav {
        gap:12px;
        /* gap: 0; */
        /* justify-content: space-between; */
        /* width: 100%; */
    }
    /* .header .h-inset .snb .snb-lang > a {
        padding :5px 12px 5px 10px
    } */
    .header .h-inset .snb .snb-lang > a > p {
        font-size:12px
    }

    .header .h-inset .logo {
        width:8rem;
    }

    .viewbtn {
        font-size:12px;
        padding: 1rem 2.4rem;
        line-height: 1;
    }

    .header .h-inset .snb {
        opacity: 0;
    }
    .header.mo-nav-open .h-inset .snb {
        z-index: 10;
        transition: all .2s .1s;
        opacity: 1;
    }

    .footer .inner {
        gap:3rem
    }

    .footer .inner .info-sec {
        /* flex-direction: column-reverse; */
        align-items: flex-start;
        gap: 1rem;
    }

    .footer .inner .info-sec .info-wrap,
    .footer .inner .btn-sec > a,
    .footer .inner .copyright,
    .footer .family-site-wrapper .family-site-button .family-site .upper,
    .footer .family-site-wrapper .family-site-button .family-site .family-site-list > li > a {
        font-size:1.2rem
    }

    .footer .family-site-wrapper .family-site-button {
        
        padding: 1rem 2rem;
        width: 14rem;
    }

    .en .viewbtn {
        font-size:1.4rem
    }

    .en.footer .inner .info-sec .info-wrap, 
    .en.footer .inner .btn-sec > a {
        font-size:1.6rem
    }
    .en.footer .inner .info-sec .info-wrap .copyright {
        margin-top:10px;
        font-size:14px
    }
    .en.sub-nav-wrap .tab-wrap .tablist > li > a {
        font-size:2rem
    }
}