@charset "UTF-8";
/*****************************************************************

Copyright C 그누위즈 테마 All rights reserved.
gnuwiz@naver.com & master@gnuwiz.com
본 페이지는 유료콘텐츠 그누위즈 테마 CSS입니다. 불법복제시 법적인 제제를 받으실 수 있습니다.
라이센스를 삭제하지 마세요. 라이센스 삭제시 불법 사용으로 간주될 수 있습니다.

******************************************************************/

/*반응형 responsive.css-----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1780px) {
    /* head */
    #hd.on #hd_wrapper{width: 100%;padding: 0 30px;}

    /* main */
    .gw-sec-con-wrap{padding:0 3%;width: 100%;}
    .gw-sec-container{padding:0 3%;width: 100%;}

    /* gw-theme08-main-business */
    #gw-theme08-main-business .gw-sec-container{width: 100%;}

    /* gw-theme08-main-quick */
    #gw-theme08-main-quick .gw-sec-container{width: 100%;}

    /* tail */
    #ft_wr{padding:5rem 3%;width:100%;}
}



@media screen and (max-width:1440px) {
    /*head*/
    #hd_wrapper{width: calc(100% - 40px);}
    #hd.scrolled{width: calc(100vw - 40px);margin-left:calc(-1 * (100vw - 40px) * 0.5);}
    #hd.scrolled #gnb_all:before{width: calc(100vw - 40px);}
    /* 대메뉴 6개가 1280~1440 구간에서 두 줄로 줄바꿈돼 서브비주얼을 덮던 문제:
       폭 제한(70%)을 풀고 항목 좌우 여백을 줄여 한 줄로 유지한다. */
    #gnb .gnb_wrap{width:auto;}
    #gnb .gnb_1dli .gnb_1da{padding:0 18px;}
    #gnb .gnb_1dli:last-child .gnb_1da{padding-right:24px;}

    /* main */
    #wrapper{padding-top: 60px;width:100%;}
    .gw-sec{padding: 120px 0;}
    .gw-sec-con-wrap{padding:0 40px;}

    /* gw-theme08-main-business */
    #gw-theme08-main-business .gw-business-item{padding:3rem;width:calc(33.33% - 0.5rem);}
    #gw-theme08-main-business .gw-img-box{width: calc(66.66% - 0.5rem);}
    #gw-theme08-main-business .gw-business-arrow-box{bottom: 3rem;left: 3rem;}

    /* gw-theme08-main-recruit */
    #gw-theme08-main-recruit .gw-recruit-container{height:64vh; max-height:600px; border-radius:40px;}
    #gw-theme08-main-recruit .gw-recruit-btn-list{ bottom:-20px; right:-20px; }
    #gw-theme08-main-recruit .gw-recruit-btn-list:before,
    #gw-theme08-main-recruit .gw-recruit-btn-list:after{bottom:20px;right:20px;width:40px; height:44px;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item{width:400px; height:128px; padding:0 44px; border:20px solid #fff;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:before{top:-20px; left:-20px; width:calc(100% + 40px); height:calc(100% + 40px); border:20px solid #fff;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:nth-of-type(1):before{border-radius: 65px 0 0 0;}

    /* gw-theme08-main-partners */
    #gw-theme08-main-partners .gw-text-container{left:40px;}

    /* gw-theme08-main-video */
    #gw-theme08-main-video .video-container{height:60vh;}

    /* tail */
    .ft-quick-container{right: 30px;}
}

@media screen and (max-width:1280px) {
    .gw-mob{display: none;}

    /*head*/
    :root{--gw-header-h:60px;}
    #hd.on{border:none;}
    #menu-btn{display:flex;}
    .dark-mode-logo {opacity: 0;transition: opacity 0.3s;}
    .light-mode-logo {opacity: 1;transition: opacity 0.3s;}
    #logo.on{display: block;}
    #logo.on .dark-mode-logo {opacity: 1 !important;}
    #logo.on .light-mode-logo {opacity: 0 !important;}
    #gnb{display: none;}
    #menu-btn.active .gw-line{background: #000 !important;}
    #mob-gnb{top: 60px;background: #fff;}
    #mob-gnb .menu-list{padding-bottom:20px;display:block;overflow-y:auto;width:100%;height: auto;max-height: calc(var(--vh, 1vh) * 100 - 120px);-webkit-overflow-scrolling: touch;border-left:none;border-right:none;}
    #mob-gnb .menu-list > ul{flex-direction: column;}
    #mob-gnb .menu-list > ul > li {padding:0;text-align: center;}
    #mob-gnb .menu-list > ul > li:not(:last-child):before{display: none;}
    #mob-gnb .menu-list > ul > li:after{display: none;}
    #mob-gnb .menu-list > ul > li > .dep01 .hassub{width: 100%;}
    #mob-gnb .menu-list > ul > li > .dep01 .hassub:after{font-family:xeicon;content: "\e914";position:absolute;left: auto;right: 0;bottom: auto;top: 50%;transform: translateX(0) translateY(-50%);width:auto;height: auto;background: transparent;transition: all 0.3s;}
    #mob-gnb .menu-list > ul > li.open > .dep01 .hassub:after {content: "\e91b";color: var(--main-color);}
    #mob-gnb .menu-list > ul > li > .dep01{padding:15px 30px;margin-bottom:0;color: #000;font-size: var(--main-text01);}
    #mob-gnb .dep02 {display:none;width: 100%;height:100%;background: #F2F2F2;}
    #mob-gnb .dep02.on > li{height: auto;}
    #mob-gnb .dep02 > li a span{background: none;color: #888;background-size: initial;background-position: 0;-webkit-text-fill-color:#888;}
    #mob-gnb .mob-hd-login {display: flex;position: fixed; width: 100%;height:60px;background: #fff;border-top:1px solid #ddd;text-align: center;align-items: center;z-index: 9999;}
    #mob-gnb .mob-hd-login > li {flex: 1;height: 100%;}
    #mob-gnb .mob-hd-login > li:not(:first-child) {border-left: 1px solid #ddd;}
    #mob-gnb .mob-hd-login > li > a{display: block;width: 100%;height: 100%;line-height: 60px;}

    /* gw-theme08-main-service */
    #gw-theme08-main-service .gw-service-list{flex-direction:column;height: auto;}
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box{height: 40rem;}
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box{z-index: 99;}
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-tit-box .gw-main-btn01{display: flex;margin: 0 auto;margin-top: 2rem;}
    #gw-theme08-main-service .gw-thumb-box{padding: 0;}

    /* gw-theme08-main-business */
    #gw-theme08-main-business .gw-business-list{flex-direction: column;gap: 1rem;}
    #gw-theme08-main-business .gw-business-item{gap:2rem;width: 100%;}
    #gw-theme08-main-business .gw-business-item .gw-inner-con{padding-bottom: 0;}
    #gw-theme08-main-business .gw-business-arrow-box{position: relative;bottom: 0;left: 0;}
    #gw-theme08-main-business .gw-img-box{width: 100%;}

    /* gw-theme08-main-inquiry */
    #gw-theme08-main-inquiry > form{width:100%;}

    /*tail*/
    .ft-quick-container{right: 40px;}
}


@media screen and (max-width:1024px){
    .gw-pc{display: none !important;}
    .gw-mob{display: block;}

    /* 공통 */
    .gw-small-btn{width: 40px;height: 40px;line-height: 40px;text-indent:0;}
    .gw-small-btn:before{right: auto;left:50%;transform: translate(-50%,-50%);}
    .gw-plus-btn{width: 40px;height: 40px;}

    /*gw-theme08-main-partners*/
    #gw-theme08-main-partners .gw-partner-banner{flex-direction:column;}
    #gw-theme08-main-partners .gw-partner-banner > li{width: 100%;}
    #gw-theme08-main-partners .gw-partner-banner > li > a{height: 140px;}

    /*gw-theme08-main-video*/
    #gw-theme08-main-video .gw-bg-text{display: none;}
    #gw-theme08-main-video .video-container{width:100%;height:40vh;}
    #gw-theme08-main-video .gw-video-btn{right:2.5%;bottom:-20px;width: 120px;height: 120px;}
    #gw-theme08-main-video .gw-bgline-container{display: none;}

    /*gw-theme08-main-location*/
    #gw-theme08-main-location{display:flex;flex-direction: column-reverse;height:100vh;}
    #gw-theme08-main-location .gw-left{width: 100%;height: 50vh;}
    #gw-theme08-main-location .gw-right{width: 100%;height: 50vh;}


    /*gw-theme08-main-inquiry*/
    #gw-theme08-main-inquiry {padding: 5rem 0;}
    #gw-theme08-main-inquiry .gw-input-list{opacity:1;transform:translateY(0);}
    #gw-theme08-main-inquiry .gw-input-container > ul{width:calc(50% - 2.5%);}

    /*tail*/
    /* 버튼 크기를 변수로 낮추면 li 와 gw-top_wrap 접힘 높이가 함께 60px 가 된다 */
    .ft-quick-container{bottom:20px;right: 20px;}
    #gw-top_btn:hover > i {color: #fff;}
}

@media screen and (max-width:768px){
    /*main*/
    .gw-sec{padding: 80px 0;}
    .gw-sec-container{padding: 0 20px;}
    .gw-sec-con-wrap{padding:0 20px;}

    /* gw-theme08-main-business */
    #gw-theme08-main-business .gw-business-item{padding:2rem;}
    #gw-theme08-main-business .gw-business-arrow-box .slick-arrow{margin:0 0.25rem;width:4rem;height: 4rem;}

    /* gw-theme08-main-recruit */
    #gw-theme08-main-recruit .gw-recruit-container{border-radius:28px;}
    #gw-theme08-main-recruit .gw-recruit-btn-list{bottom: 0;right: 0;}
    #gw-theme08-main-recruit .gw-recruit-btn-list:before, #gw-theme08-main-recruit .gw-recruit-btn-list:after{bottom: 0;right: 0;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item{width:300px; height:96px; padding:0 28px; border:14px solid #fff;font-size:16px;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:before{top:-14px; left:-14px; width:calc(100% + 28px); height:calc(100% + 28px); border:14px solid #fff;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:nth-of-type(1):before{border-radius: 3rem 0 0 0;}

    /* gw-theme08-main-partners */
    #gw-theme08-main-partners .gw-text-container{left:20px;}

    /* gw-theme08-main-quick */
    #gw-theme08-main-quick .gw-quick-con{background-position:right -250px center;}
    #gw-theme08-main-quick .gw-quick-con:after{background: linear-gradient(to right, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.05) 100%);}
    #gw-theme08-main-quick .gw-quick-item{position:relative;padding: 3rem 40px;flex-direction: column;gap: 1rem;}
    #gw-theme08-main-quick .gw-quick-item .gw-left-box{width: 100%;}
    #gw-theme08-main-quick .gw-quick-item .gw-right-box{width: 100%;}

    /* tail */
    #ft_wr{padding:3rem 3%;}
    /* 하단 링크 줄: 좁은 화면에서 5개가 한 줄에 안 들어가 글자 중간에서 줄바꿈되던 것 →
       줄바꿈 허용 + 각 링크는 통글자 유지 + (흰색이라 안 보이던) 불릿 대신 간격으로 구분 */
    #ft_link{flex-wrap:wrap;justify-content:center;gap:8px 20px;}
    #ft_link a{white-space:nowrap;}
    #ft_link a:not(:first-child){padding-left:0;}
    #ft_link a:not(:last-child):after{display:none;}
    #ft .ft-top-box{flex-direction: column;gap: 1rem;}
    #ft .ft-top .ft-bottom-box{ display: flex;flex-direction: column;align-items: center;place-content: center;text-align: center;gap: 22px;}
    #ft .ft-bottom{flex-direction:column;gap: 1rem;}
    #ft .family-site-container{order: -1;width: 100%;}
}

@media screen and (max-width:576px){
    /*haed*/
    .logo{width: 250px;}
    #hd.on #hd_wrapper{padding: 0 20px;}

    /* gw-theme08-main-service */
    #gw-theme08-main-service .gw-service-list .gw-list-item .gw-img-box{height: calc(100vw - 40px);}

    /* gw-theme08-main-business */
    #gw-theme08-main-business .gw-img-box .gw-txt{font-size: var(--main-text01);}

    /* gw-theme08-main-about */
    #gw-theme08-main-about .gw-content{max-width:100%;flex-direction: column;gap: 3rem;}
    #gw-theme08-main-about dl{flex:auto;padding:0;}
    #gw-theme08-main-about dl::after{width: 50%;height: 1px;top:auto;right: auto;bottom:-1.5rem;left: 50%;transform: translate(-50%,0);}
    #gw-theme08-main-about dl dt{margin-bottom: 1rem;}

    /* gw-theme08-main-recruit */
    #gw-theme08-main-recruit .gw-recruit-container{border-radius:2rem;height: 30rem;}
    #gw-theme08-main-recruit .gw-recruit-container .gw-tit-box{padding:1rem 0 5rem;}
    #gw-theme08-main-recruit .gw-recruit-btn-list{width: 100%;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item{width:50%;height:78px; padding:0 18px; border:10px solid #fff;font-size:14px;border-radius: 2rem;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:before{top:-10px; left:-10px; width:calc(100% + 20px); height:calc(100% + 20px); border:10px solid #fff;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:nth-of-type(1){margin-right: 0;}
    #gw-theme08-main-recruit .gw-recruit-btn-list .gw-recruit-btn-item:nth-of-type(1):before{border-radius:2rem 0 0 0;}

    /* gw-theme08-main-partners */
    #gw-theme08-main-partners .gw-partner-container > div{height:80px;}
    #gw-theme08-main-partners .gw-partner-item{width:150px;height:80px;}

    /* gw-theme08-main-video */
    #gw-theme08-main-video .video-container{height: 30vh;}

    /* gw-theme08-main-inquiry */
    #gw-theme08-main-inquiry .gw-input-container{flex-direction:column;}
    #gw-theme08-main-inquiry .gw-input-container > ul{width: 100%;}
    #gw-theme08-main-inquiry .gw-file-input-button{width: 20% !important;}
    #gw-theme08-main-inquiry .chk_box{display:flex;align-items:center;}
    #gw-theme08-main-inquiry .gw-check-list > div:last-child{text-align:left;width: calc(100% - 55px);}
    #gw-theme08-main-inquiry .gw-search{width: 25px;height: 25px;line-height: 25px;text-align:center;}
    #gw-theme08-main-inquiry .gw-main-btn01{width:50%;height:40px;line-height:40px;}
    #gw-theme08-main-inquiry .gw-main-btn01{color:var(--main-color) !important;}


    /*tail*/
    /* 모바일: 로고를 더 줄인다(아래 여백은 ft-bottom-box 의 gap 이 담당) */
    #ft-logo{margin-bottom:0 !important;width: auto;}
    #ft-logo > img{height: 54px;}
    #ft .ft-brand{gap:12px;margin-bottom:0;justify-content:center;flex-wrap:wrap;}
    #ft .ft-company-name{font-size: 16px;}
    #ft .ft-top .gw-sns-container > li > a{width: 35px;height: 35px;}
    #ft_copy{font-size: 12px;}
    #ft_company h2 {font-size: 14px;}
    #ft_company .ft_info{font-size: 12px;line-height:1.75;}
    #ft_company .ft_info span{display: block;margin-right:0;}
    #ft_company .ft_info > p > span:not(:last-child):after{display: none;}
    #ft_company .gw-right-box{width: 100%;}
    #ft .family-site-container > button{height:50px;line-height: 50px;}
    .ft-quick-container > li{font-size: 12px;}
}

@media screen and (max-width:375px){
    /*haed*/
    .hd_pops_con{width: 280px !important;}

    /*gw-theme08-main-location*/
    #gw-theme08-main-location{height:120vh;}
    #gw-theme08-main-location .gw-right{padding:60px 0;}
}

/* ============================================================================
   메인 페이지 반응형 보정 (pnf-main 재디자인 대응)
   pnf-main.css 가 뒤에 로드되므로 여기서는 !important 로 눌러 이긴다.
   ========================================================================== */

/* [제품] 모바일에서 본문이 고정 높이(330px)+세로중앙이라 내용이 넘쳐
   '자세히 보기' 버튼이 카드 바닥 밖으로 삐져나오고 설명~스펙 사이가 벌어졌다.
   절대배치·고정높이를 풀어 이미지(위) + 본문(아래)이 자연스럽게 흐르게 하고
   본문은 위 정렬 + 아래 여백을 줘서 버튼이 바닥에 붙지 않게 한다. */
@media screen and (max-width: 768px) {
    #pnf-product .pnf-product-row,
    #pnf-product .pnf-product-row--reverse {
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
    }
    #pnf-product .pnf-product-visual,
    #pnf-product .pnf-product-row--reverse .pnf-product-visual {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: 300px !important;
        flex: 0 0 auto !important;
    }
    #pnf-product .pnf-product-body,
    #pnf-product .pnf-product-row--reverse .pnf-product-body {
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        justify-content: flex-start !important;
        padding: 30px 24px 34px !important;
    }
}

/* [기술·연구] 모바일·태블릿에서는 특허/인증 이미지(장식용)를 감춘다 */
@media screen and (max-width: 1024px) {
    #pnf-tech .pnf-tech-visual { display: none !important; }
}

/* [기술·연구] PC sticky 패널을 화면 높이 기준으로 세로 정중앙에 둔다.
   고정 top 값 대신, 패널이 '헤더 아래 화면 높이'를 그대로 차지하게 하고 그 안에서
   콘텐츠를 flex 로 가운데 정렬한다 → 패널/카드 높이가 달라도 항상 정중앙,
   헤더 제외 위·아래 여백이 자동으로 같아진다. */
@media screen and (min-width: 1025px) {
    #pnf-tech .pnf-tech-sticky {
        top: var(--gw-header-h) !important;
        height: calc(100vh - var(--gw-header-h)) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
}

/* [사업분야] 모바일에서 카드 이미지가 세로로 길게 잘리던 문제 —
   좌우 배치를 위/아래(상단 사진 배너 + 하단 글)로 바꾸고 사진은 가로형 짧은 높이로
   고정한다. 좌우 배치에서 사진만 짧게 하면 아래 빈 공간이 생겨 어색했던 것을 해결. */
@media screen and (max-width: 480px) {
    #pnf-partner .pnf-biz-card {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto !important;
        min-height: 0 !important;
    }
    #pnf-partner .pnf-biz-art {
        align-self: stretch !important;
        aspect-ratio: auto !important;
        min-height: 0 !important;
        height: 150px !important;
    }
    #pnf-partner .pnf-biz-art img {
        width: 100% !important;
        height: 150px !important;
        object-fit: cover !important;
        display: block !important;
    }
}

/* [제품] PC 카드 이미지 너비를 살짝 줄인다(60% → 55%) */
@media screen and (min-width: 769px) {
    #pnf-product .pnf-product-visual,
    #pnf-product .pnf-product-row--reverse .pnf-product-visual { width: 55% !important; }
}

/* ============================================================================
   게시판 상세(#gw-bo-v) 컨테이너 반응형
   스킨(gw_basic 등)이 상세 컨테이너 좌우 패딩을 0으로 강제(#gw-bo-v.gw-bbs-con)해서
   본문(제목·메타·내용·댓글)이 좌우 여백 없이 화면 끝까지 붙었다.
   폭을 1200 으로 제한하고, 좌우 거터를 다른 페이지와 동일한 --gw-padding(30px)으로
   맞춘다(모바일 포함 전 구간 동일). 전 게시판 스킨 공통.
   상단 여백(90px)은 기존 pnf-accent 규칙을 그대로 둔다(여기선 좌우만 건드림). */
body #gw-bo-v,
body #gw-bo-v.gw-bbs-con {
    width: 100% !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--gw-padding) !important;
    padding-right: var(--gw-padding) !important;
    box-sizing: border-box !important;
}

/*반응형 responsive.css-----------------------------------------------------------------------------------------------------------------*/