
/*게시판공통*/

input, button,select{ -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}

.boardarea{width:100%;}

.boardarea h4{text-align:center;font-size:18px;padding:10px;margin-top:30px;border-top:2px solid #4b4d4c;border-bottom:1px solid #ccc;background:#f6f6f6}

input{-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;}/*input의 type이 text일 때와 submit일 때 여백의 차이 때문에 세로 크기가 다르게 만들어집니다. 이를 해결하는 방법은 box-sizing 속성을 추가하는 것입니다.*/


.boardarea input.noneb{border:0px;background:none;vertical-align:middle}

 
.form_style
{
	width:90%;
	padding: 5px;
	border:1px solid;
	border-color:#898989;
	background-color:#FFFFFF;
	color:#333333;
	font-size:14px;
 
}

.form_style2
{
	width:150px;
	padding: 5px;
	border:1px solid;
	border-color:#898989;
	background-color:#FFFFFF;
	color:#333333;
	font-size:14px;
 
}

.fom_fileinput{border:1px solid #898989; padding:3px;font-size:12px;float:left;}
.form_style3{border:0px solid #898989; padding:0px;font-size:0px;float:left;background:red;width:80px;}
input.form_style4{width:80px;border:1px solid #898989; padding:2px;font-size:12px;}


textarea.form_textarea{width:96%; 
 	 border:1px solid #898989;
     line-height:130%;
	 padding:2%;
	 height:auto;

	 }
.subject_A{width:80%;}

/*list*/
.boardarea .noarea{width:10%;text-align:center;}
.boardarea .subjectarea{width:46%;}
.boardarea .filearea{width:7%;text-align:center;}
.boardarea .hitarea{width:7%;text-align:center;}
.boardarea .namearea{width:15%;text-align:center;}
.boardarea .dataarea{width:15%;text-align:center;}
.boardarea .contentarea{display:none;}

.boardtitbar{margin-top:30px;border-top: 2px solid #373737;}
.boardtitbar:after{display:block;clear:both;content:'';background:#ccc;height:1px;width:100%;position:relative;}
.boardtitbar ul{height:35px;margin-bottom:0px;  }
.boardtitbar ul li{color:#333;float:left;background:#f6f6f6;text-align:center;}
.boardtitbar ul li span{display:block;padding:10px 0 10px 0;}


.boardnotarea{clear:both;}
.boardnotarea:after{display:block;clear:both;content:'';background:#ccc;height:1px;width:100%;position:relative;}
.boardnotarea ul {}
.boardnotarea ul li{float:left;text-align:center; background:#e8faff;padding-top:10px;padding-bottom:10px;}
.boardnotarea ul li.subjectarea{text-align:left;}
.boardnotarea img{vertical-align:middle;}
.nonetext{clear:both;text-align:center;padding:10px;margin-bottom:10px;}

.boardcontent{clear:both;}
.boardcontent:after{display:block;clear:both;content:'';background:#ddd;height:1px;width:100%;position:relative;}
.boardcontent ul{}
.boardcontent ul li{float:left;text-align:left;padding-top:10px;padding-bottom:10px;line-height:22px;}
.boardcontent ul li a,.boardcontent ul li a:hover{}
.boardcontent ul li img{margin-left:5px;vertical-align:middle;}


		/*search*/
		.searcharea{clear:both;padding-top:20px;width:100%;border-top: 1px solid #dddddd;}
 		.searcharea form{float:left;width:90%;}
		.searcharea .wr_icon{float:left;width:10%;min-width:80px;text-align:right;}
		input.searchbox{background: #fff;border: 1px solid #d2d2d2;vertical-align:middle;height:37px;width:30%;margin-right:0;}
		input.btn_search{cursor:hand;text-indent:-1000px;width:35px; background: url(/green_mobile_board/board_image/search.png) no-repeat center center;border: 1px solid #d2d2d2 ;vertical-align:middle;height:37px;margin-left:-4px;}
		select.serach_item{background: #f9f9f9;border: 1px solid #d2d2d2;vertical-align:middle;height:37px;width:70px;}

		.searcharea.center{position:relative;margin:0 auto;border-bottom: 1px solid #ccc;padding-bottom:10px;}
		.searcharea.center form{float:none;width:100%;}


.btnareaA{text-align:center;width:340px;margin: 20px auto;}
 
.sendbuttonA{
    
	background: #023253;
     color: #fff;
    text-align: center;
    padding: 3px;
    font-size: 15px;
	line-height:16px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
 	min-width:80px;
	
 	 
 	margin: 5px 2px;
	 
}

.cancelbuttonB{
    
	background: #727272;
    color: #fff;
    text-align: center;
    padding: 3px;
    font-size: 15px;
	line-height:16px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
 	min-width:80px;
	
 	 
 	margin: 5px 2px;
	 
}
.boardbutton{
    
	background: #727272;
    color: #fff;
    text-align: center;
    padding: 3px;
    font-size: 15px;
	line-height:16px;
    border-radius: 3px;
    cursor: pointer;
    font-weight: 500;
 	min-width:80px;
	
 	 
 	margin: 5px 2px;
 
	 
}

 .boardbutton a, 
 .boardbutton a:hover,
 .sendbuttonA a, 
 .sendbuttonA a:hover,
 .cancelbuttonB a, 
 .cancelbuttonB a:hover
 {color:#fff;display:block;padding:5px 0px;width:100%;}


 .iconarea{width:100%; position:relative;text-align:center;border-top: 0px solid #ccc;padding:10px 0;margin:  20px auto 0 auto;}
 .iconarea_in{padding:30px 0; margin: 0 auto; }
 .iconarea_in .sendbuttonA{display:inline-block;vertical-align:middle}
 .iconarea_in .cancelbuttonB{display:inline-block;vertical-align:middle}
 .iconarea_in .boardbutton{display:inline-block;vertical-align:middle}
 .iconarea_in .blank{display:inline-block;width:0;height:0px;vertical-align:middle}

.iconarea.linebar{border-top: 1px solid #ccc;}


@media all and (max-width:860px) {

.searcharea form{width:70%;}
.searcharea .wr_icon{width:30%;}


}
@media all and (max-width:768px) {


/*list*/
.boardarea .noarea{display: none;}
.boardarea .subjectarea{width:74%;padding-left:1%}
.boardarea .filearea{display: none;}
.boardarea .hitarea{display: none;}
.boardarea .namearea{display: none;}
.boardarea .dataarea{width:25%;text-align:center;}


}
@media all and (max-width:580px) {


/*list*/
.boardarea{margin-top:30px;}
.boardarea.listline{border-top: 2px solid #373737;}
.boardtitbar{display:none}
.boardarea .subjectarea{font-size:15px;float:none;width:93%;font-weight:400;border-bottom:none;padding:10px 3px 3px 15px;margin:0;}
.boardarea .boardcontent .subjectarea{background: url(../board_image/arrow3.png) no-repeat 0 15px}
.boardarea .dataarea{display:none;background:#f7f7f7;float:none;width:93%;text-align:left;font-size:13px;padding:0px 3px 5px 10px;margin:0;color:#898989}
.boardarea .contentarea{background:#fff;float:none;display:block;width:93%;text-align:left;padding:3px 3px 10px 15px;}
.boardnotarea{background:#e8faff}

.boardarea .boardnotarea ul li.subjectare{background:#e8faff}
.boardarea .boardnotarea ul li.contentarea{background:#e8faff}

}


@media(max-width:380px){
.btnareaA{text-align:left;width:95%;left:50%;margin-left:-130px;position:relative;overflow:hidden;}
  
 
 }
/*gallery_list*/
.gall_listara {}
.gall_listara ul.gall_list{width:100%;padding:0;margin:0;}
.gall_listara ul.gall_list li{vertical-align:top;border:0;display:inline-block; text-align:center;width:31.3333%;margin-right:2%;padding-left:0;padding-right:0; overflow:hidden; margin-left:-4px; margin-bottom:50px;}
.gall_listara ul.gall_list li img{width:100%;max-width:500px; margin-bottom:10px;border:1px solid #ccc;}

@media all and (max-width:1024px) {
.gall_listara ul.gall_list li{ width:31.3333%;}
}

@media all and (max-width:700px) {
.gall_listara ul.gall_list li{ width:48%;}
}

@media all and (max-width:400px) {
.gall_listara ul.gall_list li{width:99%;}
}


/*view*/
.viewarea{}
.viewarea h5.boardtitle{text-align:center;padding:5px; font-size:18px;font-weight:normal;}
.viewarea div.viewtit{background:#f7f7f7;border-top:2px solid #4b4d4c;border-bottom:1px solid #ccc;text-align:center;padding:10px 10px 10px 10px;font-size:20px;line-height:24px;font-weight:bold;margin-bottom:0;}

.viewarea  #DivContents{max-width:1800px}
.viewarea  #DivContents img{margin-bottom:10px;}
#DivContents img{margin-bottom:10px;max-width: 100%; 
    
}
 
.viewarea .view_con_info{}
.viewarea .view_con_info{text-align:right;border-bottom: 1px dashed #ccc;padding:0px;margin:0;}
.viewarea .view_con_info ul {padding-top:0;margin-top:0;}
.viewarea .view_con_info ul li{display:inline;margin-left:20px;font-size:12px;margin-top:0;padding-top:0}
.viewarea .view_con_info ul li{display:inline;margin-left:20px;font-size:12px;margin-top:0;padding-top:0}
.viewarea .view_con_info ul li.first{margin-left:0;}
.view_content{clear:both;padding:30px 0}

.view_content.workimg{text-align:center;}
.view_content.workimg p{display:inline-block; max-width:600px;margin:0px 5px;}

.downloadare{border-top: 1px solid #ccc; padding:4px;}
.downloadare a{
	display:block;
	 
	width:100%;
	border-bottom: 0px solid #ccc;
	position:relative;
	 
	padding:5px;
}
.downloadare a img{vertical-align:middle;}

p.iconarae{text-align:center;border-top: 1px solid #ccc;padding:10px;margin-top:40px;}

.work_view_box{
	position:relative;
}
.work_view_box .work_main_img{
	display:inline-block;
	padding:20px;
	width:50%;
	vertical-align:middle;
}

.work_view_box .work_contents{

	display:inline-block;
	padding:20px;
	width:50%;
	margin-left:-4px;
	vertical-align:middle;
}
.work_view_box .work_contents strong.title{
	display:block;
	position:relative;
	margin-bottom:40px;
	border-bottom: 1px dashed #ccc;
	padding:10px;
	font-size:150%;
color:#1a9492;

}
.work_view_box .work_contents dl{
	position:relative;

}
.work_view_box .work_contents dt{
	display:inline-block;
	vertical-align:top;
	width:130px;
	color:#666;
	margin-bottom:20px;


}
.work_view_box .work_contents dd{
	display:inline-block;
	vertical-align:top;
	width: calc(100% - 140px);
	margin-bottom:20px;


}


.workimg .img_box{
   
   float: left;
   padding:  3px 5px;
   overflow:hidden;
   width: 50%;
   
}
.workimg .img_box img{
    
   border: 0px;
   display: block;
   width: 100%;
   
}


@media all and (max-width:1000px) {
	.work_view_box .work_main_img{
		width:100%;
		padding:0px;
	}
	.work_view_box .work_contents{
		width:100%;
		padding:0px;
		margin-left:0;
	}
	.work_view_box .work_contents strong.title{
		font-size:140%;
		padding-left:0px;
		margin-bottom:20px;
	}
	.work_view_box .work_contents dt{
		width:80px;
	}
	.work_view_box .work_contents dd{
		width: calc(100% - 90px);
	}
}


/*read*/
.read_pass{width:320px;margin: 0 auto;position:relative;}
.read_pass .read_box{border: 1px solid #ccc;}
.read_pass .read_box h4{background:#454b54;text-align:center;padding:10px;color:#fff;margin:0;}
.read_pass .read_box .formbox{text-align:center;padding:10px;}


/*write*/

table.table_write{width:100%;}
table.table_write{margin:0px 5px 0 0px;}
table.table_write .topline{border-top: 1px solid #d7d7d7}
table.table_write th{width:20%;background:#f7f7f7;padding:5px 10px;border-bottom:1px solid #d7d7d7;font-size:14px;font-weight:400;text-align:left;}
table.table_write th span{background: url(/green_mobile_board/board_image/icon.png) no-repeat 10px 10px;padding-left:30px;}
table.table_write td{width:80%; border-bottom:1px solid #d7d7d7;font-size:14px;font-weight:400;text-align:left;padding:5px 10px}
table.table_write td.subject_part{text-align:left;}
table.table_write td img{vertical-align:middle;}

@media(max-width:580px){

table.table_write th{width:30%;padding:5px 10px;text-align:center;}
table.table_write th span{background: none;padding-left:0px;}

table.table_write td{width:70%;padding:5px 5px}

 
 }

/**개인정보취급방침**/
.personbox{background:#f7f7f7; margin-top:20px;margin-bottom:20px;margin-left:0%; padding:20px 0 20px 0 ;height:150px;}
.personbox .personbox_in{font-size:13px;line-height:20px;letter-spacing:-1px;color:#333;padding:2%;width:94%;max-height:90px;overflow: scroll; overflow-x: hidden;border:1px solid #f7f7f7;margin-left:2%; }

.personalcontents{}
.personalcontents h2.personal_title{text-align:center;font-weight:bold;font-size:25px;margin-bottom:30px;}
.personalcontents .txt_sum{background:#f7f7f7;padding:10px;}
.personalcontents h3.person_t{margin-top:30px;margin-bottom:10px;}
.personalcontents .person_content {padding-left:10px}
.personalcontents .person_content p{margin-bottom:10px;}
.personalcontents .person_content ul {margin-bottom:10px}
.personalcontents .person_content ul li{list-style-type: square;margin-left:40px;} 

.boardarea .agreementcontents h3{font-size:19px;margin-top:30px;}
.boardarea .agreementcontents h4{font-size:16px;margin-top:30px;font-weight:500}
 /*/////////////////////////////////////////*/


	.boardarea table.agree_table{width:100%;  border-collapse:collapse;margin:10px 5px 0 0px; }
	.boardarea table.agree_table th{padding:5px;border-top:2px solid #ccc;border-bottom:1px solid #ccc;background:#e7fcfe;text-align:center;border-left:1px solid #ccc;}
	.boardarea table.agree_table td{padding:5px; border-bottom:1px solid #ccc;background:#fff;text-align:center;border-left:1px solid #ccc;}
	.boardarea table.agree_table .first{border-left:0px;}

 /*파일첨부*/

.file_input_textbox{float: left} 
.file_input_div{position: relative;width: 100px; height:25px;overflow: hidden;} 
.file_input_button{
width: 100px;
position: absolute;
top: 0px;padding:5px;
background-color: #33BB00;
color: #FFFFFF;
border-style: solid;} 

.file_input_hidden{
font-size: 45px;
position: absolute;
right: 0px;
top: 0px;
opacity: 0; 
filter: alpha(opacity=0);
ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;}
 

.btnarea {text-align:center;margin-bottom:60px;}
.btnarea a{display:inline-block; width:160px; height:50px; line-height:50px; text-align:center; background:#2c48b4; color:#fff; margin:50px 0 0 15px;}

.boxAA{padding:6px;}

/* page */
.paginate{clear:both;padding:30px 0;text-align:center;font-size:12px}
.paginate a, .paginate span{display:inline-block;position:relative;min-width:25px;height:25px;line-height:23px;color:#2a2f3a;text-decoration:none;border:1px solid #d5d5d5;padding:0 5px}
.paginate a:hover{background:#fff;border:1px solid #555}
.paginate span{color:#fff !important;background:#023253;border:1px solid #023253}
.paginate a.pre,.paginate a.next,.paginate a.first,.paginate a.last{position:relative;vertical-align:top}
.paginate a i{display:block;overflow:hidden;background:url("/green_mobile_board/board_image/page.png") no-repeat;text-indent:-9999px;position:absolute;top:3px;left:0px;width:22px;height:22px}
.paginate a.pre{margin:0 12px 0 0}
.paginate a.pre i{background-position:-45px 0px}
.paginate a.next{margin:0 0 0 12px}
.paginate a.next i{background-position:-177px 0px}
.paginate a.first i{width:22px;background-position:0 0px}
.paginate a.last i{width:22px;background-position:-223px -0px}


/*///////////////////////////////*추가 Board///////////////////*/ 

/**********FAQ***************/
.faqcontent{clear:both;border-bottom:1px solid #ccc;padding:5px;}
.faqcontent ul li{padding:10px;}
.faqcontent ul li.noarea{position:absolute;text-align:left;;}
.faqcontent ul li.faq_qa{position:relative;padding-left:10%;width:90%;top:0}
.faqcontent ul li.faq_qa .FAQ_Q {font-weight:500;}
.faqcontent ul li.faq_qa .FAQ_Q  strong{margin-right:20px;font-size:20px;line-height:30px;font-weight:500;}
.FAQ_A .FAQ_Qicon{margin-right:20px;font-size:20px;line-height:30px;color:#023253;position:absolute;}
.FAQ_A .FAQ_QConent{position:relative;padding-left:40px;top:0;padding-top:5px;color:#474747}


/*****************동영상**********************/

/*동영상*/
.gall_listara.youtube_box ul.gall_list li a{border: 0px solid #ccc;}
.gall_listara.youtube_box ul.gall_list li:hover{border:5px solid #fff; box-shadow:0 0 0 rgba(0,0,0,0);}
.gall_listara.youtube_box  ul.gall_list li .subjectTitle{font-size:16px;font-weight:400;}

.gall_listara.youtube_box .photo_box{border:1px solid #fff;background:#fff;position:relative;}
.gall_listara.youtube_box .photo_box .photoimg img{border:1px solid #ccc;}
.gall_listara.youtube_box .photo_box .subjectTitle{overflow:hidden; white-space:nowrap; text-overflow:ellipsis;padding:5px 10px 5px 10px; min-height:50px;}

.youtube_box .movieicon{top:0;position:absolute;width:25px;height:25px;background: url(/image/icon_play.png) no-repeat center center;background-size:100%;z-index:3;top:50%;margin-top:-61px;left:50%;margin-left:-21px;}
.youtube_box  .video_iocn{
	position:absolute;
	z-index:222;
	left:50%;
	top:45%;
	width:60px;
	height:40px;
	margin-left:-40px;
	margin-top:-20px;
	background:#ff0000;
	border-radius:10px;

}
.youtube_box  .video_iocn .fa-playA:after{
		 display:block;
		 content: "\f04b";
		 position:relative;
		 margin:10px auto;
		 text-align:center;
		 color:#fff;
		 

}
@media all and (max-width:1000px) {
	.youtube_box  .video_iocn{
			 
			 top:40%;
		 
			width:40px;
			height:30px;
			margin-left:-20px;
	margin-top:-15px;
			 

		}
		.youtube_box  .video_iocn .fa-playA:after{
		 margin:8px auto;
		 font-size:90%;
		}

}
 
/*동영상 보기*/
 .embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.youtubearea{position:relative; height:100%;padding-top:0px;height:0;overflow:hidden;} 
.youtubearea iframe,
.youtubearea object,
.youtubearea embed,
.youtubearea video{
position:absolute;top:0;left:0;width:100%;height:100%;} 

 .youtubearea.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.youtubearea.embed-responsive-4by3 {
  padding-bottom: 75%;
}


@media all and (max-width:700px) {
 .gall_listara ul.gall_list.videogall li{width:47%;}
}

@media all and (max-width:400px) {
 .gall_listara ul.gall_list.videogall li {width:97%;}

}

/*****************설치사례**********************/ 
.searcharea.Divsion{padding-bottom:10px;padding-left:10px;height:40px;}
 .gall_listara ul.gall_list.install_gall > li{width:47%;border: 1px solid #ccc;padding:0;margin-right:1%;margin-left:1%; position:relative;padding:0;}
 .gall_listara ul.gall_list.install_gall > li img{max-width:320px;margin-bottom:0px;}
 .gall_listara ul.gall_list.install_gall .photoarea{width:43%;float:left;padding:1%;}
 .gall_listara ul.gall_list.install_gall .galltxtInfo{width:53%;float:left;text-align:left;padding:1%;}
 .gall_listara ul.gall_list.install_gall .galltxtInfo h3.gall_title{font-weight:500;border-bottom: 1px dotted #ccc;padding:7px 5px;text-overflow: ellipsis;white-space: nowrap;width:98%;overflow:hidden;font-size:15px;line-height:16px;}
 .gall_listara ul.gall_list.install_gall .galltxtInfo .infotxt{padding:5px;}
 .gall_listara ul.gall_list.install_gall .galltxtInfo .infotxt p span{margin-right:10px;font-weight:400;font-size:12px;color:#333;}

.gall_info_box{padding:10px}
.gall_info_box .photoare{width:50%;float:left;}
.gall_info_box .photoare img{width:98%;}
.gall_info_box .phto_tableArea{width:50%;float:left;}

.view_content ul.photo-grid-container li.photo-grid-item img{max-width:600px;}

table.boardform				{width: 100%;  border-collapse:collapse;margin:0px 5px 0 0px; }
table.boardform caption		{display:none;}
table.boardform  th{letter-spacing:-0.05em;font-weight:400;padding:10px; width:20%;text-align:center; border-bottom: 1px solid #ccc;background:#f9f9f9; } /*th기본*/
table.boardform  th.bordernone{height:34px;}
table.boardform  td{border-bottom: 1px solid #ccc;padding:10px;width:80%; } 
table.boardform .bar{border-top: 2px solid #d7d7d7;}


@media all and (max-width:1120px) {
 .gall_listara ul.gall_list.install_gall .photoarea{width:100%;float:none;padding:0%;}
 .gall_listara ul.gall_list.install_gall .galltxtInfo{width:100%;float:none;text-align:left;padding:0%;}
  .gall_listara ul.gall_list.install_gall > li img{max-width:100%; }
 }
 @media all and (max-width:768px) {
 .gall_info_box .photoare{width:100%;float:none;}
.gall_info_box .photoare img{width:100%;}
.gall_info_box .phto_tableArea{width:100%;float:none;}
 }
@media all and (max-width:580px) {
 .gall_listara ul.gall_list.install_gall > li {width:97%;}
}