@charset "utf-8";


/*** 공통 **/

.i-new {font-size:12px; font-weight:400; color:#e40000; text-transform:uppercase}
.i-best {font-size:12px; font-weight:400; color:#ff6600; text-transform:uppercase}
.i-hit {font-size:12px; font-weight:400; color:#cc9933; text-transform:uppercase}


/* ******************** 데스크탑 (992~) ******************** */
@media screen and (min-width: 992px), print{
	
	/* 공통 */
	.main-wrap .inner {position:relative; width:1200px; margin: 0 auto; }
	.main-wrap .main-title {text-align:center}
	.main-wrap .main-title h2 {font-size:48px; font-weight:900; line-height:1; text-transform:uppercase;}

    /* 메인 베스트 제품 */
	.main-wrap .main-visual {position:relative; width:100%; overflow:hidden; padding:80px 0 40px; background:url(../images/main/main-visual.jpg) no-repeat; background-size:cover;}
	.main-wrap .main-visual .main-title {color:#fff; margin-bottom:57px;}
	.main-wrap .main-visual .main-title h2 {color:#fff;}
	.main-wrap .main-visual .main-title p {margin-top:10px}

	.main-visual .main-slider {position:relative; height:420px; padding:0 45px;}
	.main-visual .main-slider>section {width:100%; height:100%; overflow:hidden;}
	.main-visual .main-slider .rolling {height:100%; overflow:hidden;}
	.main-visual .main-slider .rolling:after {clear:both; content:''; display:block;}
	.main-visual .main-slider .rolling>li {float:left;padding:0 10px}
	.main-visual .main-slider .rolling>li+li {}
	.main-visual .main-slider .rolling>li>a {padding:30px; display:block; background:#fff;}
	.main-visual .main-slider .rolling>li>a>*{background:#fff}
	.main-visual .main-slider .rolling>li>a .best-img {position:relative;}
	.main-visual .main-slider .rolling>li>a .best-img:after {position:absolute; left:0; top:0; content:'HOT Choice'; width:80px; height:30px; text-align:center; line-height:30px; font-size:12px; font-weight:400; color:#fff; background:#e60b00}
	.main-visual .main-slider .rolling .best-text {height:70px; padding-top:30px; overflow:hidden; letter-spacing:-.25px;}
	.main-visual .main-slider .rolling .best-text h3 {position:relative; padding-right:70px; font-size:16px; font-weight:400; white-space:nowrap; text-overflow:ellipsis;}
	.main-visual .main-slider .rolling .best-text h3 .price {position:absolute; right:0; top:0; font-weight:300;}
	.main-visual .main-slider .rolling .best-text ul {margin-top:5px;}
	.main-visual .main-slider .rolling .best-text ul li {display:inline-block; margin-right:10px; letter-spacing:-.25px;}
	.main-visual .main-slider .rolling .best-text ul .point {float:right; margin-right:0; font-size:12px; color:#666}
	
	.main-visual .btnWrap {position:absolute;left:0; top:50%; margin-top:-27.5px; width:100%;}
	.main-visual .btnWrap button {position:absolute; height:55px;  background:none; cursor:pointer}
	.main-visual .btnWrap button.prev {left:0}
	.main-visual .btnWrap button.next {right:0}

	
	/* 메인 뉴스 */
	.main-notice {height:70px; border-bottom:1px solid #e5e5e5; overflow:hidden}
	.main-notice .inner {height:100%; border-left:1px solid #e5e5e5; border-right:1px solid #e5e5e5}
	.main-notice h3 {position:absolute; left:0; width:210px; text-align:center; text-transform:uppercase; line-height:70px;}
	.main-notice ul {position:relative; padding-left:210px; padding-right:115px;}
	.main-notice ul li {position:relative; width:100% !important; padding-right:20px}
	.main-notice ul li a {display:inline-block; width:100%; padding-left:20px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:70px}
	.main-notice ul li a .date { color:#666; margin-right:30px}
	.main-notice ul li:before {position:absolute; left:0; top:35px; content:''; display:inline-block; width:8px; height:2px; background:#9b9b9b}
	.main-notice .btnMore {position:absolute; right:0; top:0; padding-right:50px; text-align:center; line-height:70px; font-size:14px;}
	.main-notice .btnMore {background:url(../images/common/i-more.png)calc(100% - 30px) 50% no-repeat;}
	/* .main-notice .btnMore img {margin-left:10px;} */



	/* 메인 상품리스트 */
	.main-product {padding:70px 0 }
	.main-product .main-tab {text-align:center; margin:25px 0 10px;}
	.main-product .main-tab ul {display:inline-block;}
	.main-product .main-tab ul:aftet {display:block; content:''; clear:both;}
	.main-product .main-tab ul li {display:inline-block; float:left; padding: 0 30px; border-right:1px solid #e5e5e5; line-height:1}
	.main-product .main-tab ul li:last-child {border-right:none;}
	.main-product .main-tab ul li a {font-weight:400; line-height:1;}

	.main-product .main-product-list {}
	.main-product .main-product-list>ul {padding:0 20px}
	.main-product .main-product-list>ul:after {clear:both; content:''; display:block;}
	.main-product .main-product-list>ul>li {float:left; width:calc((100% - 120px)/4); margin-top:40px; transition:box-shadow .3s}
	.main-product .main-product-list>ul>li+li {margin-left:40px;}
	.main-product .main-product-list>ul>li:nth-child(4n+1) {margin-left:0; clear:both;}
	.main-product .main-product-list>ul>li:hover {box-shadow:10px 10px 10px rgba(0, 0, 0, .1);}
	.main-product .main-product-list>ul>li a {background:#fff;}

	.main-product .main-product-list .product-text {padding:30px; border:1px solid #e5e5e5; border-top:none;}
	.main-product .main-product-list .product-text dl dt {font-weight:400;}
	.main-product .main-product-list .product-text ul {margin-top:10px;}
	.main-product .main-product-list .product-text ul:after {clear:both; content:''; display:block;}
	.main-product .main-product-list .product-text ul li {float:left; margin-right:10px;}
	.main-product .main-product-list .product-text ul .point {float:right; margin-right:0; font-size:12px; color:#666}



}


/* ******************** 태블릿 (991~) ******************** */
@media screen and (max-width: 991px), print{

	/* 공통 */
	.main-wrap .inner {position:relative; padding:0 20px}
	.main-wrap .main-title {text-align:center}
	.main-wrap .main-title h2 {font-size:37px; font-weight:900; line-height:1; text-transform:uppercase;}

    /* 메인 베스트 제품 */
	.main-wrap .main-visual {position:relative; width:100%; overflow:hidden; padding:60px 0 40px; background:url(../images/main/main-visual.jpg) no-repeat; background-size:cover;}
	.main-wrap .main-visual .main-title {color:#fff; margin-bottom:40px;}
	.main-wrap .main-visual .main-title h2 {color:#fff;}
	.main-wrap .main-visual .main-title p {margin-top:10px}

	.main-visual .main-slider {position:relative; padding:0 40px;}
	.main-visual .main-slider>section {width:100%; height:100%; padding:0 20px;}
	.main-visual .main-slider .rollBanner {overflow:hidden;}
	.main-visual .main-slider .rolling {width:2000px; height:100%; overflow:hidden;}
	.main-visual .main-slider .rolling:after {clear:both; content:''; display:block;}
	.main-visual .main-slider .rolling>li {float:left;padding:0 10px}
	.main-visual .main-slider .rolling>li+li {}
	.main-visual .main-slider .rolling>li>a {display:block; padding:20px; background:#fff}
	/* .main-visual .main-slider .rolling>li>a>*{background:#fff} */
	.main-visual .main-slider .rolling>li>a .best-img {position:relative;}
	.main-visual .main-slider .rolling>li>a .best-img:after {position:absolute; left:0; top:0; content:'HOT Choice'; width:80px; height:30px; text-align:center; line-height:30px; font-size:12px; font-weight:400; color:#fff; background:#e60b00}
	.main-visual .main-slider .rolling>li>a .best-img img {width:100%;}
	.main-visual .main-slider .rolling .best-text { padding-top:20px; overflow:hidden; letter-spacing:-.25px;}
	.main-visual .main-slider .rolling .best-text h3 {position:relative; padding-right:70px; font-size:16px; font-weight:400;overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical;}
	.main-visual .main-slider .rolling .best-text h3 .price {position:absolute; right:0; top:0; font-weight:300;}
	.main-visual .main-slider .rolling .best-text ul {margin-top:15px; line-height:1}
	.main-visual .main-slider .rolling .best-text ul li {display:inline-block; margin-right:10px; letter-spacing:-.25px;}
	.main-visual .main-slider .rolling .best-text ul .point {float:right; margin-right:0; font-size:12px; color:#666}
	
	.main-visual .btnWrap {position:absolute;left:0; top:50%; margin-top:-27.5px; width:100%;}
	.main-visual .btnWrap button {position:absolute; height:55px;  background:none;}
	.main-visual .btnWrap button.prev {left:0}
	.main-visual .btnWrap button.next {right:0}

	
	/* 메인 뉴스 */
	.main-notice {height:70px; border-bottom:1px solid #e5e5e5; overflow:hidden}
	.main-notice .inner {height:100%;}
	.main-notice h3 {position:absolute; left:0; display:inline-block; padding:0 20px; text-align:center; text-transform:uppercase; line-height:70px;}
	.main-notice ul {position:relative; padding-left:160px; padding-right:80px;}
	.main-notice ul li {position:relative; width:100% !important; padding-right:20px}
	.main-notice ul li a {display:inline-block; width:100%; padding-left:20px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; line-height:70px}
	.main-notice ul li a .date { color:#666; margin-right:20px}
	.main-notice ul li:before {position:absolute; left:0; top:35px; content:''; display:inline-block; width:8px; height:2px; background:#9b9b9b}
	.main-notice .btnMore {position:absolute; right:0; top:0; display:inline-block; padding:0 40px 0 20px; text-align:center; line-height:70px; font-size:14px;}
	.main-notice .btnMore {background:url(../images/common/i-more.png)calc(100% - 20px) 50% no-repeat;}
	/* .main-notice .btnMore img {margin-left:10px;} */



	/* 메인 상품리스트 */
	.main-product {padding:50px 0 }
	.main-product .main-tab {text-align:center; margin:20px 0 10px;}
	.main-product .main-tab ul {display:block; border:1px solid #e5e5e5}
	.main-product .main-tab ul:after {display:block; content:''; clear:both;}
	.main-product .main-tab ul li {display:inline-block; float:left; width:33.33%; text-align:center; border-right:1px solid #e5e5e5; line-height:1; border-bottom:1px solid #e5e5e5;}
	.main-product .main-tab ul li.pc {display:block !important; border-bottom:none;}
	.main-product .main-tab ul li.mobile {display:none !important}
	.main-product .main-tab ul li:nth-child(3) {border-right:none;}
	.main-product .main-tab ul li:nth-child(4), .main-product .main-tab ul li:nth-child(5) {border-bottom:none}
	.main-product .main-tab ul li a {display:block; font-weight:400; padding:15px 20px; line-height:1;}

	.main-product .main-product-list {}
	.main-product .main-product-list>ul {}
	.main-product .main-product-list>ul:after {clear:both; content:''; display:block;}
	.main-product .main-product-list>ul>li {float:left; width:calc((100% - 20px)/2); margin-top:20px; transition:box-shadow .3s}
	.main-product .main-product-list>ul>li+li {margin-left:20px;}
	.main-product .main-product-list>ul>li:nth-child(2n+1) {margin-left:0; clear:both;}
	.main-product .main-product-list>ul>li:hover {box-shadow:5px 5px 5px rgba(0, 0, 0, .1);}
	.main-product .main-product-list>ul>li a {background:#fff;}
	.main-product .main-product-list>ul>li a img {width:100%;}

	.main-product .main-product-list .product-text {padding:20px; border:1px solid #e5e5e5; border-top:none;}
	.main-product .main-product-list .product-text dl dt {font-weight:400;}
	.main-product .main-product-list .product-text ul {margin-top:10px;}
	.main-product .main-product-list .product-text ul:after {clear:both; content:''; display:block;}
	.main-product .main-product-list .product-text ul li {float:left; margin-right:10px;}
	.main-product .main-product-list .product-text ul .point {float:right; margin-right:0; font-size:12px; color:#666}




}




/* ******************** 모바일 (767~) ******************** */
@media screen and (max-width: 767px), print{

	.main-wrap .main-title h2 {font-size:30px; line-height:1.2}
	.main-wrap .main-visual .main-title p {padding:0 15px;}
	.main-visual .main-slider .rolling .best-text h3 {word-break:keep-all; }
	
	.main-visual .main-slider {padding:0 20px;}
	.main-visual .main-slider>section {padding:0px}
	.main-visual .main-slider .rolling .best-text {height:auto}
	.main-visual .main-slider .rolling .best-text ul {margin-top:15px; line-height:1}
	.main-visual .main-slider .rolling>li {padding:0 10px}

	.main-visual .btnWrap button {padding:0}
	.main-visual .btnWrap button img {width:15px;}


	.main-notice {height:auto;}
	.main-notice .inner {padding:20px 20px 5px}
	.main-notice h3 {position:relative; padding:0; text-align:left; line-height:normal;}
	.main-notice ul {padding:0}
	.main-notice ul li {padding-right:0}
	.main-notice ul li a {padding-left:15px; line-height:50px;}
	.main-notice .bxslider_wrap {margin-top:10px}
	.main-notice ul li:before {top:24px}
	.main-notice .bx-controls {display:none;}
	.main-notice .btnMore {line-height:normal; top:24px;}
	
	.main-product .main-tab ul li {width:50%;}
	.main-product .main-tab ul li a {padding:15px 0}
	.main-product .main-tab ul li:nth-child(2n) {border-right:none}
	.main-product .main-tab ul li:nth-child(3) {border-right:1px solid #e5e5e5}
	.main-product .main-tab ul li.mobile {border-bottom:1px solid #e5e5e5}
	.main-product .main-tab ul li:nth-child(4) {border-bottom:1px solid #e5e5e5}
	.main-product .main-tab ul li:nth-child(5) {width:100%; border-right:none;}
	.main-product .main-tab ul li.pc {display:none !important}
	.main-product .main-tab ul li.mobile {display:block !important}


	.main-product .main-product-list>ul>li {width:calc((100% - 10px)/2); margin-top:10px;}
	.main-product .main-product-list>ul>li+li {margin-left:10px}
	.main-product .main-product-list .product-text {padding:10px;}
	.main-product .main-product-list .product-text ul .point {float:left; width:100%; margin-top:5px}
	.main-product .main-product-list .product-text dl dt {text-overflow:ellipsis; overflow:none; white-space:nowrap}




}


/* ******************** 모바일 (500~) ******************** */
@media screen and (max-width: 500px), print{
	
	.main-product .main-product-list>ul>li {width:100%; margin-left:0 !important;}
	.main-product .main-product-list>ul>li:nth-child(2n+1) {}
	
	
	
	
}