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

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

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

/*반응형 responsive.css-----------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:1440px) {
    /*head*/
    #hd_wrapper{width: calc(100vw - 120px);}
    #hd.scrolled{}
    #hd.scrolled #gnb_all:before{width: calc(100vw - 120px);}


    /*tail*/
    #ft{width: calc(100vw - 120px);}
    .ft-quick-container{right: 60px;}
}

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

    /*head*/
    #hd{border-bottom: none;box-shadow:0 1px 5px rgba(0, 0, 0, .1);}
    #hd_wrapper{width:calc(100vw - 40px);}
    #hd_wrapper .gnb-container{height:60px;}
    #logo{height: 28px; width:100%; max-width: 153px;}
    #logo > a > img {width:100%; height:100%;}
    #gnb{display: none;}
    .hd_login{right: auto;left: -10px;display:none;}
    .hd_login li:first-child > a {color: #fff;}
    .hd_login li > a {color: #fff;}
    .hd_login.on {display:block; z-index:9999;}

    /*main*/
    .main_bn.pc {display: none;}
    .main_bn.mo {display: block}
    .main_bn .main-bn-txt {left:0; right:0; bottom:66px; top:auto; text-align: center;}
    .main_bn .main-bn-txt span {font-size: 16px;}
    .main_bn .main-bn-txt .main-txt {font-size: 30px;}
    .main_bn .main-bn-txt .sub-txt {font-size: 16px;}
    .main_bn .main-bn-txt::before,
    .main_bn .main-bn-txt::after {content:none;}
    .main_bn .swiper-horizontal .swiper-pagination {position: absolute; left:50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; display: flex;}
    .main_bn .swiper-horizontal .swiper-pagination .swiper-pagination-bullet {width:8px; height: 8px; background:#fff; opacity: 1;}
    .main_bn .swiper-horizontal .swiper-pagination .swiper-pagination-bullet-active {width:12px; height: 12px; background:transparent; border: 2px solid #fff;}
    .main_bn .swiper-horizontal .swiper-button {display: none;}



    /* 모바일 */
    #menu-btn {display: block;width: 22px;height: 14px;position: absolute;top: 50%;right: 17px;transform:translateY(-50%);z-index: 1000;cursor: pointer;transition: all .3s;}
    #menu-btn span {display: block;width: 100%;height: 2px;background: #000;position: absolute;transition: all 0.3s;}
    #menu-btn span:nth-child(1) {top: 0;}
    #menu-btn span:nth-child(1)::after {content:""; display: block; position: absolute; width: 2px; height:2px; background:#000; right: 2px; top:0;}
    #menu-btn span:nth-child(2) {top: 6px;}
    #menu-btn span:nth-child(3) {top: 12px;}
    #menu-btn.active span{background: #fff;}
    #menu-btn.active span:nth-child(2) {opacity: 0;}
    #menu-btn.active span:nth-child(1) {top: 10px;transform: rotate(45deg);}
    #menu-btn.active span:nth-child(3) {top: 10px;transform: rotate(-45deg);}

    #mob-gnb{display: block;position:absolute;top:60px;left:-100%;z-index:100;display: none;max-width:100vw;width:100%;height:100vh;background:#fff;overflow-y:auto;transition:all 0.5s;}
    #mob-gnb .menu-list{width: 100%;height: 100%;background:#eee;}
    #mob-gnb .menu-list > ul > li > .dep01{width: 45%;height:55px;line-height:55px;display: table;text-align: center;color: #666; text-transform: uppercase;}
    #mob-gnb .menu-list > ul > li:first-child > .dep01{border-top: none;}
    #mob-gnb .menu-list > ul > li.open > .dep01{position: relative;background: var(--main-color);box-shadow:-3px 3px 5px rgba(0,0,0,.1);color: #fff;z-index: 10;}
    #mob-gnb .menu-list > ul > li.open > .dep01 > span{display: table-cell;width: 100%;font-family:'NotoKr_B' , sans-serif; }
    #mob-gnb .dep02{width:55%;height:calc(100% - 60px);position: fixed;top: 60px;left: 45%;overflow-y: auto;overflow-x: hidden;display:none;background: #fff;box-shadow:0px 5px 10px rgba(0,0,0,.1);}
    #mob-gnb .dep02 > li{border-bottom: 1px solid #ddd;width: 100%;height: 55px;line-height: 55px;padding:0 10px;}
    #mob-gnb .dep02 > li a{position: relative;display: block;width: 100%;font-family:'NotoKr_M' , sans-serif; text-transform: uppercase;}
    html.on,body.on{overflow: hidden;}
    #hd.on{background: #000;}
    #logo.on{display: none;}
    #mob-gnb.on{left:0;display:block;z-index:1;}
    #mob-gnb .dep02.on{display:block;}
    #mob-gnb .dep02.on > li{height: auto;}


    /*main*/
    #wrapper{padding-top:60px;width:100%;}
    .gw-sec{padding: 120px 0;}
    .gw-sec:first-of-type{padding: 120px 0;}
    .gw-sec-container{padding:0 40px;width: 100%;}
    .gw-sec-title{padding-bottom: 55px;}

    /*gw-theme01-main-banner*/
    #gw-theme01-main-banner{height: 300px;}

    /*tail*/
    #ft{width:100%;padding:0 40px;}
    #ft_wr{flex-direction: column;align-items: flex-start;max-width: 100%;}
    #ft .ft-bottom{width: 100%;}
    #ft_company{margin-bottom: 24px;}
    .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;}

    /*main*/
    .gw-sec-container{padding:0;}
    #gw-theme01-main-contact .gw-sec-container {display: block;}
    #gw-theme01-main-contact .gw-sec-container .container-left {width:100%;}
    #gw-theme01-main-contact .gw-sec-container .container-right{width:100%;}


    /*gw-theme01-main-about*/
    #gw-theme01-main-about{padding:80px 40px;}
    #gw-theme01-main-about .gw-text-container{padding-left: 80px;}

    /*gw-theme01-main-banner*/
    #gw-theme01-main-banner .gw-sec-container > div {flex-direction: column;text-align: center;}
    #gw-theme01-main-banner .gw-text{margin-bottom:25px;font-size: 20px;}

    /*tail*/
    #ft{padding:0 20px;}
    #ft .ft-bottom{width: 100%;}
    .ft-quick-container{bottom:147px;right: 20px;}
    .ft-quick-container > li{width: 60px;height: 60px;}
    #gw-top_btn:hover > i {color: #fff;}

    #menu-btn {right:0;}
    #menu-btn.active span:nth-child(1)::after {content:none;}

    #container > [id*="gw-bo-"] {max-width:100%;}

}

@media screen and (max-width:768px){
    /*main*/
    .gw-sec{padding: 80px 0;}
    .gw-sec + .gw-sec {padding: 48px 0 52px;}
    .gw-sec-title{padding-bottom: 30px; font-size: 32px;}
    .gw_reference .pic_gallery li {width: calc(50% - 6px);}
    .gw_reference .pic_gallery li .subject {font-size: 16px;}
    .gw_reference .pic_gallery li .subject .more {font-size: 12px;}
    .gw_customer .pic_gallery_wrap +.pic_gallery_wrap {margin-top: 20px;}
    #gw-theme01-main-notice {flex-direction: column;}
    #gw-theme01-main-notice .gw-list {width: 100%; padding: 0 20px;}
    #gw-theme01-main-notice .gw-list + .gw-list {margin-top: 62px;}
    #gw-theme01-main-notice .gw-list-title {font-size: 20px;}
    #gw-theme01-main-notice .gw-list-title .small-btn {width: 42px; height: 42px;}
    #gw-theme01-main-contact .gw-sec-container {padding: 60px 20px 80px;}
    #gw-theme01-main-contact .gw-sec-container .container-right {width:100%;}
    #gw-theme01-main-contact .gw-sec-container .container-right .wrap {margin-top: 40px;}
    #gw-theme01-main-contact .gw-sec-container .container-right .option + .option {margin-top: 20px;}
    #gw-theme01-main-contact .gw-sec-container .container-right .option:nth-child(1) {width:100%; margin-right:0;}
    #gw-theme01-main-contact .gw-sec-container .container-right .option:nth-child(2) {width: 100%; margin-top:20px;}
    #gw-theme01-main-contact .gw-sec-container .container-right .chk_privacy { float: none;}
    #gw-theme01-main-contact .gw-sec-container .container-right .btn_submit {float: none; display: block; margin: 50px auto 0; height: 50px; font-size: 16px; width:100%;}

    /*gw-theme01-main-about*/
    #gw-theme01-main-about{padding: 80px 20px;}
    #gw-theme01-main-about .gw-text-container{padding:0 40px;}

    /*gw-theme01-main-banner*/
    #gw-theme01-main-banner{height: 220px;}

    /*tail*/
    #ft_wr{padding:35px 0 15px 0;align-items: center;width:100%;}
    #ft .ft-bottom{padding:15px 0 60px 0;flex-direction: column;}
    #ft_company .ft_info{line-height: 1.5;}
    #ft_link{flex-direction:column;width:100%;}
    #ft_copy{padding:15px 0; float: none;}
    #ft-logo {float: none;}
    .ft-quick-container > li img {width:22px; height: 20px;}
}

@media screen and (max-width:576px){
    /*main*/
    .gw-sec{padding: 40px 0;}
    .gw-sec .gw-btn01 {max-width: 130px;padding: 12px 0;height: auto;line-height: inherit;}

    /*gw-theme01-main-about*/
    #gw-theme01-main-about .gw-flex-btw {flex-direction: column;}
    #gw-theme01-main-about .gw-w-50 {width: 100% !important;}
    #gw-theme01-main-about .gw-text-container{padding:40px 0;}
    #gw-theme01-main-about .img{aspect-ratio: 2 / 1;height: 50%;overflow: hidden;}
    #gw-theme01-main-about .img02{order: 1;}

    /*gw-theme01-main-banner*/
    #gw-theme01-main-banner .gw-sec-container > div{padding: 0 10px;}

    /*tail*/
    #ft_copy{font-size: 14px;}
    #ft_company h2 {font-size: 14px;}
    .ft-quick-container > li{font-size: 12px;}
}

@media screen and (max-width:375px){
    /*haed*/
    #logo > a > img{max-width:16vh;}
	#ft-logo > img{max-width:16vh;}
    .hd_pops_con{width: 280px !important;}

    /* main */
    .gw_customer .pic_gallery_wrap +.pic_gallery_wrap {margin-top: 10px;}
}

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