/* ============================================================ 서브 공통 시작 ============================================================ */
.sub-block{}
/* 서브 비주얼 헤더 */
.sub__head{background-position: center; background-repeat: no-repeat; background-size: cover;}
.sub__head.about{background-image: url('../img/sub/visual/sub1_04_visual.png');}
.sub__head.commercial{background-image: url('../img/sub/visual/sub2_visual.png');}
.sub__head.eco{background-image: url('../img/sub/visual/sub3_visual .png');}
.sub__head.installation{background-image: url('../img/sub/visual/sub4_visual.png');}
.sub__head.costomerCenter{background-image: url('../img/sub/visual/sub5_05_visual.png');}
.sub__head.mediaCenter{background-image: url('../img/sub/visual/sub6_06_visual.png');}
.sub__head .inner{min-height: 320px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.sub__head span{font-size: 20px; font-weight: 300; line-height: 1.2;text-align: center; color: #fff;}
.sub__head h2{font-family: var(--font-esamanruLight); font-size: 50px; line-height: 1.2; letter-spacing: -1.25px; text-align: center; color: #fff;}

/* 서브 탭메뉴 */
.sub__tab-menu{width: 100%; border-bottom: solid 1px #ddd;}
.sub__tab-menu .inner{width: 100%;}
.sub__tab-menu ul{display: flex; justify-content: center;}
.sub__tab-menu ul li{display: flex; justify-content: center; padding: 0 10px; position: relative;}
.sub__tab-menu ul li a{display: inline-block; padding: 20px 0 18px; font-size: 16px; line-height: 1.2; text-align: center; color: #444;}
.sub__tab-menu.cols-1 ul li{width: 100%; max-width: 194px;}
.sub__tab-menu.cols-2 ul li{width: 50%; max-width: 194px;}
.sub__tab-menu.cols-3 ul li{width: 33.3%; max-width: 194px;}
.sub__tab-menu.cols-4 ul li{width: 25%; max-width: 194px;}
.sub__tab-menu.cols-5 ul li{width: 20%; max-width: 194px;}
.sub__tab-menu ul li.active::after{content: ""; position: absolute; bottom: 0; display: block; width: 100%; height: 2px; background-color: var(--sub-color);}
.sub__tab-menu ul li.active a{color: var(--sub-color); font-weight: bold;}


/* 서브 컨텐츠 */
.sub__contents{}
.sub-tit-block{display: grid; grid-template-columns: minmax(35.33%, auto) 1fr; column-gap: 11.66%;}
.sub-tit-block .con b{font-size: 22px; font-weight: 600; line-height: 1.36; text-align: left; color: #000;}
.sub-tit{display: inline-block; padding-top: 10px; padding-right: 10px; position: relative;
    font-family: var(--font-esamanruLight); font-size: 40px; font-weight: 500; line-height: 1.19; letter-spacing: -0.9px; color: #000;}
.sub-tit::after{content: ""; position: absolute; top: 0; right: 0; display: block; width: 10px; height: 10px; border-radius: 50%; background-color: var(--sub-color);}
.part-tit{font-size: 25px; font-weight: bold; line-height: 1.2; letter-spacing: -0.63px; text-align: left; color: #444;}

/* 리스트 스타일 */
.lists--num{}
.lists--num .list{display: flex; align-items: flex-start;}
.lists--num .list .num{width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 900; line-height: 1; letter-spacing: -0.45px; text-align: center; color: #fff;}
.lists--num .list .con{width: calc(100% - 50px - 10px); margin-left: 10px; padding: 15px 20px; border-radius: 10px; border: solid 1px #ccc; box-sizing: border-box;}
.lists--num .list .con .lists--num__title{display: inline-block; font-size: 18px; font-weight: 500; line-height: 1.34; letter-spacing: -0.45px; text-align: left; color: #000;}
.lists--num .list .con p{font-size: 16px; line-height: 1.34; letter-spacing: -0.4px; text-align: left; color: #666;}
.lists--num.blue .num{background-color: var(--sub-color);}
.lists--num.green .num{background-color: var(--main-color);}

.list--dots{}
.list--dots li{display: flex; align-items: flex-start;}
.list--dots li .dot{display: block; width: 3px; height: 3px; margin-right: 5px; margin-top: 8px; border-radius: 50%; background-color: #666;}

.lists--star{}
.lists--star li{display: flex; align-items: flex-start;}
.lists--star li .star{display: block; margin-top: 5px; font-size: 16px; color: #444;}
.lists--star li p{margin-left: 5px;}
.lists--star li + li{margin-top: 10px;}
/* ============================================================ 서브 공통 끝 ============================================================ */



/* 인사말 */
#intro-block{}
#intro-block .prd-bg{position: relative; height: 79.08vw; max-height: 1000px; background: url('../img/sub/sub_01_bg') no-repeat center/cover;}
#intro-block .prd-img{position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%);}
#intro-block .prd-bg .pc{display: block;}
#intro-block .prd-bg .mo{display: none;}
#intro-block .intro__factory{}
#intro-block .intro__factory .intro__factory__tit{display: flex; flex-direction: column; align-items: center;}
#intro-block .intro__factory .intro__factory__tit .sub-tit,
#intro-block .intro__factory .intro__factory__tit p{text-align: center;}
#intro-block .intro__factory .imgs{display: flex; flex-wrap: wrap;}
#intro-block .intro__factory .imgs img{max-width: 390px; width: 32.5%; margin-right: 1.25%; margin-top: 15px;}
#intro-block .intro__factory .imgs img:nth-child(3n){margin-right: 0;}
#intro-block .intro__factory .imgs img:last-child{margin-right: 0;}


/* 인증서 및 특허 */
#certification-block{}
#certification-block .certi__tit{grid-template-columns: minmax(30%, auto) 1fr;}
#certification-block .certi__con{background-color: #fbfbfb;}
#certification-block .part{}
#certification-block .certis{display: flex; flex-wrap: wrap; padding-left: 15px; box-sizing: border-box;}
#certification-block .certis figure{width: 23.33%; margin: 0; margin-right: 1.41%; margin-top: 40px;}
#certification-block .certis figure:nth-child(4n){margin-right: 0;}
#certification-block .certis figure figcaption{padding-left: 8px; position: relative; font-size: 16px; line-height: 1.19; text-align: left; color: #444;}
#certification-block .certis figure figcaption::before{content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: block; width: 1px; height: 15px; background-color: #444;}
#certification-block .certis figure img{width: 100%; margin-top: 7px;}


 /* 오시는 길 */
.direction-block{}
.direction-block .map{}
.direction-block .map .root_daum_roughmap{width: 100% !important;}
.direction-block .map-info{}
.direction-block .map-info .tit{border-bottom: 1px solid #707070;}
.direction-block .map-info .con{display: flex; align-items: flex-start; flex-wrap: wrap;}
.direction-block .map-info .con ul{width: 50%;}
.direction-block .map-info .con ul li{display: flex; align-items: flex-start;}
.direction-block .map-info .con ul li + li{margin-top: 20px;}
.direction-block .map-info .con .box{padding-right: 25px; box-sizing: border-box;}
.direction-block .map-info .con .box strong{font-size: 24px; text-align: left; color: var(--main-color);}
.direction-block .map-info .con .box strong.tel{font-family: var(--font-esamanruMedium);}
.direction-block .map-info .con .box strong.ko{}
.direction-block .map-info .con .box table{width: 100%; border-collapse: collapse;}
.direction-block .map-info .con .box table .tt{width: 60px;}
.direction-block .map-info .con .box table .tc{padding: 0 20px;}
.direction-block .map-info .con .public-transport{}
.direction-block .map-info .con .public-transport .transport{display: flex;}
.direction-block .map-info .con .public-transport .transport + .transport{margin-top: 15px;}
.direction-block .map-info .con .public-transport .transport .txt{display: flex; flex-direction: column; margin-left: 5px;}


/* 업소용 초음파세척기 */
#commercial-block{}
#commercial-block .inner{display: flex; align-items: flex-start; border-bottom: 1px solid#bbb;}
#commercial-block .prds-img{width: 50%;}
#commercial-block .prds-img img{width: 100%;}
#commercial-block .prds-txt{width: calc(100% - 50%); padding: 16px 0 0 40px; box-sizing: border-box;}
#commercial-block .prds-txt strong{display: inline-block; font-family: var(--font-GmarketSansMedium); font-size: 70px; font-weight: bold; line-height: 1.16; letter-spacing: -1.75px; text-align: left; color: var(--sub-color);}
#commercial-block .prds-txt p{font-family: var(--font-GmarketSansMedium); font-size: 46px; font-weight: 500; line-height: 1.15; letter-spacing: -1.15px; text-align: left; color: var(--main-color);}
#commercial-block .prds-txt .goBtn{display: flex; align-items: center; width: 167px; height: 45px; padding: 12px 20px; border-radius: 26px; border: solid 2px var(--sub-color); background-color: #fff;}
#commercial-block .prds-txt .goBtn img{margin-left: 4px; width: 21px;}
#commercial-block.commercial02 .inner{align-items: center;}
#commercial-block.commercial03 .inner{align-items: center;}


/* 친환경 제품 */
.eco_prds {text-align:center;}
.eco_prds .eco_prds__tit {border-bottom: 1px solid #bbb;}
.eco_prds .eco_prds__tit p {text-align:center;}
.eco_prds .eco_prds__tit .sub-tit::after {display:none;}
.eco_prds .cols-2 {display:flex;}
.eco_prds .cols-2 div {max-width: 580px; width: 48.34%; margin-right: 3.33%;}
.eco_prds .cols-2 div:last-child {margin-right:0px;}
.eco_prds .cols-2 div img {width:100%; }



/* 상담 진행 절차 */
#iqProcess-block{}
#iqProcess-block .iqProcess__tit{align-items: end; grid-template-columns: minmax(57.5%, auto) 1fr; border-bottom: solid 1px #bbb;}
#iqProcess-block .iqProcess__tit .sub-tit::after{display: none !important}
#iqProcess-block .iqProcess__tit .con{display: flex; justify-content: flex-end;}
#iqProcess-block .iqProcess__con{}
#iqProcess-block .iqProcess__con ul{width: 100%;}
#iqProcess-block .iqProcess__con ul li{display: flex; padding: 18px 0; border-bottom: 1px solid #bbb;}
#iqProcess-block .iqProcess__con ul li .img{width: 57.33%; max-width: 688px;}
#iqProcess-block .iqProcess__con ul li .img img{width: 100%;}
#iqProcess-block .iqProcess__con ul li .txt{width: calc(100% - 57.33%); padding: 77px 40px 0; box-sizing: border-box;}
#iqProcess-block .iqProcess__con ul li .txt .num{font-family: var(--font-GmarketSansMedium); font-size: 30px; font-weight: bold; letter-spacing: -0.75px; color: var(--sub-color);}
#iqProcess-block .iqProcess__con ul li .txt p{margin-top: 5px; font-family: var(--font-GmarketSansMedium); font-size: 35px; font-weight: 500; line-height: 1.31; letter-spacing: -0.88px; text-align: left; color: #444;}
#iqProcess-block .iqProcess__con ul li .txt span{display: inline-block; margin-top: 10px; font-size: 20px; line-height: 1.25; text-align: left; color: #444;}


/* A/S 안내 */
#as-block{}
#as-block .as__tit{grid-template-columns: minmax(13.83%, auto) 1fr minmax(10.5%, auto);}
#as-block .as__tit .plus img{width: 100%;}
#as-block .as__detail{position: relative;}
#as-block .as__detail::after{content: ""; position: absolute; bottom: 0; z-index: -1; display: block; width: 100%; height: 556px; background-color: #f6f6f6;}
#as-block .as__detail ul{width: 100%; display: flex; flex-wrap: wrap; padding: 47px 0; border-radius: 20px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.05); background-color: #fff;}
#as-block .as__detail ul li{width: 25%; padding: 0 40px; border-right: 1px solid #bbb; box-sizing: border-box;}
#as-block .as__detail ul li:last-child{border-right: 0;}
#as-block .as__detail ul li p{text-align: center;}
#as-block .as__detail ul li p + p{margin-top: 5px;}
#as-block .as__detail .as__detail__tel{text-align: center;}
#as-block .as__detail .as__detail__tel b{font-size: 30px; line-height: 1.18; letter-spacing: -0.83px; color: #666;}
#as-block .as__detail .as__detail__tel strong{font-size: 32px; }

/* 홍보영상 */
#media_main {}
#media_main .media_header {width: 100%; height: 520px; background-image: url('../img/sub/bg_media.png'); background-size: cover; background-position: center; background-repeat: no-repeat}
#media_main .media_content .media_view {width: 100%; background-color: #0c3677; border-radius: 60px; box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.2); padding: 50px 0px 70px; box-sizing: border-box;}
#media_main .media_content .media_view .media_view_title {text-align: center; font-size: 40px; letter-spacing: -2px; color: #fff;}
#media_main .media_content .media_view .media_view_title span {color: var(--main-color); font-weight: bold;}
#media_main .media_content .media_view .media_list {display: flex; justify-content: space-between; padding: 0px 50px; box-sizing: border-box; margin-top: 30px;}
#media_main .media_content .media_view .media_list > li {padding: 50px 40px 60px; box-sizing: border-box; background-color: #fff; width: 49%; position: relative; border-radius: 30px; box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); text-align: center}
#media_main .media_content .media_view .media_list > li .media_list_title {font-size: 40px; margin-bottom: 10px; letter-spacing: -1px; font-family: var(--font-esamanruMedium)}
#media_main .media_content .media_view .media_list > li .media_list_desc {font-size: 18px; margin-bottom: 24px; letter-spacing: -0.45px; }
#media_main .media_content .media_view .media_list > li .media_list_video {display: flex; justify-content: space-between; flex-wrap: wrap}
#media_main .media_content .media_view .media_list > li .media_list_video > li {width: 150px; height: 150px; margin-bottom: 5px;}
#media_main .media_content .media_view .media_list > li .media_list_more {display: inline-block; width: 340px; height: 60px; line-height: 60px; margin-top: 40px; border-radius: 30px; background-color: #000; color: #fff; text-align: center; font-size: 20px; letter-spacing: -0.5px; font-family: var(--font-esamanruLight);}
#media_main .media_content .media_view .media_list > li .media_list_more img {margin-left: 10px;}



@media (max-width:1024px) {
    /* ============================= 서브 공통 시작 ============================= */
    .sub-tit-block{display: flex; flex-direction: column;}
    .sub-tit-block .con{margin-top: 20px;}
    /* ============================= 서브 공통 끝 ============================= */

    /* ============================= 회사소개 시작 ============================= */
    #certification-block .certis{padding-left: 0;}

    .direction-block .map-info .con ul{width: 100%;}
    .direction-block .map-info .con ul + ul{margin-top: 20px;}
    .direction-block .map-info .con .box{padding-right: 0;}
    .direction-block .map-info .con .box:first-child{width: 125px;}
    .direction-block .map-info .con .box:last-child{width: calc(100% - 125px);}
    /* ============================= 회사소개 끝 ============================= */

    /* 업소용 초음파세척기 */
    #commercial-block .inner{flex-direction: column;}
    #commercial-block .prds-img{width: 100%; text-align: center;}
    #commercial-block .prds-img img{width: 100%; max-width: 600px;}
    #commercial-block .prds-txt{width: 100%; padding: 16px 0; display: flex; flex-direction: column; align-items: center;}
    #commercial-block .prds-txt strong{text-align: center;}
    #commercial-block .prds-txt p{text-align: center;}

    /* ============================= 고객센터 시작 ============================= */
    #iqProcess-block .iqProcess__tit{align-items: initial;}
    #iqProcess-block .iqProcess__tit .con{justify-content: flex-start;}
    #iqProcess-block .iqProcess__con ul li{flex-direction: column;}
    #iqProcess-block .iqProcess__con ul li .img{width: 100%;}
    #iqProcess-block .iqProcess__con ul li .txt{width: 100%; padding: 50px 0 35px;}

    #as-block .as__tit{display: grid; grid-template-columns:1fr minmax(10.5%, auto); grid-template-rows: 60px 1fr; column-gap:2%}
    #as-block .as__tit .subject{grid-column: span 2;}
    #as-block .as__tit .plus{display: flex; align-items: flex-end;}
    /* ============================= 고객센터 끝 ============================= */
}

@media (max-width:769px) {
    /* ============================= 서브 공통 시작 ============================= */
    .sub__head .inner{min-height: initial; padding: 80px 0;}
    .sub__head h2{font-size: 32px;}

    .sub-tit{font-size: 28px;}
    .sub-tit-block .con b{font-size: 20px;}
    .part-tit{font-size: 24px;}
    /* ============================= 서브 공통 끝 ============================= */

    /* ============================= 회사소개 시작 ============================= */
    #certification-block .certis figure{width: 32.39%;}
    #certification-block .certis figure:nth-child(4n){margin-right: 1.41%;}
    #certification-block .certis figure:nth-child(3n){margin-right: 0;}

    .direction-block .map .root_daum_roughmap .wrap_map{height: 450px !important;}
    /* ============================= 회사소개 끝 ============================= */

    /* 업소용 초음파세척기 */
    #commercial-block .inner{border-bottom: 0; padding-bottom: 0;}
    #commercial-block .prds-img img{max-width: 450px;}
    #commercial-block .prds-txt strong{font-size: 36px;}
    #commercial-block .prds-txt p{font-size: 20px;}

    /* ============================= 고객센터 시작 ============================= */
    #iqProcess-block .iqProcess__con ul li .txt .num{font-size: 28px;}
    #iqProcess-block .iqProcess__con ul li .txt p{font-size: 28px;}

    #as-block .as__detail::after{height: 78%;}
    #as-block .as__detail ul li{width: 50%;}
    #as-block .as__detail ul li:nth-child(2){border-right: 0;}
    #as-block .as__detail ul li:nth-child(3){margin-top: 30px;}
    #as-block .as__detail ul li:nth-child(4){margin-top: 30px;}
    #as-block .as__detail .as__detail__tel b{font-size: 28px;}
    #as-block .as__detail .as__detail__tel strong{font-size: 32px;}
    /* ============================= 고객센터 끝 ============================= */

    /* Media */
    #media_main .media_content .media_view .media_view_title {font-size: 32px;}
    #media_main .media_content .media_view .media_list {flex-wrap: wrap;}
    #media_main .media_content .media_view .media_list > li .media_list_title {font-size: 32px;}
    #media_main .media_content .media_view .media_list > li {width: 100%; margin-right: 0; margin-bottom: 10px;}
    #media_main .media_content .media_view .media_list > li .media_list_more {width: 100%; font-size: 18px;}

}

@media (max-width:500px) {
    /* ============================= 서브 공통 시작 ============================= */
    .sub__head .inner{padding: 60px 0;}
    .sub__head span{font-size: 14px;}
    .sub__head h2{margin-top: 5px; font-size: 28px;}

    .sub-tit{padding-top: 7px; padding-right: 8px; font-size: 24px;}
    .sub-tit::after{width: 6px; height: 6px;}
    .sub-tit-block .con b{font-size: 16px;}
    .part-tit{font-size: 20px;}
    
    .sub__tab-menu ul li a{display: inline-flex; align-items: center; padding: 15px 0; font-size: 14px; word-break: keep-all;}

    .lists--num .list .num{width: 40px; height: 40px; font-size: 16px;}
    .lists--num .list .con{width: calc(100% - 40px - 10px);}
    .lists--num .list .con .lists--num__title{font-size: 16px;}
    .lists--num .list .con p{font-size: 14px;}
    /* ============================= 서브 공통 끝 ============================= */

    /* ============================= 회사소개 시작 ============================= */
    #intro-block .intro__factory .imgs img{width: 49.37%;}
    #intro-block .intro__factory .imgs img:nth-child(3n){margin-right: 1.25%;}
    #intro-block .intro__factory .imgs img:nth-child(2n){margin-right: 0;}
    #intro-block .prd-bg{height: initial; max-height: initial; padding: 0; background: none;}
    #intro-block .prd-bg .pc{display: none;}
    #intro-block .prd-bg .mo{display: block; position: static; transform: initial;}

    #certification-block .certis figure{width: 49.29%;}
    #certification-block .certis figure:nth-child(3n){margin-right: 1.41%;}
    #certification-block .certis figure:nth-child(2n){margin-right: 0;}
    #certification-block .certis figure figcaption{font-size: 14px;}

    .direction-block .map .root_daum_roughmap .wrap_map{height: 250px !important;}
    .direction-block .map-info .con ul + ul{margin-top: 40px;}
    .direction-block .map-info .con ul li{flex-direction: column;}
    .direction-block .map-info .con ul li + li{margin-top: 40px;}
    .direction-block .map-info .con .box:first-child{width: 100%;}
    .direction-block .map-info .con .box:last-child{width: 100%; margin-top: 10px;}
    .direction-block .map-info .con .box strong{font-size: 16px;}
    .direction-block .map-info .con .public-transport .transport img{width: 45px;}
    /* ============================= 회사소개 끝 ============================= */

    /* 업소용 초음파세척기 */
    #commercial-block .prds-img img{max-width: 300px;}
    #commercial-block .st1-mark{width: 100px;}
    #commercial-block .prds-txt strong{font-size: 24px;}
    #commercial-block .prds-txt p{font-size: 16px;}
    #commercial-block .prds-txt .goBtn{width: 140px; margin-top: 20px;}
    #commercial-block .prds-txt .goBtn img{width: 15px;}
    /* 친환경 제품 */
	.eco_prds .cols-2 {flex-wrap:wrap;}
	.eco_prds .cols-2 div {max-width: 580px; width: 100%; margin-right: 0px; margin-top:20px;}
	.eco_prds .cols-2 div:first-child {margin-top:0px;}

    /* ============================= 고객센터 시작 ============================= */
    #iqProcess-block .iqProcess__con{margin-top: 0}
    #iqProcess-block .iqProcess__con ul li{padding: 0;}
    #iqProcess-block .iqProcess__con ul li + li{margin-top: 10px;}
    #iqProcess-block .iqProcess__con ul li .txt{padding: 20px 0 30px;}
    #iqProcess-block .iqProcess__con ul li .txt .num{font-size: 16px;}
    #iqProcess-block .iqProcess__con ul li .txt p{font-size: 16px;}
    #iqProcess-block .iqProcess__con ul li .txt span{font-size: 14px;}

    #as-block .as__detail::after{height: 85%;}
    #as-block .as__tit{grid-template-columns:1fr 85px; grid-template-rows:36px 1fr}
    #as-block .as__detail .as__detail__tel b{font-size: 20px;}
    #as-block .as__detail .as__detail__tel strong{font-size: 24px;}
    /* ============================= 고객센터 끝 ============================= */

    /*  Media  */
    #media_main .media_content .media_view .media_view_title {font-size: 22px;}
    #media_main .media_content .media_view .media_list {padding: 0px 25px;}
    #media_main .media_content .media_view .media_list > li {padding: 30px 25px 40px;}
    #media_main .media_content .media_view .media_list > li .media_list_title {font-size: 26px;}
    #media_main .media_content .media_view .media_list > li .media_list_desc {font-size: 16px;}
    #media_main .media_content .media_view .media_list > li .media_list_more {font-size: 16px; height: 50px; line-height: 50px;}
}

@media (max-width:375px) {
    #as-block .as__detail::after{height: 94%;}
    #as-block .as__detail ul{padding: 40px 20px;}
    #as-block .as__detail ul li{width: 100%; margin-top: 20px; padding-bottom: 20px; border-right: 0; border-bottom: 1px solid #e1e1e1;}

    #media_main .media_content .media_view .media_list > li .media_list_video {justify-content: center}
}