/* 상단 슬라이드 이미지 */
#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; }
}




/* 상단배너 3개 */
#BannerBox { overflow: hidden; width: 1300px; margin:0 auto; height: auto; }
.first-row { display: flex; flex-wrap: wrap; padding:80px 0; margin:0 auto; }
.first-column { flex: 30%; max-width: 33%; margin: 0 6px; text-align:center; display:inline-block;}
.first-column img { vertical-align: middle; width:100%; height:auto; padding: 0; }

.first-column-img01 {background-image: url('/olane/img/mbannerT001.jpg'); background-repeat: no-repeat; width:418px; height:308px;}
.first-column-img02 {background-image: url('/olane/img/mbannerT002.jpg'); background-repeat: no-repeat; width:418px; height:308px;}
.first-column-img03 {background-image: url('/olane/img/mbannerT003.jpg'); background-repeat: no-repeat; width:418px; height:308px;}

.first-column-img01-box {padding:140px 0;}
.first-column-text01 {vertical-align:middle; padding:5px 20px; background-color: rgba(0, 0, 0, 0.5); color:#fff; font-size:18pt;}

@media all and (min-width: 768px) and (max-width:820px) {
#BannerBox { width: 100%; margin:0 auto; }
.first-column { flex: 30%; max-width: 33%; margin:0 6px; text-align:center; display:inline-block;}
.first-column img { vertical-align: middle; width:100%; height:auto; padding: 0; }

.first-column-img01 {width:100%; height:auto;}
.first-column-img02 {width:100%; height:auto;}
.first-column-img03 {width:100%; height:auto;}

}

@media all and (min-width: 401px) and (max-width:768px) {
#BannerBox { width: 100%; margin:0 auto; }
.first-column { flex: 90%; max-width: 100%; margin: 6px; text-align:center; display:inline-block;}
.first-column img { vertical-align: middle; width:100%; height:auto; padding: 0; }

.first-column-img01 {width:100%; height:auto;}
.first-column-img02 {width:100%; height:auto;}
.first-column-img03 {width:100%; height:auto;}
}

@media all and (min-width: 320px) and (max-width:400px) {
#BannerBox { width: 100%; margin:0 auto; }
.first-column { flex: 90%; max-width: 100%; margin: 6px; text-align:center; display:inline-block;}
.first-column img { vertical-align: middle; width:100%; height:auto; padding: 0; }

.first-column-img01 {width:100%; height:auto;}
.first-column-img02 {width:100%; height:auto;}
.first-column-img03 {width:100%; height:auto;}
}


/* 메인 상품 리스트 */
#MainProductBox { overflow: hidden; width: 1300px; margin:80px 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:12pt; color:#444; line-height:150%; letter-spacing:-0.5px; }
.SubC-second-textMid { padding-left:10px; padding-bottom:5px; text-align:left; font-size:12pt; color:#000; font-weight:bold; }

@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; }

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



/*  첫번째 섹션 */
#First-section-Box {overflow: hidden; width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#First-section-inner-box {width: 1300px; margin:0 auto; height: auto; text-align:center;}
.first-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.first-section-box-column {flex: 48%; max-width: 50%; margin: 0 6px; text-align:left; display:inline-block;}

.first-section-box-column-img01 img {vertical-align: middle; width:222px; height:auto; padding:10px 0 20px 0;}
.first-section-box-column-img02 img {vertical-align: middle; width:546px; height:auto; padding-top: 60px;}
.first-section-box-column-img03 img {vertical-align: middle; width:615px; height:auto; padding: 20px 0;}

.first-section-box-column-text01 {color:#fff; font-size:20pt; padding-bottom:20px;}
.first-section-box-column-text02 {color:#f8f8f8; font-size:16pt; font-weight:250;line-height:140%;}

@media all and (min-width: 401px) and (max-width:820px) {
#First-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#First-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:center;}

.first-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.first-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:left;}

.first-section-box-column-img01 img {width:222px; height:auto;}
.first-section-box-column-img02 img {display:none;}
.first-section-box-column-img03 img {width: 100%; height:auto;}

.first-section-box-column-text-box { width:100%; height:auto}
.first-section-box-column-text01 {color:#fff; font-size:20pt; padding:5px 0;}
.first-section-box-column-text02 {width:100%; height:auto; color:#f8f8f8; font-size:14pt;font-weight:250;line-height:140%;}
}

@media all and (min-width: 320px) and (max-width:400px) {
#First-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#First-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:center;}
.first-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.first-section-box-column {flex: 48%; max-width: 50%; margin: 0 6px; text-align:left; display:inline-block;}

.first-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.first-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:left;}

.first-section-box-column-img01 img {width:50%; height:auto;}
.first-section-box-column-img02 img {display:none;}
.first-section-box-column-img03 img {width: 100%; height:auto;}

.first-section-box-column-text-box { width:100%; height:auto}
.first-section-box-column-text01 {color:#fff; font-size:20pt;}
.first-section-box-column-text02 {width:100%; height:auto; color:#f8f8f8; font-size:13pt; letter-spacing:-0.5px; font-weight:250;line-height:140%;}
}


/* 두번째 섹션 */
#Second-section-Box {overflow: hidden; width: 100%; margin:0 auto; height: auto; background-color:#000;}
#Second-section-inner-box {width: 1300px; margin:0 auto; height: auto; text-align:right;}
.second-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.second-section-box-column {flex: 48%; max-width: 50%; margin: 0 6px; text-align:right; display:inline-block;}

.second-section-box-column-img01 img {vertical-align: middle; width:222px; height:auto; padding:10px 0 20px 0;}
.second-section-box-column-img02 img {vertical-align: middle; text-align:right; width:420px; height:auto; padding-top: 60px;}
.second-section-box-column-img03 img {vertical-align: middle; text-align:right; width:615px; height:auto; padding: 20px 0;}

.second-section-box-column-text01 {color:#fff; font-size:20pt; padding-bottom:20px;}
.second-section-box-column-text02 {color:#f8f8f8; font-size:16pt; font-weight:250;line-height:140%;}

@media all and (min-width: 401px) and (max-width:820px) {
#Second-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#000;}
#Second-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:right;}

.second-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.second-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:right;}

.second-section-box-column-img01 img {width:222px; height:auto;}
.second-section-box-column-img02 img {display:none;}
.second-section-box-column-img03 img {width: 100%; height:auto;}

.second-section-box-column-text-box { width:100%; height:auto}
.second-section-box-column-text01 {color:#fff; font-size:20pt; padding:5px 0;}
.second-section-box-column-text02 {width:100%; height:auto; text-align:right; color:#f8f8f8; font-size:14pt;font-weight:250;line-height:140%;}
}

@media all and (min-width: 320px) and (max-width:400px) {
#Second-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#000;}
#Second-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:right;}

.second-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.second-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:right;}

.second-section-box-column-img01 img {width:50%; height:auto;}
.second-section-box-column-img02 img {display:none;}
.second-section-box-column-img03 img {width: 100%; height:auto;}

.second-section-box-column-text-box {width:100%; height:auto;}
.second-section-box-column-text01 {color:#fff; font-size:20pt; padding:5px 0;}
.second-section-box-column-text02 {width:100%; height:auto; color:#f8f8f8; text-align:right; font-size:14pt;font-weight:250;line-height:140%;}
}


/* 세번째 섹션 */
#Third-section-Box {overflow: hidden; width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#Third-section-inner-box {width: 1300px; margin:0 auto; height: auto; text-align:center;}
.third-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.third-section-box-column {flex: 48%; max-width: 50%; margin: 0 6px; text-align:left; display:inline-block;}

.third-section-box-column-img01 img {vertical-align: middle; width:222px; height:auto; padding:10px 0 20px 0;}
.third-section-box-column-img02 img {vertical-align: middle; width:546px; height:auto; padding-top: 60px;}
.third-section-box-column-img03 img {vertical-align: middle; width:615px; height:auto; padding: 20px 0;}

.third-section-box-column-text01 {color:#fff; font-size:20pt; padding-bottom:20px;}
.third-section-box-column-text02 {color:#f8f8f8; font-size:16pt; font-weight:250;line-height:140%;}

@media all and (min-width: 401px) and (max-width:820px) {
#Third-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#Third-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:center;}

.third-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.third-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:left;}

.third-section-box-column-img01 img {width:222px; height:auto;}
.third-section-box-column-img02 img {display:none;}
.third-section-box-column-img03 img {width: 100%; height:auto;}

.third-section-box-column-text-box { width:100%; height:auto}
.third-section-box-column-text01 {color:#fff; font-size:20pt; padding:5px 0;}
.third-section-box-column-text02 {width:100%; height:auto; color:#f8f8f8; font-size:14pt;font-weight:250;line-height:140%;}
}

@media all and (min-width: 320px) and (max-width:400px) {
#Third-section-Box {width: 100%; margin:0 auto; height: auto; background-color:#2e323b;}
#Third-section-inner-box {width: 100%; margin:0 auto; height: auto; text-align:center;}
.third-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.third-section-box-column {flex: 48%; max-width: 50%; margin: 0 6px; text-align:left; display:inline-block;}

.third-section-box-row {display: flex; flex-wrap: wrap; padding:40px 0; margin:0 auto; vertical-align:middle;}
.third-section-box-column {flex: 90%; max-width: 100%; margin: 0 6px; text-align:left;}

.third-section-box-column-img01 img {width:50%; height:auto;}
.third-section-box-column-img02 img {display:none;}
.third-section-box-column-img03 img {width: 100%; height:auto;}

.third-section-box-column-text-box { width:100%; height:auto}
.third-section-box-column-text01 {color:#fff; font-size:20pt; padding:5px 0;}
.third-section-box-column-text02 {width:100%; height:auto; color:#f8f8f8; font-size:14pt;font-weight:250;line-height:140%;}
}