/* »ó´Ü ½½¶óÀ̵å À̹ÌÁö */
#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; }
}



/* »ó´Ü¹è³Ê 2°³ */
#Top-BannerBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; }
.Top-first-row { display: flex; flex-wrap: wrap; padding:40px 5px; margin:0 auto; }
.Top-first-column { flex: 44%; max-width: 50%; margin: 0 4px; text-align:center; display:inline-block; }
.Top-first-column img { vertical-align: middle; width:100%; height:auto; }

.Top-first-textBGray { color:#444; font-size:14pt; text-align:center; line-height:140%; }
.Top-first-textGray-line { border-top:2px solid #999; margin:0 auto; vertical-align:middle; width: 50%; padding-top:10px; }
.Top-first-textGray { color:#999; font-size:14pt; text-align:center; }

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

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

@media all and (min-width: 401px) and (max-width:768px) { 
#Top-BannerBox { width: 100%; margin:0 auto; }
	.Top-first-column { flex: 100%; max-width: 100%; height:auto; margin-bottom:15px; }
	.Top-first-textBGray { color:#444; font-size:14pt; text-align:center; line-height:140%; padding:0 20px; }
}

@media all and (min-width: 401px) and (max-width:768px) { 
#Top-BannerBox { width: 100%; margin:0 auto; }
	.Top-first-column { flex: 100%; max-width: 100%; height:auto; margin-bottom:15px; }
	.Top-first-textBGray { color:#444; font-size:14pt; text-align:center; line-height:140%; padding:0 20px; }
}

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

.Top-first-textBGray { color:#444; font-size:14pt; text-align:center; line-height:140%; padding:0 20px; }
}



/* »ó´Ü¹è³Ê 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; padding-bottom:20px; text-align:center; display:inline-block; border:1px solid #ccc; }
.first-column img { vertical-align: middle; width:70%; height:auto; padding:20px 0; }

/* 2020 0302 ¼öÁ¤ */
.first-textBig {padding:10px; text-align:center; font-size:14pt; color:#000;}
.first-textBig-gray {text-align:center; font-size:12pt; color:#666; font-weight:300; letter-spacing:0.2px;}
.first-textBig-red {text-align:center; font-size:10pt; color:#ff0000; font-weight:300; letter-spacing:0.2px;}
.first-textMid {text-align:center; font-size:11pt; color:#444; font-weight:350;letter-spacing:0.2px;}
.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%; margin-bottom:15px; }
}

@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; margin-bottom:15px; }
}

@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; margin-bottom:15px; }
}

@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; margin-bottom:15px; }
}

@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; margin-bottom:15px; }
}


/* ¸ÞÀÎ »óÇ° ¸®½ºÆ® */
#MainProductBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; }
.Mainsecond-row { display: flex; flex-wrap: wrap; padding:10px 5px; margin:0 auto; text-align:center; }
.Mainsecond-column { width: 24%; height:auto; max-width: 25%; margin-left: 6px; margin-right:6px; vertical-align:middle; display:inline-block; margin-bottom:40px }
.Mainsecond-column-line { text-align:center; width:100%; padding:20px 0; height:auto; border:1px solid #ccc; }
.Mainsecond-column img { vertical-align: middle; width: 150px; height:150px; width:70%; padding:20px 0; height:auto; }

@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:349px; max-width: 25%; margin-left: 6px; margin-right:6px; display:inline-block; margin-bottom:80px }
.second-column-line { text-align:center; width:100%; padding:20px 0; height:auto; border:1px solid #ccc; }
.second-column img { vertical-align: middle; width: 150px; height:150px; width:70%; padding:20px 0; height:auto; }

.second-column-box { width: 97%; height:auto; max-width: 97%; background-color:#000; color:#fff; font-size:10pt; padding:15px; vertical-align:middle; display:inline-block; margin-bottom:40px }
.second-column-lineRight { color:#999; vertical-align:2px; font-size:8pt; padding:0 10px;  }

.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:10pt; color:#666; }
.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:14pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:13pt; color:#000; }

@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%; margin-bottom:40px }

.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:9pt; color:#666; }
.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; }
}

@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%; margin-bottom:40px }
.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:9pt; color:#666; }

.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; }
}

@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%; margin-bottom:40px }

.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:9pt; color:#666; }
.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; }
}

@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%; margin-bottom:40px }

.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:9pt; color:#666; }
.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; }
}

@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; margin-bottom:40px }

.SubC-second-textSmall { padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:9pt; color:#666; }
.SubC-second-textBig { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#444; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; }
}


/* °Ë»ö°á°ú */
.search-second-column { width: 99%; height:60px; text-align:center; padding:30px 0; display:inline-block; margin-bottom:60px; border:1px solid #ccc; }

.searchLine-second-column { width: 99%; 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; }


/* 2020 0302 */
.second-textSmall {padding-left:10px; padding-bottom:5px; padding-top: 10pt; text-align:left; font-size:10pt; color:#666; letter-spacing:0.2px;}
.second-textBig {padding-left:10px; padding-bottom:5px; text-align:left; font-size:14pt; color:#444;}
.second-textMid {padding-left:10px; padding-bottom:5px; text-align:left; font-size:13pt; color:#000;}
.second-text-M-gary {padding-left:10px; padding-bottom:5px; text-align:left; font-size:11pt; color:#666; letter-spacing:0.2px; font-weight:300;}
.second-text-M-red {padding-bottom:5px; text-align:left; font-size:11pt; color:#ff0000; letter-spacing:0.2px; font-weight:300;}
.second-TitleBig {margin-top:30px; margin-bottom:-5px; padding-left:10px; text-align:center; padding-bottom:20px; font-size:24pt; font-weight:700; color:#000;}

.pagination { text-align:center; padding-bottom:12px; }
.pagination a { color: black; padding: 8px 16px; text-decoration: none; transition: background-color .3s; text-align:center; }
.pagination a.active { background-color: #ccc; color: white; }
.pagination a:hover:not(.active) {background-color: #999;}


/* ÇÏ´Ü ºò¹è³Ê */
#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:20pt; 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; }
}