@charset "UTF-8";

/* 상단슬라이더 */
	@media (max-width:991px) {
	#main #main_v{ padding: 0; overflow:hidden }
	#main { background: #f1f1f1; }
	}

#main .box_02, #main .box_04, #main .box_05, #main .box_06{ padding: 2% 0 0 0; }
@media (max-width:991px) {
	#main .box_02, #main .box_04, #main .box_05, #main .box_06{ padding: 0; }
}

#main .box_01 {background: #f2f2f2;  padding: 2% 0; }
#main .box_01 ul { margin: 0 -10px; overflow:hidden; }
#main .box_01 ul li { float: left; width: 20%; padding: 0 10px; }
#main .box_03 { padding: 2% 0; }
@media (max-width:991px) {
	#main .box_03 { padding: 5% 0 0 0; }
	#main .box_01 { padding: 0; }
	#main .box_01 .title{ padding: 15px 10px; }
	.m_box_01{ overflow: hidden; background: #f1f1f1; }
	.m_box_01 li{ float: left; width: 33.3%; border-bottom: 1px solid #f2f2f2; }
	.m_box_01 li img{ width: auto; max-width: 100%; }
	.m_box_01 li a{ display: block; padding: 10px; text-align: center; }
	.m_box_01 li span{ padding: 10px 0 0 0; display: block; }
	#main .box_01 .bx-wrapper .bx-pager{ top: -40px; right: 5px; bottom: auto; width: auto; }
	#main .box_01 .bx-wrapper .bx-pager.bx-default-pager a{ background: rgba(0, 0, 0, 0.3); }
	#main .box_01 .bx-wrapper .bx-pager.bx-default-pager a.active{ background: rgba(0, 0, 0, 0.9);; }
}

#main .box_01 .md li{ float: left; width:25%; padding:0 5px; }
#main .box_01 .md .img{ position: relative; padding-top: 99%; border:1px solid #e5e5e5; background: #fff; overflow: hidden; }
#main .box_01 .md .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }
#main .box_01 .md li i{ position: absolute; display: block; right: 15px; top: 0; padding: 5px; font-size: 12px; font-weight: 500; text-align: center; color: #fff; background: #e72d18; }
#main .box_01 .md .text{ padding: 10px; background: #fff; }
#main .box_01 .md .text b{ line-height: 1.1em; color: #333333; }
#main .box_01 .md .text span{ margin: 6px 0; font-weight: 800; }
#main .box_01 .md .img{ position: relative; padding-top: 99%; /* 1:1 ratio */ overflow: hidden; background:#fff; }
#main .box_01 .md .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }

#main .pmt .bx-wrapper .bx-pager { right: 20px; float: right; width: 10px; bottom: auto; top: 40%; }

.title { font-weight: 700; padding:0 0 15px 0 ; line-height: 1.7em; }
.title i{ vertical-align: top; }
.title a{ float: right; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; border-radius: 50px; background: #0081ca; }

.story_list li{ float: left; width: 25%; padding:10px; }
.story_list li > div{ position: relative; padding: 10px; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: -1px 1px 5px #e0e0e0; }
.story_list .img{ position: relative; margin: -10px; padding-top: 110%; overflow: hidden; }
.story_list .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }
.story_list .img i{ position: absolute; right: 10px; bottom: 10px; width:35px; height: 35px; background: url(../../img/common/good_off.png) center center no-repeat; cursor: pointer; }
.story_list .img i.on{ background: url(../../img/common/good_on.png) center center no-repeat; }
.story_list .date{ padding: 15px 0; }
.story_list .date:hover p{ border-bottom: 1px solid #000; }
.story_list .date p{ line-height: 1.7em; font-weight: 500; color: #222; border-bottom: 1px solid #fff; }
.story_list .date h6{padding: 5px 0 0 0; }
.story_list .tag a{ display: block; float: left; padding: 0 5px 0 0; border-bottom: 1px solid #fff; } 
.story_list .tag a:hover { border-bottom: 1px solid #000; }

@media (max-width:991px) {
	.story_list li{ width: 100%; }
/* 	.story_list li > div { padding: 10px; border-radius: 10px; box-shadow: 2px 2px 2px rgba(0,0,0,0.1); background: #fff; overflow: hidden; } */
	.story_list .img{ float: left; width: 40%; margin: 0; padding-top: 40%; border-radius: 10px; }
	.story_list .img img{ border-radius: 10px; }
	.story_list .img i{ right: 5px; bottom: 5px; }
	.story_list .date{ float: left; width: 60%; padding: 0 0 0 10px; }
	.story_list .tag{ float: left; width: 60%; padding: 20px 0 0 10px; }
}

/* 상품리스트 */
.product_list li{ float: left; width: 25%; padding: 10px; }
.product_list a{ display: block; padding:10px; border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #fff; } /* box-shadow: -1px 1px 5px #e0e0e0; */
.product_list .img{ position: relative; margin: -10px; padding-top: 110%; overflow: hidden; }
.product_list .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }
.product_list .text{ padding: 15px 0 0 0; }
.product_list i{ display: inline-block; padding: 5px 10px; font-size: 11px; line-height:1em; letter-spacing: -1px; border:1px solid; border-radius:20px; }
.product_list .no_icon{ padding:0; border:0; }
.product_list .name{ margin: 5px 0; font-weight: 700; letter-spacing: -1px; line-height: 1.5em; height: 3.5em; color: #000; }
.product_list h6 { color:#858585; }
.product_list .price{ padding: 10px 0 0 0; }
.product_list .price td{ text-align: right; }
.product_list .price p b{ font-size:2em; }
.product_list .price .sale{ font-size:12px; text-decoration:line-through; color:#afafaf; }
.product_list .price .pay{ color:#e72d18; }
.product_list .price .pay span{ font-size:1.3em; font-weight: 500; }

.no_data{ width: 100% !important; text-align: center; background: #fff; }
.no_data i{ font-size: 2em !important; border-bottom: 0 !important; font-size: 2em; }
.no_data p{ padding: 20px 10px; font-size: 1.2em; font-weight: 500; }


@media (max-width:991px) {
	.product_list li{ width: 100%; padding: 0; }
	.product_list a{ padding:10px; border-radius: 10px; border:0; border-radius: 0;  border-bottom:1px solid #f1f1f1; } /* box-shadow: 2px 2px 2px rgba(0,0,0,0.1); */
	.product_list .img{ float: left; width: 40%; margin: 0; padding-top: 40%; border-radius: 10px; }
	.product_list .img img{ border-radius: 10px; }
	.product_list .text{ float: left; width: 60%; padding: 0 0 0 10px; }
	.product_list i{ padding: 0 5px; }
	.product_list h5{ padding: 5px 0; }
	.product_list .price{ padding: 0; }
}

/*쿠폰*/
.coupon_list li > div{ border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #0081ca; box-shadow: -1px 1px 5px #e0e0e0; }
.coupon_list .coupon{ position: relative; }
.coupon_list .coupon .cupon_on{ display: block; }
.coupon_list .coupon .cupon_off{ display: none; }
.coupon_list li { float: left; width: 25%; padding: 10px }
.coupon_list .img{ position: relative; margin: 0; padding-top: 100%; overflow: hidden; }
.coupon_list .img img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; height: auto; }
.coupon_list .coupon .coupon_info{ position: absolute; top:50%; left: 0; transform: translate(0, -50%); width: 85%; padding: 5% 7%; text-align: center; }
.coupon h6{ padding: 0 0 4% 0; text-align: left; color: #0081ca; text-align: left; }
.coupon a{ display: inline-block; padding:0 0 1% 0; border-bottom: 1px solid #fff; }
.coupon a:hover{ border-bottom: 1px solid #e5e5e5; }
.coupon_list p{ text-align: center; font-size:12px; font-weight: 500; }
.coupon span{ display: inline-block; padding: 5% 0 0 0; text-align: center; color: #0081ca; line-height: 1em; border-bottom: 1px solid #fff; cursor: pointer; }
.coupon span:hover{ border-bottom: 1px solid #e5e5e5; }

.coupon_list .on h6{ color: #ccc; }
.coupon_list .on p{ color: #ccc; }
.coupon_list .on span{ color: #ccc; }
.coupon_list .on .cupon_on{ display: none; }
.coupon_list .on .cupon_off{ display: block; }

@media (max-width:991px) {
	.coupon_list li{ width: 100%; }
	.coupon_list li > div{ padding:0; overflow: hidden; }
	.coupon_list .img{ float: left; width: 35%; padding-top: 35%; }
	.coupon_list .coupon{ float: left; width: 65%; }
	.coupon h6{ padding: 0 0 5px 0; }
	.coupon span{ padding: 5px 0 0 0; }
}

.mobile_popup{ display:none; }
.pc_popup .no_more{ display: inline-block; padding: 0 5px 0 0; vertical-align: middle; }
.pc_popup button{ display: inline-block; height: 25px;}
@media (max-width:991px) {
	.pc_popup{ display: none; }
	.mobile_popup{ display:block; }
}