/* 제품소개와 시공사례 공통 레이아웃입니다.*/
.project_top{
    margin-bottom: 100px;
}

/*  상단 서브메뉴 */
#topMenu{position:relative; width:100%; height:calc(var(--sub-menu-height) + 1px); -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;} /* (+1 border height)*/
#topMenu .side-menu-inner{position: relative; text-align:center; width:100%; height:var(--sub-menu-height); background-color: #fff;}
#topMenu .side-menu-inner ul{position: relative; display:flex; align-items:center; gap: 40px;}
#topMenu .side-menu-inner ul li{ margin-right: 0;} /* max-width 자유롭게 수정 */
#topMenu .side-menu-inner ul li > a{
	display:block; 
	display:table; 
	position:relative;
	width:100%;
	height:var(--sub-menu-height);
	line-height:1.2; 
	color:#ccc; 
	font-size:20px; 
	letter-spacing:-0.25px; 
	font-weight:700; 
	word-break:keep-all;
	-webkit-transition:all 0.4s;
	transition:all 0.4s;
	text-transform: uppercase;
}
#topMenu .side-menu-inner ul li > a > span{display:table-cell; vertical-align:middle; }
#topMenu .side-menu-inner ul li:hover > a, 
#topMenu .side-menu-inner ul li.on > a{color:#19708f;}

.sub-menu-move-line{
	position:absolute; bottom: 0; left: 0; z-index: 10000; opacity: 1; top: auto;
	width:100%;
	height:4px;
	transition: all .3s;
}
.sub-menu-move-line span{
	position: absolute; bottom: 0; left: 0;
	display: block; 
	height:4px;
	background-color:#19708f;
	-webkit-transition:background-color 0.4s;
	transition:background-color 0.4s;
}

@media screen and (max-width:800px){
    .project_top{
        margin-bottom: 50px;
    }
  #topMenu .side-menu-inner ul li > a{
    height: auto;
  }
  #topMenu .side-menu-inner ul{gap: 10px; flex-wrap: wrap;}

  #topMenu .side-menu-inner ul li > a{
    font-size: 14px;
  }

}

.project-list {   width: 100%; gap:30px 10px;	display:flex;  flex-wrap:wrap; margin-bottom: 100px;}
.project-list .picture { width: calc( 25% - 10px);  position:relative; overflow:hidden;}
.project-list .picture:nth-child(3n){margin-right:0;}
.project-list .picture a{display:block; position:relative;  background:transparent; width:100%; padding-bottom:80%; transition: all 0.3s;}
.project-list .picture p{transition:all ease .3s;}
.project-list .picture img {  height: 100%;  width: 100%;position:absolute; left:0; top:0; object-fit:contain;vertical-align:top; transition:all ease .3s; } 
/* .project-list .picture a:hover{background: #000;} */
.project-list .picture a:hover img{ transform:scale(1.1);}

.project-list .picture a:hover p{
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
} 

@media screen and (min-width:821px){
	.project-list .picture a:hover p{
		padding-left:50px;
		background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
	} 
	
}



.project-list .picture p{font-size:16px; color:#fff; padding:100px 10px 40px; position:absolute; left:0; bottom:0; font-weight:500; width:100%;     background: linear-gradient(transparent, rgba(0,0,0,0.5));} 
.project-more a{display:block; width:80px; margin:30px auto; color:#111; text-align:center; font-weight:700;}
.project-more .plus{width:60px; height:60px; position:relative; display:block; margin:0 auto 20px;}
.project-more .plus:after{content:''; width:2px; height:60px; position:absolute; left:50%;   margin-left:-1px; top:0;background:#eb2a2e;}
.project-more .plus:before{content:''; width:60px; height:2px; position:absolute; top:50%;   margin-top:-1px; left:0;background:#eb2a2e;}

@media screen and (max-width:1080px) {
    .project-list{gap: 20px 10px;}
    .project-list .picture p{font-size: 14px; padding:40px 10px 20px; }
}

@media screen and (max-width:820px) {
	
    .project-list{gap: 10px 2%; margin-bottom: 50px;justify-content: space-around;}
    .project-list .picture { width:48%;}
    .project-list .picture p{font-size: 14px; padding:20px 10px 10px; }

}





/* 제품소개 view */

.board-view .sub-txt{margin-bottom:50px; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
.board-view .sub-txt h3{font-size:45px; line-height:1.3; color:#111;}

.customer .board-view .sub-txt {padding-bottom: 0; border-bottom: none;}

.board-view h4{font-size:34px; color:#111; font-weight:500; margin-bottom:20px;}
.board-view  p{line-height:1.8;}
.board-view .prj-info{display:flex;  justify-content:space-between;  width:100%; padding:50px 0 100px; gap: 50px;} 
.board-view .prj-info .img{width:70%; max-width:977px;}
.board-view .prj-info img {max-width: 100%; max-height: 600px; display: block; margin: 0 auto 30px;}
.board-view .prj-info .txt{width:30%;  max-width:327px;}
.board-view .prj-info .txt h4{font-size:30px; border-bottom:1px solid #ddd; display:block;    font-weight:500; color:#111; padding-bottom: 10px;}
.board-view .prj-info .txt h4 span{ padding-bottom:10px;border-bottom:2px solid #19708f; margin-bottom:-1px;}
.board-view .prj-info .txt p{font-size:15px; margin:15px 0; position:relative;  color:#111; font-weight:600;min-height:27px;} 
.board-view .prj-info .txt b{ color:#999999; font-size:1.1em; display: block; font-weight:500;}

.board-view .prj-info .txt p a:hover {
	color: #19708f;
}

.board-view .prj-info .txt p:last-child{padding: 0;}


.board-view .project_dis{
	width: 100%;
	margin: 0 0 100px;
}


.customer .board-view .project_dis{
	width: 100%;
	margin:0;
	padding: 50px 0 100px;
}

.board-view .project_dis img{
	display: block;
	margin-bottom: 20px;
}
.board-view .project_dis p {
	margin-bottom: 10px;
}

/* view 타이틀2 */
.board-view .board-view_top .subInfo { padding:0px 0px 40px; border-bottom:1px solid #ddd;   display: flex;  justify-content: space-between;}
.board-view .board-view_top .subInfo ul {display:inline-block;overflow:hidden;}
.board-view .board-view_top .subInfo ul li {float:left; padding-right:20px;  font-size:16px;line-height:1.6;}
.board-view .board-view_top .subInfo ul li+li {position:relative; padding-left:20px;}
.board-view .board-view_top .subInfo ul li+li:after{content:''; width:1px; height:14px; background:#ddd; position:absolute; left:0; top:50%; margin-top:-7px;}
.board-view .board-view_top dt {float:left;padding-right:15px;color:#333; font-weight:600;}
.board-view .board-view_top dd {color:#707070;float:left;} 
.board-view .viewArea .viewCont {padding:50px ;font-size:16px;color:#666;line-height:1.6;word-wrap:break-word;}


/* ----------------------- 게시판 상세보기 ----------------------- */
.project_paging {display:inline-block;width:100%;margin:0 auto 150px;}
.project_paging .bottomBtn{width:180px; margin:0 auto; display: block; text-align:center;}
.project_paging .bottomBtn .btnList{color:#19708f; border:2px solid #19708f; display:block; height:60px; line-height:54px; font-size:16px; font-weight:600;}
.project_paging .bottomBtn .btnList:hover{background-color: #19708f;color: #fff;transition: all 0.5s;}


.project_paging .preViewTitle {   position:relative; display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.project_paging .preViewTitle dl { opacity:.5;} 
.project_paging .preViewTitle dl.left dt{ padding-right:30px;}
.project_paging .preViewTitle dl.right dt{padding-left:30px;}
.project_paging .preViewTitle dl dt { font-size:18px;color:#111; font-weight:700;}
.project_paging .preViewTitle dl dt.prev:before {content:"←";padding:0 15px 0 0;}
.project_paging .preViewTitle dl dt.next:after {content:"→";padding:0 0 0 15px;}
.project_paging .preViewTitle dl dd {line-height:1.6;font-size:16px;color:#111;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.project_paging .preViewTitle dl dd > a {color:#333;}
.project_paging .preViewTitle dl:hover{opacity:1;}



@media screen and (max-width:1280px) {
    .board-view .sub-txt h3{font-size:32px;}
    .board-view .prj-info{flex-direction: column; align-items:flex-start;}
    .board-view .prj-info .img{width:100%; max-width:100%;}
	.board-view .prj-info .txt{width:100%;  max-width:100%;}
 }

 @media(max-width:1024px){
    .project_paging .preViewTitle dl dd{width: 120px;}
    .project_paging .bottomBtn .btnList{ height: 54px;  line-height: 50px;}
}


@media screen and (max-width:820px) {
   .board-view .sub-txt{margin-bottom:30px; padding-bottom: 30px;}
   .board-view .sub-txt h3{font-size:24px;}
   .board-view .project_dis{
	margin: 0 0 50px;
}
.customer .board-view .project_dis{
	padding: 30px 0 50px;
}
	.board-view .prj-info .txt h4{font-size:24px; width: 100%; max-width: 327px;}
	.board-view p{font-size:14px; margin-bottom:10px;}
	.board-view .prj-info{padding:20px 0; border-bottom: 1px solid #ddd; margin-bottom: 50px;}
	.board-view .prj-info .img{width:100%; margin-bottom:20px;}
	.board-view .prj-info .txt{width:100%; }
	.board-view h4{font-size:20px;}

    .project_paging .board-view_top h4{padding:0  ; font-size:24px;} 
	.project_paging .board-view_top .subInfo{padding:20px 0;}
	.project_paging .board-view_top .subInfo ul li{font-size:14px;}
	.project_paging .viewArea .viewCont{padding:30px 0;}
	.project_paging .preViewTitle dl dt{font-size:14px;}
    .project_paging .preViewTitle dl dt.prev:before {content:"←";padding:0 10px 0 0;}
	.project_paging .preViewTitle dl dt.next:after {content:"→";padding:0 0 0 10px;}
	.project_paging .preViewTitle dl dd{display:none;}
	.project_paging .bottomBtn .btnList{ height: 54px;  line-height: 50px;}

}

@media screen and (max-width:480px) {
	.board-view .board-view_top .subInfo ul li+li{padding-left: 0; float: none; display: block;}
	.board-view .board-view_top .subInfo ul li+li:after{
		display: none;
	}
    .board-view .prj-info .txt p{
        padding-left: 0;
        line-height: 1.5;
    }

    .board-view .prj-info .txt b{
        position: static;
        display: block;
    }


}






/* 공지사항 */

/* select box setting */
div.dv-select {display:inline-block;*display: inline;zoom:1;position:relative;width:100%;height:35px;padding:0;border: 1px solid #d8d8d8;background:#fff;box-sizing:border-box;overflow:hidden;}
div.dv-select > label {display:inline-block; opacity:0; *display: inline;zoom:1;position:absolute;top:0;right:0;width:100%;line-height:35px;margin:0;padding:0 35px 0 10px;font-size:12px;color:#666; background:transparent;box-sizing:border-box;cursor:pointer;}
div.dv-select > span.spn-sel-arrow {display:block;position:absolute;top:-1px;right:-1px;width:35px;height:35px;margin:0;padding:0;background:url(/images/common/sel-arrow.png) no-repeat;background-size:20px;background-position:center;box-sizing:border-box;cursor:pointer;}
div.dv-select > select {position:relative;width:100%;height:35px;padding:0 35px 0 10px;border:none;background:none;outline:none; -webkit-appearance:none;filter:alpha(opacity=0);z-index:1; color:#666; font-weight:300; font-size:13px; }


.boardListArea{display:block;width:100%;max-width:1280px;margin:0 auto;padding:0;box-sizing:border-box; margin-top: 100px;} 
.boardList .boardList-Top{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; margin-bottom: 20px;}
.boardList .boardList-Top .total{color:#111; font-size:18px; font-weight:500;}
.boardList .boardList-Top .total span{vertical-align:baseline;color: #19708f;}



.boardList .posting-list ul{border-top: 2px solid #000;margin-bottom: 60px;}
.boardList .posting-list ul .top{padding: 30px}
.boardList .posting-list ul .top b{color:#222;}
.boardList .posting-list ul .top b:nth-of-type(1){width: 10%;}
.boardList .posting-list ul .top b:nth-of-type(2){width: 60%;}
.boardList .posting-list ul .top b:nth-of-type(3){width: 20%;}
.boardList .posting-list ul .top b:nth-of-type(4){width: 10%;}
.boardList .posting-list ul li{border-bottom: 1px solid #ddd;display: flex;align-items: center; text-align: center;padding: 16px 30px;font-weight: 500;font-size: 16px;}
.boardList .posting-list ul li p{font-size: 15px; padding:0 10px;}
.boardList .posting-list ul li p:nth-of-type(1){width: 10%;}
.boardList .posting-list ul li p:nth-of-type(2){width: 60%; text-align:left;} 
.boardList .posting-list ul li p:nth-of-type(3){width: 20%;} 
.boardList .posting-list ul li p:nth-of-type(4){width: 10%;} 
.boardList .posting-list ul li a{display: inline-block;border-bottom: 1px solid transparent;} 
.boardList .posting-list ul li a:hover{color: #19708f;border-bottom: 1px solid #19708f;font-weight: 700;} 
.boardList .posting-list ul li > span {width: 5.8%;padding: 6px 0;display: inline-block;border-radius: 3px;background-color: #B5B5B5;color: #fff;font-size: 14px;}
.boardList .posting-list ul li > .on{background-color: #19708f;color: #fff;}  
.boardList .app-btn {text-align:center;margin-bottom: 50px;}
.boardList .app-btn a{border: 1px solid #000;display: inline-block;background-color:#111;color:#fff;padding: 20px 55px ;font-weight: 600;}


/*************paging************/
 .paging {width:100%;  margin:0 auto 100px; text-align:center; display: inline-block;}
.paging-body { display:inline-block; }
.paging-body a {width:26px; height:40px; line-height:38px; color:#777777; font-size:16px; font-weight:500; float:left; margin:0 2px; display:block; box-sizing:border-box; position:relative;}
.paging-body a img{position:absolute; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; top:0; bottom:0; left:0; right:0;}
.paging-body a.on{ color:#111; border:none; line-height:40px; border-bottom:2px solid #19708f;}


@media screen and (max-width:820px) {
	.boardList .posting-list ul{margin-bottom:30px;}
    .boardList .posting-list ul li{padding: 20px 0;}
    .boardList .posting-list ul .top{padding:20px 0; font-size:14px;} 
    .boardList .posting-list ul .top b:nth-of-type(1){display:none;}
    .boardList .posting-list ul .top b:nth-of-type(2){width: 40%;}
    .boardList .posting-list ul .top b:nth-of-type(3){width: 30%;}
    .boardList .posting-list ul .top b:nth-of-type(4){width: 30%;}
	.boardList .posting-list ul li p:nth-of-type(1){display:none;}
    .boardList .posting-list ul li p:nth-of-type(2){width: 40%; } 
	.boardList .posting-list ul li p:nth-of-type(3){width: 30%;} 
	.boardList .posting-list ul li p:nth-of-type(4){width: 30%;} 
    .boardList .posting-list ul li > span{width: 20%;font-size: 13px;} 
	.boardList .app-btn{margin-bottom:30px;}
	.boardList .app-btn a{padding: 15px 40px; font-size:14px;}
}











/* 신청폼 */
/* .contactWrap{
	margin-top: 100px;
}
 */
.contact-form .table{
	position: relative;
	width: 100%;
	/* border-top: 2px solid #000; */
	font-size: 18px;
  }
  .contact-form .table .tr.line{
	border-right:1px solid #e5e5e5;
  }
  .contact-form .table .tr{
	position: relative;
	width: calc(100% - 50px);
	border-bottom: 1px solid #e5e5e5;
	display: flex;
	flex-wrap: wrap;
	padding: 10px 20px 10px 30px;
  }
  .contact-form .table .tr.type2{
	margin-right: 50%;
  }
  .contact-form .table .tr.type3{
	padding-right: calc(50% + 20px);
  }
  .contact-form .table .tr.w50{
	width:50%;
  }
  .contact-form .table .th{
	width: 180px;
	color: #222222;
	font-weight: 500;
  }
  .contact-form .table .th label{
	height: 60px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  }
  .contact-form .table .th label.ipt:after{
	display: inline-block; 
	content:"*";
	color: #e74d4d;
	margin-left: 4px;
  }
  .contact-form .table .td{
	width: calc(100% - 180px);
  }
  .contact-form .table .td.school{
	display:flex;flex-wrap: wrap;
  }
  .contact-form .table .td.school .input{
	width: calc(100% - 160px - 10px);
  }
  .contact-form .table .td.school button{
	width: 160px;
	height: 60px;
	background: #6a6b6b;
	color: #fff;
	margin-left: 10px;
  }
  .contact-form .table .td .datepicker_g{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
  }
  .contact-form .table .td .datepicker_g .item{
	width:50px;
	text-align: center;
	font-size: 3rem;font-weight: 300;
  }
  .contact-form .table .td .datepicker_g .input{
	width: calc(50% - 25px);
	max-width: 430px;
  }
  .contact-form .table .td .input_type2{
	display:flex;
	flex-wrap:wrap;
	align-items: center;
  }
  .contact-form .table .td .input_type2 .input{
	width: calc(100% - 50px);
  }
  .contact-form .table .td .input_type2 .item{
	width: 50px;
	text-align: right;
  }
  .contact-form .table .td select{
	width: 100%;
	height: 60px;
	/* border: 0; */
	border: 1px solid #888;
	padding: 0 20px;
	font-size:inherit;
	background: url(/images/common/sel-arrow.png) no-repeat 99% center;
  }
  .contact-form .table .td select.style2,
  .contact-form .table .td .input.style2{
	background-color: #fff;
	border: 1px solid #dfdfdf;
  }
  .contact-form .table .td .w50{
	max-width:500px;
  }
  .contact-form .table .td .w40{
	max-width: 274px;
  }
  .contact-form .table .td .input{
	width: 100%;height: 60px;
	border: 0;
	padding: 0 20px;
	background-color: #efefef;
	font-size: 17px;
  }
  .contact-form .table .td .input::placeholder,
  .contact-form .table .td textarea::placeholder{
	color:#efefef;
  }
  .contact-form .table .td .input.disabled{
	background: #efefef;
  }
  .contact-form .table .td .input.date_i{
	background-image: url('/images/page/datepicker_i.png');
	background-repeat: no-repeat;
	background-position: right 20px center;
  }
  .contact-form .table .td textarea{
	width: 100%;
	height: 225px;
	border: 0;
	padding: 15px 20px;
	background-color: #efefef;
	resize: none;
	font-weight: 400;
	font-size: 17px;
  }
  .contact-form .table .td textarea.type2{
	height:300px;
	padding: 25px 30px;
  }
  .contact-form .table .btn_style1{
	width: 220px;
	height: 60px;
	background: #6a6b6b;
	color: #fff;
  }
  .contact-form .radio_list{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	height: 100%;
	color: #888;
  }
  .contact-form .radio_list li:not(:last-child){
	margin-right: 40px;
  }
  .contact-form .table .email{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  }
  .contact-form .table .email .input_email1{
	width: calc(33.33333333% - 13.33333333333333px);
  }
  .contact-form .table .email .input_email2{
	width: calc(33.33333333% - 13.33333333333333px);
  }
  .contact-form .table .email .input_email3{
	width: calc(33.33333333% - 13.33333333333333px);
	margin-left: 10px;
  }
  .contact-form .table .email .item{
	width: 30px;
	text-align: center;
  }
  .contact-form .table .pwd{
	display: flex;
	flex-wrap: wrap;
  }
  .contact-form .table .pwd .btn{
	margin-left: 10px;
  }
  .contact-form .table .tel{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
  }
  .contact-form .table .tel .input{
	width: calc(33.333333333% - 8px);
  }
  .contact-form .table .tel .item{
	width: 12px;
	text-align: center;
  }


  /* 버튼 */
  .cm-btn-controls {
    overflow: hidden;
    text-align: center;
    padding-top: 30px;
}

  .cm-btn-controls .submit-btn {
    display: inline-block;
    width: 150px;
    height: 42px;
    line-height: 42px;
    border: 0;
    color: #fff;
    background-color: #444;
    font-size: 17px;
    margin: 0 2px 5px 2px;
    cursor: pointer;
    vertical-align: top;
    text-align: center;
    font-weight: 400;
    border-radius: 2px;
	transition: all 0.3s;
}

.cm-btn-controls .submit-btn:hover {
	background-color: #ff810b;
}

  
  @media all and (max-width:800px){
	.contact-form .table{
		font-size: 15px;
	  }

	.contact-form .table .th,
	.contact-form .table .td {
	  width:100%;
	}
	.contact-form .table .tr {
	  padding:10px 5px;
	  width:calc(100% - 10px);
	}
	.contact-form .table .td select{
		padding: 0 10px;
		height: 40px;
	}

	.contact-form .table .td .input {
	  height:42px;
	  font-size: 14px;
	}

	.contact-form .table .td textarea{
		font-size: 14px;
	}

  }