/* 상단 슬라이드 이미지 */
#MSlidercolumn { overflow: hidden; width:100%; height: auto; margin:0 auto; text-align:center; }

@media (max-width: 800px) {
  #MSlidercolumn { width: 100%; margin:0 auto; }
}

@media (max-width: 600px) {
#MSlidercolumn { width: 100%; margin:0 auto; }
}


/* 상단배너 4개 */
#BannerBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; }
.first-row { display: flex; flex-wrap: wrap; padding:40px 5px; margin:0 auto; }
.first-column { flex: 20%; max-width: 25%; margin: 0 6px; display:inline-block; border:1px solid #ccc; }
.first-column img { vertical-align: middle; width:100%; height:auto; border:1px solid #ccc; }

.first-textBig { padding:20px; text-align:center; font-size:16pt; color:#444; }
.first-textMid { padding-top: 10pt; text-align:center; font-size:11pt; color:#666; }
.first-textDot { font-size:11pt; color:#666; vertical-align:4px; }

div .lineGray { border-top:1px solid #ccc; width:94%; margin:-5px 10px; text-align:center; }
.first-btn { width:100px; padding:5px; margin:20px auto; text-align:center; font-size:10pt; color:#444; background-color:#ddd; color:#666; }

@media all and (min-width: 801px) and (max-width:992px) {
  #BannerBox { width: 100%; margin:0 auto; }
  .first-column { flex: 44%; max-width: 50%; }
}

@media all and (min-width: 768px) and (max-width:800px) {
#BannerBox { width: 100%; margin:0 auto; }
	.first-column { flex: 44%; max-width: 100%; height:auto; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#BannerBox { width: 100%; margin:0 auto; }
	.first-column { flex: 100%; max-width: 100%; height:auto; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#BannerBox { width: 100%; margin:0 auto; }
	.first-column { flex: 100%; max-width: 100%; height:auto; }
}

@media all and (min-width: 320px) and (max-width:400px) {
#BannerBox { width: 100%; margin:0 auto; }
.first-column { flex: 100%; max-width: 100%; height:auto; }
}


/* 메인 상품 리스트 */
#MainProductBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; }
.Mainsecond-row { display: flex; flex-wrap: wrap; padding:10px 5px; margin:0 auto; }
.Mainsecond-column { width: 310px; height:349px; max-width: 25%; margin-left: 6px; margin-right:6px; display:inline-block; margin-bottom:80px }
.Mainsecond-column img { vertical-align: middle; width:100%; height:auto; border:1px solid #ccc; }

@media all and (min-width: 801px) and (max-width:992px) {
#MainProductBox { width: 100%; margin:0 auto; }
.Mainsecond-column { width:176px; height:195px; padding-left:7px; height:auto; max-width: 46%; }
}

@media all and (min-width: 768px) and (max-width:800px) {
#MainProductBox { width: 100%; margin:0 auto; }
.Mainsecond-column { width:176px; height:195px; padding-left:1px; height:auto; max-width: 46%; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#MainProductBox { width: 100%; margin:0 auto; }
.Mainsecond-column { width:191px; height:300px; padding-left:2px; height:auto; max-width: 46%; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#MainProductBox { width: 100%; margin:0 auto; }
.Mainsecond-column { width:191px; height:300px; padding-left:2px; height:auto; max-width: 46%; }
}

@media all and (min-width: 320px) and (max-width:400px) {
#MainProductBox { width: 100%; margin:0 auto; }
.Mainsecond-column { width:166px; height:185px; max-width: 46%; height:auto; padding-left:1px; }
}


/* 서브 상품 리스트 */
#ProductBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; margin:50px auto;}
.second-row { display: flex; flex-wrap: wrap; padding:10px 5px; margin:0 auto; }
/* .second-column { flex: 20%; max-width: 25%; margin: 0 6px; display:inline-block; margin-bottom:30px } */
.second-column { width: 310px; height:366px; max-width: 25%; margin-left: 6px; margin-right:6px; display:inline-block; margin-bottom:80px }
.second-column img { vertical-align: middle; width:100%; height:auto; border:1px solid #ccc; }


@media all and (min-width: 801px) and (max-width:992px) {
#ProductBox { width: 100%; margin:0 auto; margin:20px auto;}
.second-column { width:176px; height:195px; padding-left:7px; height:auto; max-width: 46%; }
}

@media all and (min-width: 768px) and (max-width:800px) {
#ProductBox { width: 100%; margin:0 auto; margin:20px auto;}
.second-column { width:176px; height:195px; padding-left:1px; height:auto; max-width: 46%; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#ProductBox { width: 100%; margin:0 auto; margin:20px auto;}
.second-column { width:191px; height:300px; padding-left:2px; height:auto; max-width: 46%; }
}

@media all and (min-width: 401px) and (max-width:768px) {
#ProductBox { width: 100%; margin:0 auto; margin:20px auto;}
.second-column { width:191px; height:300px; padding-left:2px; height:auto; max-width: 46%; }
}

@media all and (min-width: 320px) and (max-width:400px) {
#ProductBox { width: 100%; margin:0 auto; margin:20px auto;}
.second-column { width:166px; height:185px; max-width: 46%; height:auto; padding-left:1px; }
}



/* 검색결과 */
.search-second-column { width: 1300px; height:60px; text-align:center; padding:30px 0; display:inline-block; margin-bottom:60px; border:1px solid #ccc; }

.searchLine-second-column { width: 1300px; height:15px; text-align:left; padding:10px 0; display:inline-block; margin-bottom:20px; border-bottom:1px solid #ccc; }
.secondLT-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:12pt; color:#666; }

.second-textSmall { padding:10px 0 5px 10px; text-align:left; font-size:10pt; color:#666; }
.second-textBig { padding:0 0 5px 10px; text-align:left; font-size:12pt; color:#444; line-height:120%; }
.second-textMid { padding:0 0 5px 10px; text-align:left; font-size:11pt; color:#000; }
.second-TitleBig { margin-top:30px; margin-bottom:-5px; padding:0 0 0 10px; text-align:center; padding-bottom:20px; font-size:22pt; font-weight:700; color:#000; }


.pagination {width:100%; margin:0 auto; text-align:center;}



/* 하단 빅배너 */
#BottomBox { overflow: hidden; width: 100%; margin:0 auto; height: auto; }
.third-row { display: flex; flex-wrap: wrap; margin:0 auto; }
/* Create four equal columns that sits next to each other */
.third-column { flex: 100%; max-width: 100%; display:inline-block; margin-bottom:30px }
.third-column-pc img { display: block; vertical-align: middle; width:100%; height:auto; border:1px solid #ccc; }
.third-column-mobile img { display:none; vertical-align: middle; width:100%; height:auto; border:1px solid #ccc; }

/* Responsive layout - makes a two column-layout instead of four columns */
@media (max-width: 800px) {
  #BannerBox { width: 100%; margin:0 auto; }
  .third-column { flex: 100%; max-width: 100%; height:auto; }
  .third-column-pc img { display:none; }
  .third-column-mobile img { display: block; }

}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
#BannerBox { width: 100%; margin:0 auto; }
	 .third-column { flex: 100%; max-width: 100%; height:auto;  }
	 .third-column-pc img { display:none; }
	 .third-column-mobile img { display: block; }
}


/* 하단 10개 배너 */
#ImgBox { overflow: hidden; width: 100%; margin: 20px 0 40px 0; height: auto; }
.fourth-row { display: flex; flex-wrap: wrap; margin:0 auto; padding-top:30px; }
.fourth-column { flex: 8%; padding:30px 0; border:1px solid #ccc; margin:0 auto; }
.fourth-column img { margin:0 auto; text-align:center; vertical-align: middle; width:116px; height:auto; }
.fourth-TitleBig { margin-top:30px; margin-bottom:-5px; padding-left:10px; text-align:center; font-size:18pt; letter-spacing:-0.5px; font-weight:700; color:#000; }

.fourth-textBig { padding:10px; text-align:center; font-size:12pt; color:#444; }
.fourth-textSm { text-align:center; font-size:10pt; color:#666; }

.btnMgray { background-color: #dddddd;  border: none; color: #666; padding: 5px 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 10pt; margin: 10px 110px 20px 110px; cursor: pointer; }

@media (max-width: 800px) {
  #ImgBoxBox { width: 100%; margin:0 auto; }
  .fourth-column { flex: 49%; max-width: 50%; margin:0 auto 10px auto; }
  fourth-column img { margin:0 auto; text-align:center; vertical-align: middle; width:50%; height:auto; }
}

@media (max-width: 600px) {
#ImgBoxBox { width: 100%; margin:0 auto; }
	.fourth-column { flex: 48%; max-width: 50%; height:auto; margin:0 auto 10px auto; }
	.fourth-column img { margin:0 auto; text-align:center; vertical-align: middle; width:50%; height:auto; }
}