@charset "utf-8";
/* CSS Document */
@media screen and (max-width:1600px) {
    .box1{ width: 92%; max-width: 90%;}

}
@media screen and (max-width:1440px) {
    body{height: auto;}
    /* header */
    #header .top_wrap .gnb > li{display: none;}
    
    /* slide */
    #sec_about .aboutTslide{ bottom: -0.20rem;}
    #contents .sub_page_menu .gnb .dp2 {display: none;}

    /* 오수량 자동계산기 */
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ width: 54%;}
}
@media screen and (max-width:1024px) {
    .PHONE{ display: block;}

    /*header*/
    #header .all_wrap .all_layer .all_inner > .wrap_in .wrap_img{ display: none;}
    #header .all_wrap .all_layer .all_inner > .wrap_in .wrap_middle{ width: 100%;}

    /*visual*/
    .visualSlide .el .bg > img{ width: 100%; height: 100%; object-fit: cover;}
    .visualSlide .el{ height: 60vh;}

    /*sub all*/
    /* #contents .sub_page_menu{ display: none;} */
    #contents .sub_tit_wrap .sub_tit .tt{ font-size: 2.415em;}
    #contents .sub_top_wrap .wrapBg .bg{background-size: cover;}
    
    /* 불량정화조 부분 */
    .proBtn .btn{ padding: 1.0625rem 1.5625rem;}

    /* 메인 로고 슬라이드 */
    #sec_about .aboutTslide{ bottom: 0.8rem;}

    /* 풀페이지 */
    #sec_advantage .advantage_conatiner .advantageList > li > .con > .imgCon{ height: 22.5rem;}

    /* 테이블 스크롤 */
    .scr_i{display: inline-flex; align-items: center; gap:.2em; margin-top: 5px; color:var(--siteC);  }
    .scr_i .xi{ transform: rotate(90deg);}
    .scroll_wrap{width: 100%; overflow-x: auto;}
    .scroll_wrap table {min-width: 1000px; width: max-content; border-collapse: collapse;}
    .scroll_wrap table.mt20{margin-top: .5em !important;}
    .scroll_wrap.st1{overflow-x: unset;}
    .scroll_wrap.st1 table{min-width: 0; width: auto;}
    
    /*greeting*/
    .academy_wrap .tit .t1{ font-size: 2.315em;}
    .academy_wrap .tit .t2{ font-size: 1.315em;}
    .academy_wrap .txt .t2{ font-size: 1.15em;}

    /* 기업소개-인사말 */
    .greet_wrap .greet-con{gap: 5rem;} 

    /* PCM-Tank구성 */
    .sub_topBg{ height: 17rem;}

    /* 적용분야 */
    .popWrap.gallery .productViewSlide_wrap .productViewSlider .imgCon{max-width: 56vw;}

    /* 자료실 */
    .page_certificate .list > li .img-area{ height: 6em; padding: 2em;}

    /* 오수량 자동계산기 */
    .calculatorInfo_wrap .img_wrap{ width: 13rem; height: 13rem;}
    .pageGo_btn .down_btn .info{ bottom: -285%; width: 100%;}
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ width: 65%;}

        
}

@media screen and (max-width:768px) {

    /*header*/
    #header .top_wrap .logo > a img{ height: 20px; object-fit: contain;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size: 1.7rem;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{ font-size: 1.15rem;}
    #header .all_wrap .all_layer .all_header .close_btn{ width: 3em; height: 3em;}
    #header .all_wrap .all_layer .all_header .close_btn .xi{ font-size: 1.6em;}

    /*visual*/
    .visualSlide .el{ height: 46vh;}

    /* #sec_about */
    #sec_about .about_container{padding: 3.5rem 3rem; }
    .proBtn .btn{ padding: 1rem;}

    /* 메인로고슬라이드 */
    #sec_about .aboutTslide{ bottom: 1rem;}
    #sec_about .aboutTslide .textAniW .textAni{ font-size: 9vw;}

    /* 불량정화조 부분 */
    #sec_about .about_container{ padding: 1.5rem;}
    #sec_about .about_container .topTit .subT{ font-size: var(--font-size-lg); margin-bottom: var(--space-5);}
    #sec_about .about_container .inner .infoR .tit{ font-size: var(--font-size-lg);}
    #sec_about .about_container .inner .infoR .desc{ font-size: var(--font-size-sm);}
    #sec_about .about_container .inner{ flex-direction: column-reverse; align-items: center; gap: 2rem;}
    #sec_about .about_container .inner .infoL, #sec_about .about_container .inner .infoR{ width: 100%;}
    #sec_about .about_container .proinfoBtm{ margin-top: var(--space-5);}
    .proinfoBtm .proBtn{ display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
    .proinfoBtm .proBtn .btn{ width: 80%;}

    /* 풀페이지 */
    #sec_advantage .advantage_conatiner .advantageList > li > .con > .imgCon{ height: 13.5rem;}

    /* 새로운소식 */
    #sec_notice .notice_container .noticeTop{ height: 28vh;} 
    #sec_notice .notice_container .noticeTop .leftItem > .item > .inner .infoCon{ padding: 0.75rem;}
    #sec_notice .notice_container .noticeTop .leftItem > .item > .inner .infoCon > .infoB{margin-top: 1rem;}
    #sec_notice .notice_container .noticeBtm .youtubeList > li{ width: calc((100% - 2.5rem) / 3);}

    /*footer*/
    #footer .info > li{ font-size: .915em;}
    #footer .logo .in.alogo > img{ height: 20px; object-fit: contain;}

    /*sub all*/
    #contents .sub_nav > li{ font-size: .915em;}
    #contents .sub_page_top{ height: 10em;}
    #contents .sub_tit_wrap2{ padding: 2em 0 1em; gap: 1em; flex-direction: column; align-items: start;}
    #contents .sub_page_tit .tit{ font-size: 1.615em;}
    #contents .sub_nav > li.home > a{ width: 1.4em; height: 1.4em;}
    #contents .sub_nav > li.home > a .xi{ font-size: .8em; width: 1.4em; line-height: 1.4;} 
    #contents .sub_tit_wrap .sub_tit .tt{ font-size: 1.815em;}
    .input_st.w3{ width: auto;}

    /*greeting*/
    #contents .sub_tit_wrap{ width: 100%; justify-content: center;}

    /*overview*/
    .overview_wrap .left_poster{ width: 100%;}
    .overview_wrap .left_poster > img{ width: 100%; height: 100%; object-fit: cover;}
    .overview_wrap{ flex-direction: column;}

    /*speaker*/
    .prof_list.w2 > li{ width: calc((100% - 2em) / 2);}
    .prof_list.w3 > li{ width: calc((100% - 4em) / 3);}

    /*video*/
    .board_photo > li{ width: calc((100% - 2em) / 2);}

    /* #sec_link */
    #sec_link .link_container .linkTop .item > .inner{ flex-direction: column;}
    #sec_link .link_container .linkBtm .contactBox > .boxItem{ flex-direction: column; height: 4rem; padding: .6875rem;}

    /* 기업소개-인사말 */
    .greet_wrap .greet-con{flex-direction: column-reverse;}
    .greet_wrap .greet-con .img_wrap{ width: 100%; height: 30rem;}
    .greet_wrap .greet-con .txt_wrap{ margin-bottom: 2rem;} 
    .greet_wrap .aboutTslide .textAniW .textAni{ font-size: 9vw;}
    /* 기업소개-찾아오시는길 */
    .map_wrap .map_info{ flex-direction: column; gap: 1rem;}
    #contents .doc{ padding: 3.5rem 0 5rem 0;}

    /* PCMTANK 소개 */
    .sub_topBg{ height: 13rem;}
    .pageDiv_tit .tit{ font-size: var(--font-size-lg-2);}
    
    .pageDiv_desc{ flex-direction: column;}
    .pageDiv_desc .tit{ width: 100%;}
    .pageDiv_desc .txt{ width: 100%;}

    .pageDiv_desc .img_con{ width: 100%;}

    /* 적용분야 */
    .pageDivCon_top .vod_wrap iframe{max-width: 88%;} 

    .fieldImgSlider .in > .img_con{ height: 21rem; padding: 1rem;}

    /* 사이즈 */
    .fieldView_desc .img_wrap{ overflow-x: scroll; white-space: nowrap;}
    .fieldView_desc .img_box.s3{ padding: 1rem; height: 36rem; display: inline-block;}
    .fieldView_desc .img_box img{ max-width: none; width: 55rem;}

    /* 자료실 */
    .w_no,.w_name,.w_hit{display: none;}
    .page_certificate .list > li{ flex: 0 0 calc(46% - 7rem);}
    .board_gallery > li{ width: calc(50% - 1em) !important;}

    /* 오수량 계산기 */
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-xl-1);}
    .calculatorInfo_wrap{ padding: 3rem;}
    .calculatorInfo_wrap .txt_wrap .t1{ font-size: var(--font-size-lg);}
    .calculatorInfo_wrap .txt_wrap .t2{ font-size: var(--font-size-base);}
    .pageGo_btn{ margin-top: 2rem;}
    .pageGo_btn .btn{ width: 16vw;}
    .pageGo_btn .down_btn .info{ bottom: -206%; width: 121%;}
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ width: 87%;}

    /* main tit */
    .main_tit .t2{ font-size: var(--font-size-xl-1);}
    .main_tit .t4{ font-size: var(--font-size-base);}
    .page_tit .t1{ font-size: var(--font-size-xl);}

    /* 시공사례 */
    .pageBtnBanner{padding: 2rem;}
    .pageBtnBanner .icon_wrap{width: 7rem; height: 7rem; line-height: 7rem;}
    .pageBtnBanner .txtWrap .tt{margin-bottom: var(--space-2);}
    .pageBtnBanner .icon_wrap .xi{font-size: 3rem;}
    
}

@media screen and (max-width:500px) {

    /*header*/
    .visualSlide .el{ height: 27vh;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li{ flex-direction: column; gap: 0.5rem;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{font-size: 1.4rem;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{font-size: 1.1rem;}

    /* 메인 비주얼 배너 */
    .visualSlide .slogan_wrap .slogan .title > .t1{ font-size: var(--font-size-xl-1);}
    #contents .sub_page_menu .gnb .dp2{ display: none;}

    

    /* 메인슬라이드 로고 */
    #sec_about .aboutTslide .textAniW .textAni{ font-size: 14vw;}

    /* 풀페이지 */
    #sec_advantage{ padding: 2rem 0;}
    #sec_advantage .advantage_conatiner .advantageList{ width: 50% !important;}
    #sec_advantage .advantage_conatiner .advantageList > li{ width: 100%;}
    #sec_advantage .advantage_conatiner .advantageList > li:nth-child(2n){ top: 0; margin-top: 0;}

    /* 새로운 소식 */
    .mainTop{ align-items: center; gap: 4rem;}
    #sec_notice .notice_container .noticeTop{ display: flex; flex-direction: column; gap: 3.25rem;}
    #sec_notice .notice_container .noticeBtm .youtubeList > li{ width: calc((100% - 1.5rem) / 2);}

    /* 바로가기 */
    #sec_link{ padding: 3rem 0;}
    #sec_link .link_container .linkTop{ flex-direction: column;}
    #sec_link .link_container .linkTop .item{width: 100%;}
    #sec_link .link_container .linkTop .item > .inner{ padding: 2rem; align-items: flex-start;}

    /* 고객센터 안내 */
    #sec_link .link_container .linkBtm{ flex-direction: column;}

    /* 기업소개-인사말 */
    .greet_wrap .greet-con{ gap: 3rem;}
    .greet_wrap .greet-con .img_wrap{ height: 29rem;}
    .greet_wrap .greet-con .txt_wrap .t1{ font-size: var(--font-size-lg-1);}
    .greet_wrap .greet-con .txt_wrap .t2{ font-size: var(--font-size-base);}
    .greet_wrap .greet-con .txt_wrap .t2 br{display: none;}
    .greet_wrap .aboutTslide .textAniW .textAni{ font-size: 12vw;}
    /* 기업소개-찾아오는길*/
    .map_wrap .map_info{ padding: 2.5em 0 0;}
    .map_wrap .map_info .left .con > h2{ font-size: 1.5rem;}
    .map_wrap .map_info .left .con .contact_list{ gap: 0.5rem; flex-direction: column;}
    
    /* PCMTANK 소개 */
    .sub_topBg{ height: 7rem;}
    
    .pageDiv_desc .tit{ width: 100%; margin-bottom: 1rem;}
    .pageDiv_desc .img_con{ width: 100%;}
    .pageDiv_desc .img_con .img_wrap img{ width: 90%; padding: 1rem;}
    .pageDiv_desc .txt .view_btn{ display: flex; align-items: center; width: 24%;}

    /* 적용분야 */ 
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-xl);}
    .page_tit .t1{ font-size: var(--font-size-xl);}
    .pageDivCon_top .vod_wrap iframe{ max-width: 100%;}

    .pageDiv_tit .tit{ font-size: var(--font-size-lg-1);}
    .pageDiv_tit .tit.dot::before{ top: 15px;}
    .fieldView_desc .desc_txtBox .desc_tit{font-size: var(--font-size-md);}
    .dotList > li .t1{ width: 100%;}
    .fieldView_desc .img_wrap{ overflow-x: scroll; white-space: nowrap; }
    .fieldView_desc .img_box{ padding: 1rem; height: 21rem; display: inline-block;}
    .fieldView_desc .img_box img{ max-width: none; width: 59rem;}
    .fieldView_desc .img_box.s1{ height: 21rem;}

    .dotList.line > li .view_btn{width: 22%}
    .view_btn{ padding: 0.1rem; }

    .btnO{ padding: 12px 20px; font-size: var(--font-size-sm-1);}

    .fieldImgSlider .in > .img_con{ height: 24rem;}

    .field_container .fieldList > li > .proInner{ flex-direction: column; padding: 1rem; gap: 1rem;}
    .field_container .fieldList > li > .proInner > a{ width: 100%;}
    .field_container .fieldList > li > .proInner .proInfo{ width: 100%; }

    /* 시공사례 */
    .board_search_wrap{ flex-direction: column;}
    .board_gallery > li{ width: 100% !important;}

    /* 사이즈 */
    .fieldView_desc .img_box.s3{ height: 37rem;}
    
    /* 자료실 */
    .page_certificate .list > li {flex: 0 0 calc(95% - 12rem);}

    /* 오수량 자동계산기 */
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-xl-1);}
    .page_tit .t1{ font-size: var(--font-size-xl-1);}
    .page_tit .t2{font-size: var(--font-size-md-1);}
    .calculatorInfo_wrap{ flex-direction: column;}
    .calculatorInfo_wrap .img_wrap{ width: 12rem; height: 12rem; gap: 2.5rem;}
    .pageGo_btn .btn{ width: 34vw;}
    .pageGo_btn .down_btn .info { bottom: -205%;}

    .calculatoRimg_box{flex-direction: row; overflow-x: scroll; }
    .calculatoRimg_box img{max-width: 130%;}
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ max-width: 200%; width: 150%;}

    /* 온라인 문의 */
    .table_form_wrap{overflow-x: scroll;}
    .table_form > li{ width: 163%;}

    /*speaker*/
    .speaker_wrap{ padding: 0em; background: none;}

    /*poster*/
    .poster_wrap{ flex-direction: column;}
    .poster_wrap .right_poster,
    .poster_wrap .left_poster{ width: 100%;}

    /*footer*/
    #footer .info_wrap{ flex-direction: column; gap: 3em; padding: 3em 0;}
    #footer .footerWrapper .footerTop{ justify-content: center;}
    #footer .footerWrapper .footerTop .wrapCon{ flex-direction: column;}

    /*sub all*/
    .fs18{ font-size: 1em !important;}
    .sub_con{ padding: 2em;}
    .input_st.s1{ font-size: 1em;}

    .page_btn{ flex-direction: column;}
    .page_btn .in{ width: 100%;}

    /*greeting*/
    .speak_Wrap .infoA{ padding: 1em 0; border-radius: 0; }
    .academy_wrap .tit .t1{ font-size: 1.715em;}
    .academy_wrap .tit .t2{ font-size: 1.15em;}
    .academy_wrap .txt .t2{ font-size: 1.063em;}
    .academy_wrap .tit{ margin-bottom: 3em;}

    /*program*/
    .scrolltable .table_st{ width: 600px; font-size: .815em;}

    /*speaker*/
    .prof_list.w3 > li,
    .prof_list.w2 > li,
    .prof_list > li{ width: 100%;}
    .speaker_wrap2{ flex-direction: column;}
    .speaker_wrap2 .con{ width: 100%;} 

    /*partner*/
    .form_lab .lab_con{ flex: 1 1 100%;}
    .form_lab .tit1{ font-size: .967em;}
    .form_wrap .form_tit .t3{ font-size: 1em;}

    /*viewapp*/
    .mem_form_inp > li.inp_wrap > .wrap_in.flex{ align-items: start;}
    .mem_form_inp > li.inp_wrap .inp .group_inpBtn{ flex-direction: column; gap: .5em;}
    .mem_form_inp > li.inp_wrap .inp .group_inpBtn .ml10{ margin-left: 0 !important; width: 100%;}

    /*video*/
    .board_photo > li{ width: 100%;}

    /* main_tit */
    .main_tit .t2{ font-size: var(--font-size-md-1);}
    
}
@media screen and (max-width:375px) {
    /* header */
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp1 .tt{ font-size: 1.3rem;}
    #header .all_wrap .all_layer .wrap_middle .gnb > li .dp2 > li > a .tt{ font-size: 1rem;}

    .greet_wrap .greet-con .img_wrap{ height: 25rem;}
    /* pcm-tank구성 */
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-xl);}
    .pageDiv_tit .tit{ font-size: var(--font-size-lg-1);}
    .sub_topBg{ height: 6rem;} 

    .pageDiv_desc .img_con{ width: 100%; overflow-x: scroll;}
    .pageDiv_desc .img_con .img_wrap{ width: 150%;}

    /* 적용분야 */
    .dotList > li .t1{ font-size: var(--font-size-sm);}
    .dotList.line > li .view_btn{ width: 32%;}
    .dotList.line > li .view_btn::before{ left: -0.8rem; }

    /* 시공사례 */
    .board_search_wrap .search_inner{ width: 22rem;}
    .board_search_wrap .search_inner .input_search .search{ right: 45px !important;}

    /* 자료실 */
    .page_certificate .list > li {flex: 0 0 calc(100% / 1 - 0rem);}
    .page_certificate .list > li .img-area{ height: 12em;}

    /* 오수량자동계산기 */
    .calculatoRimg_box img{max-width: 136%;}
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ max-width: 200%; width: 170%;}

    /* 온라인 문의 */
    .table_form > li{ width: 190%;}

    .pageBtnBanner{flex-direction: column; gap: 1.5rem;}
    .pageBtnBanner .txtWrap{display: flex; flex-direction: column; align-items: center; text-align: center;}
    .pageBtnBanner .icon_wrap{width: 6rem; height: 6rem; line-height: 6rem;}


}
@media screen and (max-width:320px) {
    /* 기업소개-인사말 */
    .greet_wrap .greet-con .img_wrap{ height: 22rem;}
    .greet_wrap .greet-con .txt_wrap .t1{ font-size: var(--font-size-md);}
    .greet_wrap .greet-con .txt_wrap .t2{ font-size: var(--font-size-sm);}
    #footer .footerWrapper .footerTop .menu{ gap: 1rem;}
    .greet_wrap .greet-con .txt_wrap p.ceo{ font-size: 1rem;}
    /* 기업소개-찾아오는길 */
    .map_btn{ gap: 0.5rem; flex-direction: column;}

    /* PCMTANK소개 */
    .view_btn { padding: 0.15rem; font-size: var(--font-size-xs);} 
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-xl-1);}
    .pageDiv_tit .tit{font-size: var(--font-size-lg-1);}
    .pageDiv_desc .tit{font-size: var(--font-size-md-1);}
    .pageDiv_desc .txt .t1{ font-size: var(--font-size-sm);}
    .dotList.line > li .view_btn{ margin-top: 0.3rem;}
    .dotList.line > li .view_btn::before{display: none;}

    /* PCM-TANK 구성 */
    .sub_topBg{ height: 5rem;}

    /* 적용분야 */
    .pageDivCon_top .vod_wrap{ padding: 1rem;}
    .dotList.line > li{ align-items: flex-start; flex-direction: column;}
    .btnO{ padding: 8px 10px;}
    .page_tit .t1{ font-size: var(--font-size-lg-2); margin-bottom: 0.5rem;}
    .fieldImgSlider .in > .img_con{ height: 18rem;}

    /* 시공사례 */
    .board_search_wrap .search_inner{ width: 18rem;}
    .board_search_wrap .search_inner .input_search .search{ right: 107px !important;}

    /* 오수량 자동계산기 */
    #contents .sub_top_wrap .subTit .t1{ font-size: var(--font-size-lg-2);}
    .page_tit .t2{ font-size: var(--font-size-base);}
    .calculatorInfo_wrap{ padding: 1rem;}
    .calculatorInfo_wrap .txt_wrap .t1{ font-size: var(--font-size-lg-1);}
    .pageGo_btn{ margin-top: 1rem;}
    .pageGo_btn .btn{width: 38vw;}
    .pageGo_btn .down_btn .info{ bottom: -166%; width: 166%;}

    .calculatoRimg_box{ padding: 3rem 0;}
    .calculatoRimg_box img{ max-width: 154%;}
    .calculatoRimg_box img:nth-child(3), .calculatoRimg_box img:nth-child(4){ max-width: 200%; width: 200%;}

    /* 온라인 문의 */
    .table_form > li{ width: 216%;}
    .agree_box_wrap .check .sub_tt{font-size: 1em;}

    /* footer */
    #footer .footerWrapper .footerTop .wrapCon{gap: 2rem;}
    #footer .footerWrapper .footerTop .menu > li > a{ font-size: var(--font-size-sm-1);}
    #footer .footerWrapper .footerTop .menu > li:before{ right: -0.5rem;}
}