@charset "utf-8";

/* board reset */
/* .boardListWrap, .boardWriteWrap, .boardviewWrap, .boardGalleryWrap{position:relative;}  20220922 주미옥 */



/**********************************************
************** 게시판 목록 ***********************
***********************************************/
.boardSearch{
	margin-bottom:12px;
	font-size:14px;
	line-height:1.8;
	}
.boardSearch-title,
.boardSearch-keyword{
	border:1px solid #181818;
	}
.boardSearch-title{
	width:26%;
	padding:12px; 
	border-right:0;	
	border-radius:8px 0 0 8px;
	}
.boardSearch-keyword{
	width:74%;
	padding:10px; 
	border-radius:0 8px 8px 0;
	}

.boardSearch-select{width:100%;}


/**********************************************
************** 게시판 싱세 ***********************
***********************************************/
.board-title{padding-left:1em;}






.list_table{width:100%;}

/* editor table line */
table.table.table-bordered {border-collapse: collapse;}
.table-bordered td, .table-bordered th {border: 1px solid #a9a9a9;}
.viewCon table {border-collapse: collapse;}
.viewCon td, .viewCon th {border: 1px solid #a9a9a9 !important;}



/* button */
.boardBtn{position:relative}


@media(min-width:600px) and (max-width:768px){
	.boardBtn a {font-size: 12px;}
}

@media(min-width:481px) and (max-width:599px){
	.boardBtn a {font-size: 12px;}
}

@media(min-width:371px) and (max-width:480px){
	.boardBtn a {font-size: 3.5vw; padding: 1.5vw 3vw;}
}

@media (min-width:321px) and (max-width:370px){
	.boardBtn a {font-size: 3.8vw; padding: 1.5vw 3vw;}
}   

@media(max-width:320px){
	.boardBtn a {font-size: 3.8vw; padding: 1.5vw 3vw;}
}


/* paging */
.pageBtn{margin:30px 0 20px 0;text-align:center}
.pageBtn span {display: inline-block; vertical-align: middle;}
.pageBtn span a {display: inline-block;}
.pageBtn .page_prev{margin:0 15px 0 0}
.pageBtn .page_next{margin:0 0 0 15px}
.pageBtn .page_select a {border: 1px solid #e0e0e0; display: inline-block; font-size: 13px; color: #555; width:24px; height:24px; text-align:center;font-family: 'Lato', sans-serif !important; }


.totalPage b, .totalPage span {font-weight:bold;}


/*mini tablet and duo*/
@media (max-width:768px){
	.boardListTop {margin-bottom: 0.8rem;}
	.totalPage {position: relative; margin-top: 30px;}
}
@media(min-width:600px) and (max-width:768px){
}
/*mini tablet and duo*/
@media (max-width:599px){
	/* .boardSearch {float: none; clear: both; display: block; text-align: right;} */
}
@media(min-width:481px) and (max-width:599px){
	.boardSearch dd:nth-child(2) {width: 27%;}
	.boardSearch dd select {width: 100%;}
	.boardSearch dd.search {width: 71%; margin-left: 1%;}
	.boardSearch dd.search input {width: 87%;}
}
/* samsung note and iphone max*/
@media(min-width:371px) and (max-width:480px){
	.boardSearch dd:nth-child(2) {width: 35%;}
	.boardSearch dd select {width: 100%; padding-left: 0.7rem;}
	.boardSearch dd.search {width: 62%; margin-left: 1%;}
	.boardSearch dd.search input {width: 81%;}
}
/* samsung and iphone*/
@media (min-width:321px) and (max-width:370px){
	.boardSearch dd:nth-child(2) {width: 35%;}
	.boardSearch dd select {width: 100%; padding-left: 0.7rem; font-size: 4vw;}
	.boardSearch dd.search {width: 62%; margin-left: 1%;}
	.boardSearch dd.search input {width: 79%; font-size: 4vw;}
}   
/* fold*/
@media(max-width:320px){
	.boardSearch dd:nth-child(2) {width: 31vw;}
	.boardSearch dd a {margin-right: 1vw;}
	.boardSearch dd select {width: 100%; padding-left: 0.4rem; font-size: 4.5vw;}
	.boardSearch dd.search {width: 53vw; margin-left: 1%;}
	.boardSearch dd.search input {width: 39vw; font-size: 4.5vw;}
	.boardSearch dd.search .fas.fa-search {font-size: 4.5vw;}
}




/* Write */
.boardWriteWrap .writeTable{border-top:2px solid #777; padding:0 0 30px 0; border-bottom: 2px solid #777; margin-bottom: 15px;}
.boardWriteWrap .writeTable .write_table {width:100%;}
.boardWriteWrap select {width: 150px; height: 30px; background: transparent url(/common/images/arrow-select.png) no-repeat 98% 50%; border: 1px solid #c0c0c0; padding-left: 1rem; line-height: 22px;}
.boardWriteWrap .writeTable th {width:18%; height: 3rem; text-align: center; color: #555; border-bottom: 1px solid #bebebe; background: #e9edf1; vertical-align: middle;}
.boardWriteWrap .writeTable td {width:82%; border-bottom: 1px solid #bebebe; height: 3rem; font-size: 13px; vertical-align: middle; padding: 0.5rem 1rem;}
.boardWriteWrap .writeTable tr td.secNum {padding:1rem;}
.boardWriteWrap .writeTable tr td.secNum span{color:#fc0000;font-size:12px;padding:0.5rem 0 0 0;display:inline-block; line-height: 1rem;}
.boardWriteWrap .writeTable tr td input{border:1px solid #c0c0c0;height: 2rem; padding: 0.3rem; -webkit-appearance: none; -webkit-border-radius: 0;}
.boardWriteWrap .writeTable tr.addfile input {height: auto; border:none; padding: 0; margin: 0.4rem 0; font-size: 0.9rem;}
.boardWriteWrap .writeTable td input[name="o_name"], .boardWriteWrap .writeTable td input[name="o_password"] {width: 150px; margin-right: 0.8rem; vertical-align: middle;}
.boardWriteWrap .writeTable td input[type="checkbox"] {display:none;}
.boardWriteWrap .writeTable td input[type="checkbox"] + label {line-height: 0 !important; display: inline-block;}
.boardWriteWrap .writeTable td input[type="checkbox"] + label span {display:inline-block; width:14px; height:14px; border:1px solid #c0c0c0; background: #fff; vertical-align: middle; cursor:pointer; border-radius: 2px; margin-left: 0.2rem;}
.boardWriteWrap .writeTable td input[type="checkbox"]:checked + label span:before {display: block; width: 11px; height: 11px; content: "\2714"; font-size: 0.5rem; color: #000; text-align: center; position: relative; top: 6px;}
.boardWriteWrap .writeTable td input[name="o_secNum"] {width: 143px; margin-left: 0.3rem;}
.boardWriteWrap .writeTable td input[name="o_title"] {width: 60%;}

/*PC*/
@media (max-width:1300px){
	.boardWriteWrap .writeTable td input[name="o_title"] {width: 100%;}
}
@media (min-width:1025px) and (max-width:1300px){
}
/*tablet*/
@media(min-width:769px) and (max-width:1024px){
}
/*mini tablet and duo*/
@media (max-width:768px){
	.boardWriteWrap .writeTable {padding:0 2% 1rem 2%;}
	.boardWriteWrap .writeTable th, .boardWriteWrap .writeTable td {display: block; width: 100%; height:auto; padding:0;}
	.boardWriteWrap .writeTable th {background: unset; border: 0; text-align: left; font-size: 1rem; font-weight: 500; margin-top: 1rem;}
	.boardWriteWrap .writeTable td {padding: 0; padding-bottom: 1rem; margin-top: 0.8rem;}
	.boardWriteWrap .writeTable tr:nth-child(4) td, .boardWriteWrap .writeTable tr:nth-child(5) td {padding-left: 0 !important; padding-top: 0 !important;}
	.boardWriteWrap .writeTable tr:last-child td {border-bottom:0;}
	.boardWriteWrap .writeTable td input[name="o_password"] {display: block; margin-bottom: 0.4rem;}
	.boardWriteWrap .writeTable tr td.secNum {padding:0;padding-bottom:1rem;}
}
  
/* fold*/
@media(max-width:320px){
	.boardWriteWrap .writeTable tr.addfile input {width: 100%;}
}



/* Gallery */
.boardGalleryWrap .galleryTable {border-top: 2px solid #777;  color: #555;}
.boardGalleryWrap .galleryTable ul {width: 100%; margin: 2rem auto;}
.boardGalleryWrap .galleryTable ul:after {content: ''; display: block; clear: both;}

.boardGalleryWrap .galleryTable ul li .gallery_img {display: block;}

.boardGalleryWrap .galleryTable ul li .gallery_title {color: #555; display: block; font-size: 1rem; margin: 0.8rem auto 0 auto; }


/* View */
.boardviewWrap .viewTable .viewSubject {width:100%; display: inline-block; box-sizing: border-box; vertical-align: middle; border-top: 1px solid #777; border-bottom: 1px solid #777;}
.boardviewWrap .viewTable .viewSubject h3 {display: inline-block; color: #282828; font-size: 23px; font-weight: 500; line-height: 1.5; padding: 35px 25px 5px 25px;}
.boardviewWrap .viewTable .viewSubject ul {margin-top: 8px; padding: 5px 25px 35px 25px;}
.boardviewWrap .viewTable .viewSubject ul li {margin-right: 10px; color: #696f7b; display: inline; line-height: 1.5; font-weight: 300;}
.boardviewWrap .viewTable .viewSubject ul li:after, .boardviewWrap .file dt:after {content: ''; display: inline-block; width: 1px; height: 11px; margin-left: 15px; background: #dadeeb; vertical-align: middle;}
.boardviewWrap .viewTable .viewSubject ul li:last-child {margin-right: 0px;}
.boardviewWrap .viewTable .viewSubject ul li:last-child:after {display: none;}

.boardviewWrap .file {padding: 15px 30px; border-top: 1px solid #d2d7e6;}
.boardviewWrap .file dt {display: inline-block; vertical-align: top; font-weight: 500;    line-height: normal;}
.boardviewWrap .file dd {display: inline-block; width: calc(100% - 50px); padding-left: 15px; box-sizing: border-box; }
.boardviewWrap .file dd p {line-height: inherit; margin-bottom: 15px; color: #696f7b; font-weight: 300;}
.boardviewWrap .file dd p:last-child {margin-bottom: 0;}
.boardviewWrap .file dd p a {word-wrap: break-word; line-height: 1.5; color: #696f7b; font-weight: 300;}
.boardviewWrap .file a.com_del i {color: red; margin-left: 7px;}

.boardviewWrap .viewTable .viewCon {width: 100%; padding: 2rem 1rem; line-height:1.6em;}
.boardviewWrap .viewTable .viewCon p{font-size:1rem;}
.boardviewWrap .viewTable .viewCon p img{width:800px !important;}
.boardviewWrap .viewTable .viewCon b {font-weight: bold;}
.boardviewWrap .viewTable .viewCon u {text-decoration: underline;}

.boardviewWrap .prev_next {margin-bottom: 20px; border-bottom: 1px solid #d9d9d9; border-top: 1px solid #d9d9d9;}
.boardviewWrap .prev_next:after{content:"";display:block;clear:both }
.boardviewWrap .prev_next li {padding: 17px 20px; float: left; width: 50%;}


.boardviewWrap .prev_next li.txt_prev span {color: #696f7b;  overflow: hidden; display: inline-block; width: calc(100% - 68px); text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}


.boardviewWrap .prev_next li.txt_next span {color: #696f7b;  overflow: hidden; display: inline-block; width: calc(100% - 68px); text-overflow: ellipsis; white-space: nowrap; box-sizing: border-box;}
.boardviewWrap .prev_next a {font-size: 14px; font-weight: 300; position: relative; display: block; min-height: 14px;}

/*PC*/
@media (min-width:600px){
	.boardviewWrap .prev_next li.txt_prev{background: url(../images/bullet_prev.gif) no-repeat left center;}
	.boardviewWrap .prev_next li.txt_prev strong {position: absolute; left: 0;}
	.boardviewWrap .prev_next li.txt_prev span {padding-left: 68px; padding-right: 10px;}
	.boardviewWrap .prev_next li.txt_next {background: url(../images/bullet_next.gif) no-repeat right center; text-align: right;}
	.boardviewWrap .prev_next li.txt_next strong {position: absolute; right: 0;}
	.boardviewWrap .prev_next li.txt_next span {padding-right: 68px; padding-left: 10px;}
}
@media (min-width:1025px) and (max-width:1300px){
}
/*tablet*/
@media(min-width:769px) and (max-width:1024px){
    .boardviewWrap .file dt {margin-top: 4px;}
}
/*mini tablet and duo*/
@media(min-width:600px) and (max-width:768px){
    .boardviewWrap .viewTable .viewSubject h3 {font-size: 20px; padding: 25px 25px 5px 25px;}
    .boardviewWrap .viewTable .viewSubject ul {padding: 5px 25px 25px 25px;}
    .boardviewWrap .file dt {margin-top: 4px;}
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span {width: calc(100% - 24px);}
    .boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {font-size: 15px;}
}
/*mini tablet and duo*/
@media (max-width:599px){
	.boardviewWrap .viewTable .viewSubject h3 {font-size: 20px; padding: 20px 10px 5px 10px;}
	.boardviewWrap .viewTable .viewSubject ul {padding: 5px 10px 20px 10px;}
	.boardviewWrap .file {padding: 10px;}
	.boardviewWrap .file dt {display: block; width: auto; padding-bottom: 10px;}
    .boardviewWrap .file dt:after {display:none;}
    .boardviewWrap .file dd {display: block; width: auto; padding-left: 0px;}
    .boardviewWrap .file dd p {margin-bottom: 8px; font-size: 15px;}
    .boardviewWrap .file dd p a {font-size: 15px;}

	.boardviewWrap .prev_next li {width: 100%;}
	.boardviewWrap .prev_next li:last-child {padding-top: 0;}
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span { padding-left: 10px;}
	.boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {vertical-align: middle;}
}
@media(min-width:481px) and (max-width:599px){
    .boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {font-size: 15px;}
}
/* samsung note and iphone max*/
@media (max-width:480px){
	/* .boardviewWrap .prev_next li {background-position-y: 20px !important;}
	.boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_next strong {font-size: 15px;}
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span {position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0);} */
}
@media(min-width:371px) and (max-width:480px){
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span {width: calc(100% - 13vw);}
	
	.boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {font-size: 4vw;}
}
/* samsung and iphone*/
@media (min-width:321px) and (max-width:370px){	
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span {width: calc(100% - 14vw);}
	.boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {font-size: 4.5vw;}
}   
/* fold*/
@media(max-width:320px){
	.boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next span {width: calc(100% - 14vw);}
	.boardviewWrap .prev_next li.txt_prev strong, .boardviewWrap .prev_next li.txt_prev span, .boardviewWrap .prev_next li.txt_next strong, .boardviewWrap .prev_next li.txt_next span {font-size: 4.5vw;}	
}






/*    S   각 제품별 테이블 Description    이 부분 옮기기 ~~~~~~~~~~~~~~~   board/css로 옮기기  */
.Description_container {
	margin-left: auto;
	flex-direction: column; 
}
.order{
	margin-bottom:2em;
}
.order__title{
	width:16em;
	padding:0.7em 1em ;
	border-radius:0 1em 0 0;
	color:#fff;
	/* background-color:#792e88; */
}
.order__description {
		overflow: hidden;
		position: absolute !important;
		clip: rect(0, 0, 0, 0);
		clip-path: inset(50%);
		width: 1px;
		height: 1px;
		margin: -1px;
}

@media (min-width: 768px) {
	.order__item--head [role=columnheader] {
    font-weight: 700;
	color:green;
	    
  }
	.order__Items, .order__ASTM, .order__unit, .order__properties, .order__remark{
		width:20%;
		height:100%;
		border-right:1px solid #eee;
		}
	.order__list-container{
		/* border:20px solid #f1eaf3; */ 
		text-align:center;
		}
	.order__list {
		border-top: 1px solid #E0E0E0;
		overflow: auto;
		}
	 .order__item {
		 display: flex;
		flex-direction: row;
		justify-content: flex-start;
	
		    align-items: center;
		flex-wrap: nowrap;
		min-width: 4rem;
		height:2.5em;
	   border-bottom: 1px solid #E0E0E0;
	}
}

@media (max-width: 767px) {
	.order__item {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: stretch;
		flex-wrap: nowrap;
		margin-bottom: 1rem;
		padding: 2rem;
	}
	  .order__item--head {
		display: none;
		}
	 .order__item--body {
		border-radius: 0.5rem;
		border:1px solid #ccc;
  }
}
@media (min-width: 768px) {
  .order [role=cell] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
  }
}
@media (max-width: 767px) {
  .order [data-label] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: baseline;
    flex-wrap: nowrap;
    margin-top: 0.25rem;
    word-break: keep-all;
    color:red;
  }
  .order [data-label]::before {
    content: attr(data-label);
    font-weight: 500;
    width: 7em;
	min-width:5em;
    flex-shrink: 0;
	color:blue;
  }
}

@media (min-width: 1024px) {
	.Description_container{
		width:100%;
	}
}