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

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

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

/*반응형 responsive.css-----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1600px) {
    /*head*/
    #menu-btn{right:3%;}

    /*main*/
    .hp-sec-container{padding:0 40px;width: 100%;}

    /*tail*/
    #ft_link{padding:20px 15px;}
    #ft_wr{padding:0 15px;width: 100%;}
    #ft-logo{right:15px;}
}

@media screen and (max-width:1440px) {
    /*hp-sec01*/
    #hp-sec01:before{left:-5%;}

    /*hp-sec02*/
    #hp-sec02{margin-bottom:241px;}

    /*hp-sec03*/
    #hp-sec03 .hp-title{display: none;}
    #hp-sec03 .hp-category{display: none;}

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

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

    /*head*/
    .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;}

    /*head*/
    #hd_wrapper{padding: 0 15px;left: 0;}
    #hd_wrapper .hd_login{right:calc(66px + 30px);}
    #gnb{display:none;}
    #menu-btn{right: 15px;}
    #mob-gnb{max-width:100%;}
    #mob-gnb .menu-list > ul > li:not(:last-child){margin-bottom: 25px;}



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

    /*다크모드*/
    body.dark-mode #menu-btn span{background: #fff;}

}


@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;}

    /*main*/
    .hp-sec-container{padding:0 15px;}

    /*hp-sec01*/
    #hp-sec01{margin:120px 0;}
    #hp-sec01:before{background:url("http://planhp.co.kr/theme/gnuwiz_theme_04/css/../img/hp-sec01-bg.png") 111%  bottom no-repeat;background-size:50%;opacity: 0.5;}
    #hp-sec01 .hp-title01{font-size: 18px;}
    #hp-sec01 .hp-title02 > div > span{padding:10px 0;}
    #hp-sec01 .hp-text-container{font-size: 18px;}

    /*hp-sec02*/
    #hp-sec02{margin-bottom:120px;}
    #hp-sec02 .hp-service-list{flex-wrap:wrap;gap: 15px;}
    #hp-sec02 .hp-service-list > li{width:calc(50% - 7.5px);}
    #hp-sec02 .hp-service-list .gw-mb-40 {margin-bottom: 20px !important;}

    /*hp-sec03*/
    #hp-sec03{height:100vh;overflow:visible;}
    #hp-sec03 .hp-img-container .hp-bg{top:40%;width: 30vw;}
    #hp-sec03 .hp-title-container{bottom:10%;}
    #hp-sec03 .hp-img{margin-bottom:0 !important;width: 40vw;height: 26vw;}
    #hp-sec03 .hp-img-container{height:auto;padding-bottom:100%;}
    #hp-sec03 .hp-img-container .hp-work-item01{top:5%;left:-6%;}
    #hp-sec03 .hp-img-container .hp-work-item02{right:-3%;}
    #hp-sec03 .hp-img-container .hp-work-item03{bottom:28%;left:-2%;}
    #hp-sec03 .hp-img-container .hp-work-item04{bottom:39%;right:-5%;}
    #hp-sec03 .hp-title-container .hp-title01{font-size: 24px;}
    #hp-sec03 .hp-title-container .hp-title02{margin-bottom:30px !important;}
    #hp-sec03 .hp-title-container .hp-btn02{padding-bottom:7px;font-size: 16px;}

    /*hp-sec04*/
    #hp-sec04{padding:100px 0;}
    #hp-sec04 .hp-title{font-size:24px;}

    /*tail*/
    .ft-quick-container{bottom:20px;right: 20px;}
    .ft-quick-container > li{width: 60px;height: 60px;}
    #gw-top_btn:hover > i {color: #fff;}
    #ft_company .ft_info{font-size: 18px;}

}

@media screen and (max-width:576px){
    /*haed*/
    #hd_wrapper .gnb-container{height:60px;}
    #hd_wrapper .hd_login{gap:10px;right:calc(46px + 1.5%);}
    .logo{width:110px;}
    #menu-btn{width:46px;height:46px;}
    #menu-btn .menu-btn-container{width:21px;height:14px;}
    #menu-btn span{height:3px;}
    #menu-btn.active:before{display: none;}
    #mob-gnb{padding:20px;}
    #mob-gnb .menu-list > ul > li > .dep01{height: auto;line-height: initial;font-size:27px;}

    /*main*/
    #wrapper{padding-top:60px;}

    /*sec01*/
    #hp-sec01 .hp-title02{font-size: 15vw;}

    /*sec02*/
    #hp-sec02 .hp-service-text{font-size: 24px;}

    /*hp-sec03*/
    #hp-sec03{height:650px;}
    #hp-sec03 .hp-title-container .hp-title02{font-size: 15vw;}

    /*hp-sec04*/
    #hp-sec04 .hp-btn01{padding:10px 25px;font-size:19px;}

    /*tail*/
    #ft .ft-bottom{place-content: flex-start;}
    #ft .ft-bottom .gw-sns-container > li > a{width:47px;height:47px;}
    #ft-logo{width: 110px;}
    #ft_company .ft_info02 > p > span{display:inline-block;margin:0;}
    #ft_company .ft_info02 > p > span:not(:last-child):after{display: none;}
}

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

    /*hp-sec03*/
    #hp-sec03{height:80vh;}
}

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