@charset "utf-8";
/* 공통 */
table.viewType {width:100%; border-top:1px solid #000;}
table.viewType th {background:#fafafa; font-weight:400; text-align:left;}
table.viewType td {border-right:1px solid #e4e4e4; font-weight:300;}
table.viewType th, table.viewType td {padding:10px 20px; border-left:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4; color:#333;}

.viewConBox table {border-collapse:collapse; border-spacing:0; max-width:100%;}
.viewConBox img {max-width:100%;}
.viewConBox iframe {max-width:100%;}

/* form */
form.type1 {margin:0; padding:0; font-weight:normal;}
form.type1 * {box-shadow:none;}
form.type1 input[type="text"],input[type="password"],input[type="textarea"],input[type="number"],textarea,select {
	display:inline-block; width:100%; height:40px; padding:5px 20px; margin:0; vertical-align:middle; line-height:1; outline:none!important; background-color:#fff; float:inherit;
}
form.type1 input:focus, textarea:focus {border:1px solid #888; background-color:#fff !important;}
form.type1 select {
	cursor:pointer; padding:5px 20px;
	background-image:url(/images/common/i-select.png);
	background-repeat:no-repeat;
	background-position:90% 50%;
	-moz-appearance:none; /* Firefox */
	-webkit-appearance:none; /* Safari and Chrome */
	appearance:none;
	clear:left !important;
}
form.type1 textarea {min-height:175px; line-height:1.6; width:100%; max-width:1200px;}
input[type="file"] {height:50px !important; border:1px solid #ddd; padding:6px; width:100%;}
input[type="text"] {padding-left:10px;-webkit-appearance: none;}
input[type="radio"],
input[type="checkbox"] {vertical-align:middle !important; margin-top:0;}
input[type="radio"]+span,
input[type="checkbox"]+span {vertical-align:middle;}

input[readonly],input[disable] {background-color:#ccc !important;}
input[type="text"], input[type="date"], input[type="password"], select {height:40px; border: 1px solid #ddd; padding:0 10px; width:100%; box-sizing:border-box;}

/* 검색영역 */
.searchWrap {display:flex; justify-content:flex-end;}
.searchWrap p {font-size:18px; color:#000;}
.searchWrap p span {color:var(--red); font-weight:600;}
.searchWrap form {position:relative; font-size:0;}
.searchWrap form.type1 select {width:140px; height:40px; padding:8px 14px; font-size:16px; border-right:0;}
.searchWrap form.type1 input {width:400px; height:40px; font-size:16px; color:#999;}
.searchWrap .search {width:40px; height:40px; position:absolute; top:0; right:0; background-color:transparent; z-index:9; border-left:1px solid #ddd;}
.searchWrap .search a {display:block; width:100%; height:100%; background:url(/images/common/i-search.png) no-repeat 50% 50% transparent;}

/* 페이징 PC */
.page_box {position:relative; text-align:center; border:1px solid transparent;}
.page_box .pc.pagination {display:inline-block;}
.page_box .pc.pagination>li>a {text-align:center; color:#333; border:1px solid #ddd; height:40px; line-height:1; display: flex; align-items: center; justify-content: center;}
.page_box .pc.pagination>li>a.active {background:var(--base1); color:#fff; border:1px solid var(--base1); font-weight:normal;}
.page_box .pc.pagination .first,
.page_box .pc.pagination .prev,
.page_box .pc.pagination .next,
.page_box .pc.pagination .last {color:#333; background-color:#fff;}
.page_box .pc.pagination .first:hover,
.page_box .pc.pagination .prev:hover,
.page_box .pc.pagination .next:hover,
.page_box .pc.pagination .last:hover {background:#f0f0f0}
.pc.pagination .write {display:inline-block; height:40px; line-height:1; margin-left:5px; padding:12px 15px; color:#fff;}
.page_box .pc.pagination .write:hover {background:#333; color:#fff !important;}
.pagination >li:first-child >a, .pagination>li:last-child>a {border-radius:0;}

.page_box {width:100%; margin-top:30px!important; line-height:1; font-size:14px; font-weight:normal; text-align:center;}
.page_box .pc .prev {margin-right:10px;}
.page_box .pc .next {margin-left:10px;}
.page_box .pc {display:inline-block;}
.page_box .pc li {float:left; margin-left:-1px;}
.page_box .pc li a {display:block; padding:12px 15px; border:1px solid rgba(0,0,0,.15); background:#fff; color:#000;}
.page_box .pc li a:hover {background:#f0f0f0;}
.page_box .pc li a.active {background:#333; color:#fff; border-color:#333;}

.project ul.list {margin-top:30px;}
.project ul.list li {display:flex; align-items: center; padding-left:35px; background:#fff; border:2px solid #eee; border-radius:20px; margin-bottom: 15px; transition:all 0.3s;}
.project ul.list li:hover {transition:.3s; border:2px solid var(--base1);}
.project ul.list li:hover .num {color:#666;; transition:.3s;}
.project ul.list li:hover .img img {/*border-radius:15px !important;*/ transition:.6s;} 
.project ul.list li .num {color:#999; font-weight:600;}
.project ul.list li .img {width:100%; max-width:280px; height:100px;}
.project ul.list li .img img {width:100%; height:100%; object-fit:contain; background:#fff; padding:20px 50px; box-sizing: border-box;}
.project ul.list li .sub {width:100%; padding:20px 35px 20px 0;}
.project ul.list li .sub h3 {font-size:20px; line-height:1.2; color:var(--base1); padding-bottom:10px; font-weight:600;}
.project ul.list li .sub dl {color:#666; display:flex; flex-wrap: wrap; gap:5px 30px;}
.project ul.list li .sub dl dd {position:relative; padding-left:10px; font-size:15px; color:#707070;}
.project ul.list li:hover .sub dl dd {color:#333;}
.project ul.list li .sub dl dd:first-child {max-width:280px;}
.project ul.list li .sub dl dd:before {
	position: absolute;
    top: 13px;
    left: -1px;
    content: "";
    width: 5px;
    height: 2px;
    border-radius: 100px;
    background: #7c7c7c;
}
.project ul.list li .sub dl dd span:before {content:":"; margin-right:5px;}


/* ************************ 태블릿 이하(~1249) ************************ */
@media (max-width: 1249px) {
	/* 검색영역 */
	.searchWrap form {gap:5px;}
	
	.contents .inner {padding:0 30px;}
	.contents .sub-inner {padding:0 30px;}
	
	/* 페이징 MOBILE */
	.page_box {position:relative; margin-top:30px; text-align:center;}
	.page_box .mobile label {display:none;}
	.page_box .mobile {display:inline-block; margin:0; padding:0;}
	.page_box .mobile>li {float:left; height:100%;}
	.page_box .mobile>li:last-child {padding-right:0;}
	.page_box .mobile .prev {display:block; min-width:34px; height:40px; background:url(/img/common_responsive/prev.png) no-repeat 50% #fff !important; border:1px solid #dedede; border-radius:0; border-right:0;}
	.page_box .mobile .next {display:block; min-width:34px; height:40px; background:url(/img/common_responsive/next.png) no-repeat 50% #fff !important; border:1px solid #dedede; border-radius:0; border-right:0;}
	.page_box .mobile .write:hover {background:#000; color:#fff !important;}
	.page_box .mobile .form-control  {border:1px solid #dedede; border-radius:0;}
	.page_box .mobile .dropdown-toggle:hover {border-radius:0 !important;}
	.page_box .mobile .btn-default  {border:0; height:32px !important;}	
	.mobile select#page {border-radius:0 !important; height:40px !important; border:1px solid #dedede!important; min-width:50px;}
	.page_box .mobile select {padding:8px 45px 8px 20px !important; background: url(/images/common/i-select.png) no-repeat 80% 48% / 10px auto;}

}

/* ************************ 태블릿 이하(~991) ************************ */
@media (max-width: 991px) {
	/* **** Project ***** */
	.project ul.list li {flex-direction: column; gap:10px; padding:20px; align-items: center;}
	.project ul.list li .num {display:none;}
	.project ul.list li .sub h3 {padding-top:0; line-height:1.3; font-size:18px; padding-bottom:15px;}
	.project ul.list li .img {height:80px;}
	.project ul.list li .img img {border:none; padding:10px 40px;}
	.project ul.list li .sub {padding:0 30px 0; box-sizing:border-box;}
	.project ul.list li .sub dl {flex-direction: column;}
	.project ul.list li .sub dl dd {width:100%; font-size:14px;}
	.project ul.list li .sub dl dd:before {top:10px; left:0;}
	
}

/* ************************ 모바일 ************************ */
@media (max-width: 767px) { 
	.tabInner .tabItem {margin-top:30px;}
	
	.contents .inner {padding:0 20px;}
	.contents .sub-inner {padding:0 20px;}
	
	.project ul.list li .sub {padding:0;}
	/* 검색영역 */
	.searchWrap {flex-direction:column; row-gap:10px; align-items:flex-start;}
	.searchWrap form {width:100%;}
	.searchWrap form.type1 select {width:100%; background-position:right 15px center; border-right:1px solid #ddd;}
	.searchWrap form.type1 input {width:100%; font-size:15px; padding:8px 14px; border-top:0;}
	.searchWrap .search {width:45px; bottom:0; top:auto;}
	
	

}

/* ************************ 모바일 ************************ */
@media (max-width: 500px) { 
	.searchWrap form {flex-direction:column;}
	.searchWrap .search a {background-size:17px;}
}