@charset "utf-8";

/*나눔 스퀘어*/
@font-face{
	font-family:NSQ; font-weight: 400; src:url('../../base/font/NanumSquareR.eot'); src:local(※),url('../../base/font/NanumSquareR.woff') format('woff');
}
@font-face{
	font-family:NSQ; font-weight: 600; src:url('../../base/font/NanumSquareB.eot'); src:local(※),url('../../base/font/NanumSquareB.woff') format('woff');
}
/* 네이티브 화살표 숨기기 */ 
select {-webkit-appearance: none; -moz-appearance: none; appearance: none;} 
select::-ms-expand { display: none; } /* IE 10, 11 */

/* 공통 스타일 */
.btn_img {font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden;}

/* WRAP RESET */
#wrap {clear:both; padding:0; margin:0; min-width: 320px;}
#content {z-index: 1;}

/* HEADER */
#mainheader {z-index: 20;}
#mainheader .headerWrap {border-bottom: 1px solid #dbdbdb;}
#mainheader .top_wrap {height: 59px; position: relative;}
#mainheader h1 {width: 95px; position: absolute; left: 14px; top: 50%; margin-top: -13px;}
#mainheader h1 img {display: block; width: 100%;}

#mainheader .qmenu {*zoom:1; position: absolute; right: 0; top: 0; z-index: 25;}
#mainheader .qmenu:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
#mainheader .qmenu li {float: left;}
#mainheader .qmenu li a {display: block; height: 59px; width: 58px; border-left: 1px solid #dbdbdb;}
#mainheader .qmenu .btn_search {background: url(../images/main/btn_top_search.png) 50% 50% no-repeat;}
#mainheader .qmenu .allbtn {background: url(../images/main/btn_all_menu.png) 50% 50% no-repeat;}

#mainheader .top_search,
#mainheader .top_ban {display: none;}

/* GNB */
#gnb {display: none;}

/* VISUAL */
#visual {z-index: 5; position: relative; margin-bottom: 36px; overflow: hidden;}
#visual .visual_wrap {height: 214px; z-index: 10; overflow: hidden;}
#visual .vtxt {display: none;}
#visual .vimg {height: 214px; position: relative;}
#visual .img01 {background: url(../images/main/main_mimg01-m.jpg) 50% 0 no-repeat;}
#visual .img02 {background: url(../images/main/main_mimg02-m.jpg) 50% 0 no-repeat;}
#visual .img03 {background: url(../images/main/main_mimg03-m.jpg) 50% 0 no-repeat;}

#visual .slick-dots {position: absolute; right: 25px; top: 25px; z-index: 15; *zoom:1;}
#visual .slick-dots:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
#visual .slick-dots li {float: left; margin-left: 12px;}
#visual .slick-dots li button {display: block; background: #fff; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; width: 10px; height: 10px; box-shadow: 2px 2px 2px #555;
    border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px;
}
#visual .slick-dots li.slick-active > button, 
#visual .slick-dots li:hover > button {width: 48px; background: #f5821f;}

#visual .visual_wrap .slick-arrow {background: none; display: block; width: 64px; height: 64px; font-size: 0; line-height: 0; text-indent: -9999px; overflow: hidden; z-index:15;}
#visual .visual_wrap .slick-prev {position: absolute; left: 14px; top: 50%; margin: -32px 0 0 0; background: url('../images/main/visual_arw01.png') 0 0 no-repeat;}
#visual .visual_wrap .slick-next {position: absolute; right: 14px; top: 50%; margin: -32px 0 0 0; background: url('../images/main/visual_arw02.png') 0 0 no-repeat;}

/* 포트폴리오 */
#port .port_wrap {padding: 0 12px; position: relative;}
#port .tit h3 {text-align: center; font-family: NSQ; font-weight: 600; color: #282828; font-size: 20px; margin-bottom: 10px;}
#port .tit p {text-align: center; font-family: NSQ; color: #282828; font-size: 14px; margin-bottom: 20px;}
#port .photo_area {padding: 0 15px;}
#port .photo_area .photo_list {overflow: hidden; *zoom:1; position: relative;}
#port .photo_area .photo_list:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
#port .photo_area .photo_wrap {float: left; width: 100%; height: 246px; }
#port .photo_area .photo {border: 1px solid #ddd; width: 270px; height: 244px; margin: 0 auto; position: relative;}
#port .photo_area .photo a {display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -9999px; overflow: hidden; font-size: 0; line-height: 0; background: url(../images/sub/prod_list_a.png) 50% 50% no-repeat;}
#port .photo_area .photo a img {width: 100%;}
#port .photo_area .photo:hover a {display: block;}

#port .slick-dots {padding: 30px 0 50px 0; text-align: center; clear: both;}
#port .slick-dots li {display: inline-block; padding: 0 6px; .display: inline;}
#port .slick-dots li button {.display:inline-block; width: 10px; height: 10px; background: #ccc; text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden;
    border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%;
}
#port .slick-dots li:hover button,
#port .slick-dots li.slick-active button {background: #1e3046;}
#port .slick-arrow {position: absolute; top: 112px; display: block; width: 15px; height: 27px; text-indent: -9999px; font-size: 0; line-height: 0; overflow: hidden; z-index:35;}
#port .slick-arrow.slick-prev {left: 10px; background: url(../images/main/album_prev.png) 50% 50% no-repeat;}
#port .slick-arrow.slick-next {right: 10px;background: url(../images/main/album_next.png) 50% 50% no-repeat;}

/* 회사정보 */
.info_wrap {padding: 50px 12px; background: url(../images/main/bg_info_wrap.gif) 0 0 repeat-x; *zoom:1;}
.info_wrap:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
.info_wrap h3 {text-align: center; font-size: 20px; padding-bottom: 16px; background: url(../images/main/bar_info_tit.gif) 50% 100% no-repeat; margin-bottom: 19px; font-family: NSQ;}
.info_wrap > div {border: 1px solid #e8e8e8; padding: 24px 0;}

/* 고객센터 */
#customer {margin-bottom: 24px;}
#customer .contact li {text-align: center; line-height: 150%; margin-top: 10px;}
#customer .contact li:first-child {margin: 0;}
#customer .contact li span {font-family: NGB;}
#customer .contact li strong {font-family: NGB;}
#customer .col01 {color: #1986c6;}
#customer .col02 {color: #f5821f;}
#customer .col03 {color: #026f52;}

/* 견적문의 */
#esti {margin-bottom: 24px;}
#esti .sub {text-align: center; margin-bottom: 13px;}
#esti .btn_esti {background: #1986c6;}
#esti .btn_esti a {display: block; color: #fff; text-align: center; line-height: 40px; font-size: 14px;}
#esti .btn_esti a span {padding-right: 27px; display: inline-block; background: url(../images/main/btn_esti.gif) 100% 50% no-repeat;}

/* 파일 업로드 */
#upload .sub {text-align: center; margin-bottom: 13px;}
#upload .btn_upload {border: 1px solid #e8e8e8;}
#upload .btn_upload a {display: block; color: #282828; text-align: center; line-height: 38px; font-size: 14px;}
#upload .btn_upload a span {padding-right: 27px; display: inline-block; background: url(../images/main/btn_upload.gif) 100% 50% no-repeat;}

/* FOOTER */
#footwrap {background: #444; padding: 0 0 35px 0;}
#footwrap .foot_menu {height: 50px; border-bottom: 1px solid #666;}
#footwrap .foot_menu ul {*zoom:1; width: 100%; max-width: 1100px; margin: 0 auto; position: relative;}
#footwrap .foot_menu ul:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
#footwrap .foot_menu .admin {display: none;}
#footwrap .foot_menu li {float: left;}
#footwrap .foot_menu li a {color: #fff; font-family: NGB; display: inline-block; padding: 0 10px; line-height: 50px; background: url(../images/main/bar_foot_menu.gif) 0 50% no-repeat;}
#footwrap .foot_menu li:first-child a {background: none;}
#footwrap .address_wrap {padding: 28px; *zoom:1; max-width: 550px;}
#footwrap .address_wrap:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
#footwrap .address_wrap address {float: left; margin-right: 30px; margin-bottom: 8px; line-height: 120%; color: #d8d8dd; .width: 200px;}
#footwrap .address_wrap li {float: left; margin-right: 30px; margin-bottom: 8px; line-height: 120%; color: #d8d8dd;.width: 200px;}
#footwrap .address_wrap li span {color: #a9a9a9;}
#footwrap .address_wrap .copy {color: #858585; clear: both; text-transform: uppercase; padding-top: 4px;}
#footwrap .wd1200 {width: 100%; max-width: 1100px; margin: 0 auto; position: relative;}
#footwrap .flogo {display: none;}
#footwrap .top_btn {position: absolute; right: 0; top: 0; margin-top: -51px;}
#footwrap .top_btn a {display: block; width: 50px; height: 50px; background: url(../images/main/btn_top.gif) 0 0 no-repeat;}

@media only screen and (min-width:0) and (max-width:767px){

    /* GNB */
    #gnb {background:#1986c6; width:250px; height:100%; min-height:100%; position:fixed; top:0; right:0;color:#fff;z-index:100; overflow-y:auto;}
    #gnb .allbtnClose {z-index:102; width:100%; height: 40px; position:absolute; top:0; right:0;}
    #gnb .allbtnClose a {display:block; height: 40px; line-height: 40px; text-align: center; background: #454545; font-family: NGB; color: #fff;}

    #gnb .gnbList {position:absolute; width:100%; top:0; right: 0; margin:40px 0 0 0;}
    #gnb .gnbList .gmn>a {border-bottom:1px solid #5aa6d2; display:block; line-height:54px; font-size:18px; font-family:NSR; padding:0 0 0 25px; background:url(../images/main/mb_mn_bg.gif) no-repeat right center;color:#fff;}
    #gnb .gnbList .gmn:first-child>a { border-top:0;}
    #gnb .gnbList .gmn:hover>a{color:#fff;background: #0f5e8c url(../images/main/mb_mn_bg_a.gif) no-repeat right  center;}
    #gnb .gnbList .gmn .naviSub{display:none; background:#c8ebff; padding:12px 0;}
    #gnb .gnbList .gmn .naviSub ul>li>a {height:30px; line-height:30px; display:block; padding:0 0 0 36px; color:#282828; font-size:14px; background: url(../images/main/mb_mn_bg2.gif) no-repeat 25px 14px;}
    #gnb .gnbList .gmn .naviSub ul>li:hover a {color:#1986c6; font-family: NGB;}

   
}

@media only screen and (min-width:768px) and (max-width:1099px){

    /* HEADER */
    #mainheader .top_wrap {height: 107px; border-bottom: 1px solid #999999;}
    #mainheader h1 {width: 190px; margin-top: -26px;}

    #mainheader .qmenu {top: 108px; right: auto; left: 0; background: #f7f7f7;}
    #mainheader .qmenu .btn_search {display: none;}
    #mainheader .qmenu .allbtn a {border: 0; width: 53px; height: 53px;}
    
    #mainheader .top_ban {display: block; position: absolute; right: 14px; top: 50%; margin-top: -18px;}

    #mainheader .top_search {display: block; margin: 0 250px; padding-top: 38px;}
    #mainheader .search_wrap {border: 1px solid #d9d9d9; background: #fff; position: relative; height: 38px; overflow: hidden; position: relative;
        border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px;
    }
    #mainheader .search_wrap .input_box {padding:0 38px 0 10px; height: 38px;}
    #mainheader .search_wrap input[type=text] {border: 0; line-height: 34px; padding: 2px 0; width: 100%; font-size: 15px;}
    #mainheader .search_wrap button {width: 38px; height: 38px; border: 0; background: url(../images/main/btn_top_search.png) 50% 50% no-repeat; position: absolute; right: 0; top: 0;}

    /* GNB */
    #gnb {display: block; z-index: 100;}
    #gnb .allbtnClose {display: none;}

    #gnb .gnbList {*zoom:1; padding-left: 53px;}
    #gnb .gnbList:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
    #gnb .gnbList .gmn {float: left; line-height: 53px; width: 33.3%; .width: 33%; position: relative;}
    #gnb .gnbList .gmn > a {display: block; text-align: center; font-size: 17px; font-family: NSQ; font-weight: 600; background: url(../images/main/bar_gnb.gif) 0 50% no-repeat; line-height: 53px;}
    #gnb .gnbList .gmn:first-child > a {background: none;}

    #gnb .gnbList .gmn .naviSub {display: none; position: absolute; left: 0; top: 53px; width: 100%; z-index: 102; background: #fff;}
    #gnb .gnbList .gmn .naviSub ul {border: 1px solid #aaa9a9; border-top: 3px solid #f5821f; padding: 20px 0;}
    #gnb .gnbList .gmn .naviSub li {text-align: center; font-size: 14px; line-height: 250%;}
    #gnb .gnbList .gmn .naviSub li:hover a {font-family: NGB; color: #fff; background: #0f5e8c; display: block;}
    #gnb .gnbList .gmn:hover .naviSub {display: block;}

    /* VISUAL */
    #visual .visual_wrap {height: 306px;}
    #visual .vimg {height: 306px;}
    #visual .img01 {background: url(../images/main/main_mimg01-t.jpg) 50% 0 no-repeat;}
    #visual .img02 {background: url(../images/main/main_mimg02-t.jpg) 50% 0 no-repeat;}
    #visual .img03 {background: url(../images/main/main_mimg03-t.jpg) 50% 0 no-repeat;}

    /* 견적문의 */
    #esti {float: left; margin: 0; width: 49%;}
    #esti .btn_esti {margin: 0 24px;}

    /* 파일업로드 */
    #upload {float: right; width: 49%;}
    #upload .btn_upload {margin: 0 24px;}

    /* FOOTER */
    #footwrap .foot_menu li a {padding: 0 28px;}
    
}

/* pc layout */
@media only screen and (min-width:1100px) {

    /* HEADER */
    #mainheader .top_wrap {height: 107px; width: 1100px; margin: 0 auto; position: relative;}
    #mainheader h1 {width: 190px; margin-top: -26px;}

    #mainheader .qmenu {top: 108px; right: auto; left: 0; background: #f7f7f7;}
    #mainheader .qmenu .btn_search {display: none;}
    #mainheader .qmenu .allbtn a {border: 0; width: 53px; height: 53px;}
    
    #mainheader .top_ban {display: block; position: absolute; right: 14px; top: 50%; margin-top: -18px;}

    #mainheader .top_search {display: block; margin: 0 auto; padding-top: 38px; width: 400px;}
    #mainheader .search_wrap {border: 1px solid #d9d9d9; background: #fff; position: relative; height: 38px; overflow: hidden; position: relative;
        border-radius: 7px; -webkit-border-radius: 7px; -moz-border-radius: 7px; -o-border-radius: 7px; -ms-border-radius: 7px;
    }
    #mainheader .search_wrap .input_box {padding:0 38px 0 10px; height: 38px;}
    #mainheader .search_wrap input[type=text] {border: 0; line-height: 34px; padding: 2px 0; width: 100%; font-size: 15px;}
    #mainheader .search_wrap button {width: 38px; height: 38px; border: 0; background: url(../images/main/btn_top_search.png) 50% 50% no-repeat; position: absolute; right: 0; top: 0;}

    /* GNB */
    #gnb {display: block; border-top: 1px solid #999; z-index: 25;}
    #gnb .allbtnClose {display: none;}

    #gnb .gnbList {*zoom:1; padding-left: 53px; width: 1047px; margin: 0 auto; z-index: 30;}
    #gnb .gnbList:after {content:""; display: block; clear: both; overflow: hidden; height: 0;}
    #gnb .gnbList .gmn {float: left; width: 33.3%; .width: 33%; position: relative;}
    #gnb .gnbList .gmn > a {display: block; text-align: center; font-size: 17px; font-family: NSQ; font-weight: 600; background: url(../images/main/bar_gnb.gif) 0 50% no-repeat; line-height: 53px;}
    #gnb .gnbList .gmn:first-child > a {background: none;}
    
    #gnb .gnbList .gmn .naviSub {display: none; position: absolute; left: 0; top: 52px; width: 100%; z-index: 35; background: #fff;}
    #gnb .gnbList .gmn .naviSub ul {border: 1px solid #aaa9a9; border-top: 3px solid #f5821f; padding: 20px 0;}
    #gnb .gnbList .gmn .naviSub li {text-align: center; font-size: 14px; line-height: 250%;}
    #gnb .gnbList .gmn .naviSub li:hover a {font-family: NGB; color: #fff; background: #0f5e8c; display: block;}
    #gnb .gnbList .gmn:hover .naviSub {display: block;}

    /* VISUAL */
    #visual .visual_wrap {height: 550px;}
    #visual .vimg {height: 550px;}
    #visual .img01 {background: url(../images/main/main_mimg01-p.jpg) 50% 0 no-repeat;}
    #visual .img02 {background: url(../images/main/main_mimg02-p.jpg) 50% 0 no-repeat;}
    #visual .img03 {background: url(../images/main/main_mimg03-p.jpg) 50% 0 no-repeat;}

    #visual .slick-dots {right: auto; left: 50%; margin-left: 415px;}

    /* 포트폴리오 */
    #port .port_wrap {padding: 0; width: 1100px; margin: 0 auto;}
    #port .tit h3 {font-size: 25px;}

    /* 회사정보 */
    .info_wrap {padding: 50px 0; width: 1100px; margin: 0 auto;}
    .info_wrap h3 {text-align: left; background-position-x: 0; margin: 0 24px 24px 24px;}

    /* 고객센터 */
    #customer {float: left; width: 396px; margin:0 40px 0 0;}
    #customer .contact {padding: 0 24px;}
    #customer .contact li {text-align: left;}

    /* 견적문의 */
    #esti {float: left; margin: 0; width: 358px; margin: 0 40px 0 0;}
    #esti .btn_esti {margin: 0 24px;}
    #esti .sub {font-size: 14px; margin:0 24px 23px 24px; text-align: left;}

    /* 파일업로드 */
    #upload {float: right; width: 260px;}
    #upload .btn_upload {margin: 0 24px;}
    #upload .sub {font-size: 14px; margin:0 24px 23px 24px; text-align: left;}

    /* FOOTER */
    #footwrap .foot_menu li a {padding: 0 28px;}
    #footwrap .address_wrap {padding-left: 200px;}
    #footwrap .flogo {display: block; position: absolute; left: 15px; top: 36px;}
    #footwrap .top_btn {display: none;}
    #footwrap .foot_menu .admin {display: block; position: absolute; right: 0; top: 0;}
    #footwrap .foot_menu .admin a {background: none; border-left: 1px solid #666; border-right: 1px solid #666;}
    #footwrap .foot_menu .admin span {background: url(../images/main/btn_admin.gif) 0 50% no-repeat; display: inline-block; padding-left: 24px;}

}

/* LOWSET FIX */
@media only screen and (min-width:0) and (max-width:500px){

}



/* 포트퐁이로 FIX */
@media only screen and (min-width:660px) and (max-width:929px){
    #port .photo_area .photo_wrap {width: 50%; .width: 49.5%;}
}
@media only screen and (min-width:930px) {
    #port .photo_area .photo_wrap {width: 33.3%; .width: 33%;}
}