

@media only screen and (max-width: 767px) {

/*주요사례 - 탭메뉴*/
.tab-category { float:left; width:100%; border:1px solid #ccc; border-width: 1px 0px 0px 1px; }
.tab-category * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.tab-category-list li { float:left; width:calc(100%/2); border:1px solid #ccc; border-width:0px 0 1px 1px; }
.tab-category-list li a { display:block; width:100%; padding:5px 0; font-size:15px; text-align:center;  }
.tab-category-list li:nth-child(2) {  border-right:1px solid #ccc; }
.tab-category-list li:nth-child(4) {  border-right:1px solid #ccc; }
.tab-category-list li:nth-child(6) {  border-right:1px solid #ccc; }
.tab-category-list li:last-child { border-right:1px solid #ccc; border-bottom:1px solid #ccc;; }
.tab-category-list li.active a {  background:#2f3b55; color:#fff;   }

}

@media only screen and (min-width: 768px) and (max-width: 1400px) {

/*주요사례 - 탭메뉴*/
.tab-category { float:left; width:100%; border:1px solid #ccc; border-width: 1px 0px 0px 1px; }
.tab-category * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.tab-category-list li { float:left; width:calc(100%/4); border:1px solid #ccc; border-width:0px 0 1px 1px; }
.tab-category-list li a { display:block; width:100%; padding:10px 0; font-size:16px; text-align:center;  }
.tab-category-list li:nth-child(4) { border-bottom:1px solid #ccc; border-right:1px solid #ccc;  }
.tab-category-list li:last-child { border-right:1px solid #ccc; }
.tab-category-list li.active a {  background:#2f3b55; color:#fff;   }

}

@media only screen and (min-width: 1400px) {

/*주요사례 - 탭메뉴*/
.tab-category { float:left; width:100%;  }
.tab-category * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.tab-category-list li { float:left; width:calc(100%/7); border:1px solid #ccc; border-width:1px 0 1px 1px; }
.tab-category-list li a { display:block; width:100%; padding:15px 0; font-size:16px; text-align:center;  }
.tab-category-list li:last-child { border-right:1px solid #ccc; }
.tab-category-list li.active a {  background:#2f3b55; color:#fff;   }

}

.now_page { display:none; }




@media only screen and (max-width: 767px) {

/*주요사례 - 검색부분*/
.search_top_wrap { float:left; width:100%; margin:30px 0; }
.search_top ul { width:100%; max-width:1000px; margin:0 auto; }
.search_top ul li { float:left; box-sizing:border-box; }
.search_top .le { width:100%; margin: 0 0 10px 0; }
.search_top .ri { width:100%; }

.search_top .se_sel { width: calc(100% - 10px); height:50px; border-radius:10px; padding:0 20px; font-size:15px;
-webkit-appearance: none;
-moz-appearance: none; 
  appearance: none;
position: relative; 
background: url('/images/new/sel_arrow.png') no-repeat right 20px center;
}

.search_top .se_inp {width: calc(100% - 160px); height: 50px;line-height: 50px; text-indent: 20px; 
font-size:15px; border: none; background: #eee; border-radius:10px; }
.search_top .btn_search { position:relative; border: none; cursor:pointer; vertical-align:middle;
background:#111; font-size:15px; color:#fff; font-weight:500; border-radius:10px; padding:13px 20px;  }
.search_top .btn_reset{ position:relative; border: none; cursor:pointer; vertical-align:middle;
background:#ddd; font-size:15px; font-weight:500; border-radius:10px; padding:13px 12px;  }

}

@media only screen and (min-width: 768px) {

/*주요사례 - 검색부분*/
.search_top_wrap { float:left; width:100%; margin:30px 0; }
.search_top ul { width:100%; max-width:1000px; margin:0 auto; }
.search_top ul li { float:left; box-sizing:border-box; }
.search_top .le { width:20%; }
.search_top .ri { width:80%; }

.search_top .se_sel { width: calc(100% - 10px); height:50px; border-radius:10px; padding:0 20px; font-size:16px;
-webkit-appearance: none;
  -moz-appearance: none; 
  appearance: none;
position: relative; 
background: url('/images/new/sel_arrow.png') no-repeat right 20px center;
}

.search_top .se_inp {width: calc(100% - 160px); height: 50px;line-height: 50px; text-indent: 20px; 
font-size:16px; border: none; background: #eee; border-radius:10px; }
.search_top .btn_search { position:relative; border: none; cursor:pointer; vertical-align:middle;
background:#111; font-size:16px; color:#fff; font-weight:500; border-radius:10px; padding:13px 20px;  }
.search_top .btn_reset{ position:relative; border: none; cursor:pointer; vertical-align:middle;
background:#ddd; font-size:16px; font-weight:500; border-radius:10px; padding:13px 12px;  }

}


/*BOARD(게시판)*/
.tbl_board_wrap { float:left; width:100%; margin-bottom:0px; }
.tbl_board { width:100%; }
.tbl_board thead tr th {  background:#fafafa;  font-size:16px; font-weight:500; color:#000; padding:15px 0px; 
border-top:3px solid #333; border-bottom:1px solid #ccc; }
.tbl_board thead tr th:first-child { border-left:none;  }
.tbl_board tbody tr th { font-size:16px; font-weight:500; color:#000; border-bottom:1px solid #ccc;  }
.tbl_board tbody tr td { padding:15px 10px; font-size:16px; color:#333; border:1px solid #ccc; border-width:0 0 1px 1px; text-align:center; vertical-align:middle;  }
.tbl_board tbody tr td a { color:#333; transition: all ease 0.3s; }
.tbl_board tbody tr td a:hover { color:#2f3b55;   }
.tbl_board tbody tr td:first-child { border-left:none;  }
.tbl_board tbody tr td img { vertical-align:middle; margin-top:-5px; }

/* paging */
.paging { float:left; width:100%; margin:30px 0 0px 0; text-align:center; }
.paging * {vertical-align:top; }
.paging a { display:inline-block; font-size:12px; padding:0 2px;margin:0 0px; height:27px; min-width:25px;line-height:27px;text-align:center; color:#555; border:1px solid #ccc;}
.paging b { display:inline-block; font-size:12px; color:#fff; background:#000; border:1px solid #000; padding:0 2px; margin:0 1px; width:25px; height:27px; min-width:25px; line-height:27px; text-align:center;   }

.paging a.icon_no {position:relative;padding:0}
.paging a.icon_no:before {position:absolute;top:9px;left:7px}

.paging a.icon_prev {background:url('/images/icon_le.gif') no-repeat 5px 7px;}
.paging a.icon_prev2 {background:url('/images/icon_le2.gif') no-repeat 5px 7px;}
.paging a.icon_next {background:url('/images/icon_ri.gif') no-repeat 5px 7px; }
.paging a.icon_next2 {background:url('/images/icon_ri2.gif') no-repeat 5px 7px;}



/*BOARD(뷰페이지)*/
.tbl_board_view { float:left; width:100%;    }
.view_title { width:100%; text-align:left; padding: 0 0 0 15px; color:#000;  height:45px;  vertical-align: middle;}
.view_title thead th {  padding:20px 10px; text-align:center; font-size:25px; font-weight:500; color:#000; background:#fafafa;  vertical-align: middle; border-top:3px solid #333; border-bottom:1px solid #ccc;   }
.view_title tbody th {  padding:15px 0px; vertical-align:middle; font-size:16px; font-weight:500; color:#000; background:#fff;  text-align:center; line-height:25px; border-bottom:1px solid #ccc;   }
.view_title tbody th span { float:right; text-align:right; }
.view_title tbody td {  padding:15px 10px; font-size:16px; color:#333; border-bottom:1px solid #ccc;  }
.view_title tbody td a { color:#333; transition: all ease 0.3s; }
.view_title tbody td a:hover { color:#2f3b55;  }

.view { width:100%; text-align:left; padding: 0 0 0 15px; border-bottom:1px solid #555; color:#000;    vertical-align: middle;}
.view th { padding:15px 0; text-align:center; font-size:16px; font-weight:500; color:#000; background:#f8f8f8; 
vertical-align: middle; text-align:center; border-bottom:1px solid #ccc; }
.view td {  vertical-align:middle; border-bottom:1px solid #ccc;     }

.view .tbl_left { font-size:16px; text-align:left; padding:15px 20px; }
.view a { color:#333; transition: all ease 0.3s; }
.view a:hover { color:#2f3b55; }

.board_view_btn { float:left; width:100%; margin:30px 0 0 0; text-align:center; }
.btn_list { display:inline-block; *zoom:1; *display:inline; width:100px; height:40px; line-height:40px; background:#333; font-size:15px; font-weight:400; color:#fff;  border-radius:3px; text-align:center; vertical-align:middle; border:none;cursor:pointer; transition: all ease 0.3s; }
.btn_list:hover { color:#fff; text-decoration:none; background:#2f3b55; }


/*문의하기*/

@media only screen and (max-width: 767px) {

.enq_wrap { float:left; width:100%;   }
.enq_le { float:left; width:100%; height:250px; box-sizing:border-box;  background:#e6e5e0 url('/images/new/enq_img.jpg') no-repeat center top; border-radius:30px 0 30px 0; margin:0 0 30px 0; }
.enq_ri { float:right; width:100%; box-sizing:border-box;  }

}

@media only screen and (min-width: 768px) {

.enq_wrap { float:left; width:100%;   }
.enq_le { float:left; width:30%; height:600px; box-sizing:border-box;  background:#ccc url('/images/new/enq_img.jpg') no-repeat center bottom; border-radius:30px 0 30px 0; }
.enq_ri { float:right; width:65%; box-sizing:border-box;  }

}



/* form starting stylings ------------------------------- */
.group {
    position: relative;
    margin-bottom: 45px;
}

.group input {
    font-size: 16px;
    padding: 10px 10px 10px 5px;
    display: block;
    width: 100%;
    border: none;
    border-bottom: 1px solid #757575;
    box-sizing: border-box;
}
.group input:focus {
    outline: none;
}

/* LABEL ======================================= */
.group label {
    color: #999;
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 5px;
    top: 10px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

/* active state */
.group input:focus ~ label,
.group input:valid ~ label {
    top: -20px;
    font-size: 14px;
    color: #000;
}

/* BOTTOM BARS ================================= */
.group .bar {
    position: relative;
    display: block;
    width: 100%;
}
.group .bar:before,
.group .bar:after {
    content: "";
    height: 2px;
    width: 0;
    bottom: 1px;
    position: absolute;
    background: #000;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}
.group .bar:before {
    left: 50%;
}
.group .bar:after {
    right: 50%;
}

/* active state */
.group input:focus ~ .bar:before,
.group input:focus ~ .bar:after {
    width: 50%;
}

/* HIGHLIGHTER ================================== */
.group .highlight {
    position: absolute;
    height: 60%;
    width: 100px;
    top: 25%;
    left: 0;
    pointer-events: none;
    opacity: 0.5;
}

/* active state */
.group input:focus ~ .highlight {
    -webkit-animation: inputHighlighter 0.3s ease;
    -moz-animation: inputHighlighter 0.3s ease;
    animation: inputHighlighter 0.3s ease;
}

.img_txt {
    font-size: 16px;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from {
        background: #000;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@-moz-keyframes inputHighlighter {
    from {
        background: #000;
    }
    to {
        width: 0;
        background: transparent;
    }
}
@keyframes inputHighlighter {
    from {
        background: #000;
    }
    to {
        width: 0;
        background: transparent;
    }
}

.checkbox_wrap {
    width: 100%;
    display: flex;
    align-items: center;
	margin-top:10px;
}
.checkbox_wrap input {
    height: 35px;
}
.checkbox_wrap p {
    font-size: 14px;
    font-weight: 400;
    color: #333;
}

.group2 ul li {
    position: relative;
    margin-bottom: 45px;
}

.group2 ul li .le { margin:0 0 10px 0; font-size: 16px; color:#000; }

.group2 textarea {
    width: 100%;
    overflow-y: auto;
    font-size: 14px;
	font-weight:300;
    color: #000;
    border: 1px solid #ccc;
    background: transparent;
}
.btn_request {
    display: flex;
    justify-content: center;
    margin-top: 0px;
}

.btn_enq { display:inline-block; *zoom:1; *display:inline; width:200px; height:40px; line-height:40px; background:#2f3b55; font-size:16px; font-weight:400; color:#fff;  border-radius:5px; text-align:center; vertical-align:middle; border:none;cursor:pointer; transition: all ease 0.3s; }
.btn_enq:hover { color:#fff; text-decoration:none; background:#000; }

.group label b { color:#ff0000; }
.group2 ul li .le b { color:#ff0000;  }
.enq_ri .txt b {  color:#ff0000; }
.enq_ri .txt { width:100%; text-align:right; margin:0 0 10px 0; }




/*개인정보처리방침*/
.term_wrap { float:left; width:100%; }
.term_w { padding:30px; border:1px solid #ccc;  }
.term_toptxt {  float:left; width:100%; font-size:20px; color:#000; font-weight:600; text-align:center;  padding:15px 0; 
margin: 0 0 30px 0; box-sizing:border-box;  background:#ecf7fb; border:1px solid #c1ecfa;   }
.term_tit { width:100%; font-size:16px; font-weight:600; color:#263357; padding:10px 0; padding:20px 0 10px 0; margin-bottom:15px; border-bottom:2px solid #c1ecfa;  }
.term_txt { width:100%; padding-top:30px;  }
.term_txt h2 { font-size:16px; font-weight:bold;  color:#000; padding-bottom:10px;  }
.dec {position:relative; display:block; font-size:15px; line-height:22px; color:#3e3a39; padding:0px 0 10px 25px;  word-break:keep-all; }
.dec .no {position:absolute; left:0; top:0;  }
.dec b { font-weight:500; }
.dec_so {position:relative; display:block; font-size:14px; line-height:22px; color:#3e3a39; padding-left:40px; }
.dec_so .no {position:absolute; left:20px; top:0;}
.dec_so2 {position:relative; display:block; font-size:14px; line-height:22px; color:#3e3a39; padding-left:25px; }
.dec_so2 .no {position:absolute; left:15px; top:0;}
.term_txt .mt20 { margin-top:20px; }

.term_txt_bottom { width:100%; border:1px solid #ccc; border-width:1px 0; padding:10px 0; margin:30px 0 0 0; }
.term_txt_bottom h2 { font-size:16px; color:#333; padding-bottom:5px;   }

.tbl_typeP {width:100%; padding:0; margin:0; letter-spacing:0px; word-break:keep-all; font-size:14px; }
.tbl_typeP th { background-color:#f8f8f8; text-align:center; color:#333; font-weight:500; vertical-align: middle; border:1px solid #ccc;}
.tbl_typeP td { padding:10px; vertical-align: middle; border:1px solid #ccc;  }

.tbl_typeP2 {width:100%; padding:0; margin:0; letter-spacing:0px; word-break:keep-all; font-size:14px; }
.tbl_typeP2 th { background-color:#f8f8f8; text-align:center; color:#333; font-weight:500; vertical-align: middle; border:1px solid #ccc;}
.tbl_typeP2 td { padding:10px; text-align:center;  vertical-align: middle; border:1px solid #ccc;  }