/*-------------------------------------- MAIN  ----------------------------*/
.mainBox {width:100%; font-family:'SCDream4'; font-weight:500;}

/**
.mainBox .slideBox {margin:0 auto; width:100%; max-width:1920px; height:400px; background-color:#333029;}
.mainBox .slideBox ul {margin:0 auto; width:1280px; height:100%;}
*/
.mainBox .slideBox {margin:0 auto 40px; width:100%; max-width:1920px;}
.mainBox .slideBox ul {margin:0 auto; width:100%; height:100%;}
.mainBox .slideBox ul li {width:100%; overflow:hidden;}
.mainBox .slideBox ul li .onlyweb {display:block;}
.mainBox .slideBox ul li .onlymobile {display:none;}

.mainBox .categoryListBox {width:100%;}
.mainBox .categoryListBox ul {margin:0 auto; width:100%; max-width:1200px; text-align:center;}
.mainBox .categoryListBox ul:after {display:block; clear:both; content:"";}
.mainBox .categoryListBox ul li {float:left; margin:0 15px 15px 0; width:390px; height:141px; letter-spacing:-0.9px; font-size:15px;}
.mainBox .categoryListBox ul li:last-child {margin-right:0;}
.mainBox .categoryListBox ul li .imgBox {width:100%; height:100%; background-color:#eee;}

@media screen and (max-width:1200px) {
	.mainBox .categoryListBox ul li {float:none; display:inline-block; margin:0 auto; max-width:100%;}
}

.mainBox .shopeeBox {width:100%;}
.mainBox .shopeeBox .centerBox {margin:0 auto; width:100%; max-width:1200px; text-align:center;}
.mainBox .shopeeBox .centerBox:after {display:block; clear:both; content:"";}
.mainBox .shopeeBox .centerBox .shopeeWorldBox {float:left; margin-bottom:15px; width:796px; max-width:100%; height:288px; background-color:#eee; background-image:url('/images/main/main1.1/shopeeworld.png'); background-repeat:no-repeat; background-position:center; background-size:cover;}
.mainBox .shopeeBox .centerBox .shopeeApplyBox {float:right; margin-bottom:15px; width:390px; height:288px; background-color:#eee;}
@media screen and (max-width:1200px) {
	.mainBox .shopeeBox .centerBox .shopeeWorldBox,
	.mainBox .shopeeBox .centerBox .shopeeApplyBox {float:none; display:inline-block; max-width:100%;}
}

.mainBox .midBannerBox {margin:100px 0; width:100%; height:136px; background-image:url('/images/main/main1.1/midBanner.png'); background-position:center; background-repeat:no-repeat; background-size:cover;}
@media screen and (max-width:1200px) {
	.mainBox .midBannerBox {margin:40px 0; height:64px;}
}
@media screen and (max-width:600px) {
	.mainBox .slideBox ul li .onlyweb {display:none;}
	.mainBox .slideBox ul li .onlymobile {display:block;}
	.mainBox .categoryListBox {display:none;}
	.mainBox .shopeeBox .centerBox .shopeeWorldBox {margin:0; width:100%; height:288px; background-color:#eee; background-image:url('/images/main/main1.1/shopeeworld_m.png');}
	.mainBox .shopeeBox .centerBox .shopeeApplyBox {margin-bottom:0;}
	.mainBox .midBannerBox {margin:0; height:300px; background-image:url('/images/main/main1.1/midBanner_m.png');}
}

.mainBox .bottomBannerBox {margin-bottom:112px; width:100%;}
.mainBox .bottomBannerBox .centerBox {margin:0 auto; width:100%; max-width:1200px; text-align:center;}
.mainBox .bottomBannerBox .centerBox:after {display:block; clear:both; content:"";}
.mainBox .bottomBannerBox .centerBox .banner {float:left; margin:0 15px 15px 0; width:586px; max-width:100%; height:214px;}
.mainBox .bottomBannerBox .centerBox .banner:last-child {margin-right:0;}
@media screen and (max-width:1200px) {
	.mainBox .bottomBannerBox .centerBox .banner {float:none; display:inline-block;}
}

.mainBox .notifyBox {width:100%;}
.mainBox .notifyBox .centerBox {margin:0 auto; width:100%; max-width:1200px; text-align:center;}
.mainBox .notifyBox .centerBox ul {width:100%;}
.mainBox .notifyBox .centerBox ul:after {display:block; clear:both; content:"";}
.mainBox .notifyBox .centerBox ul li {float:left; margin:0 15px 15px 0; width:379px; height:310px; letter-spacing:-0.9px; font-size:15px; background-color:#eee;}
.mainBox .notifyBox .centerBox ul li:last-child {margin-right:0;}
.mainBox .notifyBox .centerBox ul li .imgBox {width:100%; height:100%; background-color:#eee;}

@media screen and (max-width:1200px) {
	.mainBox .notifyBox .centerBox ul li {float:none; display:inline-block; margin:0 auto; max-width:100%;}
}



/***** 리스트 스타일 *****/
@media screen and (min-width:1001px) {
	.mainBox .popularListBox {box-sizing:border-box; padding:70px 0 30px; width:100%;}
	.mainBox .popularListBox .wrapBox {margin:0 auto; width:100%; max-width:1200px;}
	.mainBox .popularListBox .wrapBox .titleBox {float:left; width:100%; max-width:320px; font-size:15px; color:#929292;}
	.mainBox .popularListBox .wrapBox .rollingBox {float:right; width:100%; max-width:calc(100% - 320px); overflow:hidden;}
	.mainBox .popularListBox .wrapBox .titleBox .allowBox {margin-top:41px;}
}
@media screen and (max-width:1000px) {
	.mainBox .popularListBox {box-sizing:border-box; padding:70px 10px 30px; width:100%;}
	.mainBox .popularListBox .wrapBox {margin:0 auto; width:100%;}
	.mainBox .popularListBox .wrapBox .titleBox {width:100%; max-width:320px; font-size:15px; color:#929292;}
	.mainBox .popularListBox .wrapBox .rollingBox {width:100%; overflow:hidden;}
	.mainBox .popularListBox .wrapBox .titleBox .allowBox {margin-top:10px;}
}
.mainBox .popularListBox .wrapBox:after {display:block; clear:both; content:"";}
.mainBox .popularListBox .wrapBox .titleBox .ItemTitle {margin-bottom:2px; width:100%; font-size:30px; font-weight:bold; color:#000;}
.mainBox .popularListBox .wrapBox .titleBox .allowBox {width:100%; font-size:20px; font-weight:bold; color:#929292;}
.mainBox .popularListBox .wrapBox .titleBox .allowBox span {display:inline-block; padding:10px; border-radius:4px; cursor:pointer;}
.mainBox .popularListBox .wrapBox .titleBox .allowBox span:hover {color:#000; background-color:#eee;}
.mainBox .popularListBox .wrapBox .rollingBox > ul {position:relative; width:calc(6 * 300px);}
.mainBox .popularListBox .wrapBox .rollingBox > ul:after {display:block; clear:both; content:"";}
.mainBox .popularListBox .wrapBox .rollingBox > ul li {box-sizing:border-box; float:left; padding:10px; width:300px;}
.mainBox .popularListBox .wrapBox .rollingBox > ul li > div {width:100%; height:100%; border-radius:4px; overflow:hidden;}
.mainBox .popularListBox .rollingBox > ul li .imgBox {width:100%; height:280px; overflow:hidden;}
.mainBox .popularListBox .rollingBox > ul li .imgBox .imgInBox {width:100%; height:100%; transition:all 0.4s;}
.mainBox .popularListBox .rollingBox > ul li .imgBox .imgInBox:hover {transform:scale(1.06);}
.mainBox .popularListBox .rollingBox > ul li .txtBox {box-sizing:border-box; padding:10px 10px 7.13px; width:100%;}
.mainBox .popularListBox .rollingBox > ul li .txtBox .productName {display:inline-block; margin-bottom:9px; width:100%; height:48px; line-height:25px; letter-spacing:-0.56px; font-weight:bold; overflow:hidden;}
.mainBox .popularListBox .rollingBox > ul li .txtBox .sellPrice {width:100%; font-size:14px; font-weight:bold; color:#CD2325;}
.mainBox .popularListBox .rollingBox > ul li .editProductBox {box-sizing:border-box; padding:0 10px 10px; width:100%; color:#fff;}
.mainBox .popularListBox .rollingBox > ul li .editProductBox:after {display:block; clear:both; content:"";}
.mainBox .popularListBox .rollingBox > ul li .editProductBox .pickHeart {box-sizing:border-box; float:left; margin-right:6px; padding:4px 0; width:68px; height:27px; text-align:center; font-size:14px; background-color:#440c8e; border-radius:4px; cursor:pointer; transition:all 0.2s;}
.mainBox .popularListBox .rollingBox > ul li .editProductBox .pickHeart:hover {background-color:#6e17e0;}
.mainBox .popularListBox .rollingBox > ul li .editProductBox .editProduct {box-sizing:border-box; float:left; padding:4px 0; width:68px; height:27px; text-align:center; font-size:14px; background-color:#8c0c8e; border-radius:4px; cursor:pointer; transition:all 0.2s;}
.mainBox .popularListBox .rollingBox > ul li .editProductBox .editProduct:hover {background-color:#b310b6;}


.mainBox .specialPriceListBox {padding:52px 0 98px; width:100%; background-color:#FAFAFA;}
.mainBox .specialPriceListBox .ItemTitle {margin:0 auto 29px; width:100%; max-width:1200px; text-align:center; font-size:30px; font-weight:bold;}
.mainBox .specialPriceListBox > ul {margin:0 auto; width:100%; max-width:1200px;}
.mainBox .specialPriceListBox > ul:after {display:block; clear:both; content:"";}
.mainBox .specialPriceListBox > ul li > div {width:100%; height:100%; border-radius:4px; overflow:hidden;}
.mainBox .specialPriceListBox > ul li .imgBox .imgInBox {width:100%; height:100%; transition:all 0.4s;}
.mainBox .specialPriceListBox > ul li .imgBox .imgInBox:hover {transform:scale(1.06);}
.mainBox .specialPriceListBox > ul li .txtBox {}
.mainBox .specialPriceListBox > ul li .txtBox .productName {display:inline-block; margin-bottom:9px; width:100%; height:48px; line-height:25px; letter-spacing:-0.56px; font-weight:bold; overflow:hidden;}
.mainBox .specialPriceListBox > ul li .txtBox .sellPrice {width:100%; font-size:14px; font-weight:bold; color:#CD2325;}
.mainBox .specialPriceListBox > ul li .editProductBox {box-sizing:border-box; padding:0 10px 10px; width:100%; color:#fff; background-color:#FAFAFA;}
.mainBox .specialPriceListBox > ul li .editProductBox:after {display:block; clear:both; content:"";}


.mainBox .productListBox {padding:73px 0 0; width:100%; min-height:340px;}
.mainBox .productListBox .ItemTitle {margin:0 auto 2px; width:100%; max-width:1200px; text-align:center; font-size:30px; font-weight:bold;}
.mainBox .productListBox .ItemSubTitle {margin:0 auto 27px; width:100%; max-width:1200px; text-align:center; font-size:15px; font-weight:400; color:#929292;}
.mainBox .productListBox > ul {margin:0 auto; width:100%; max-width:1200px;}
.mainBox .productListBox > ul:after {display:block; clear:both; content:"";}
.mainBox .productListBox > ul li > div {width:100%; height:100%; border-radius:4px; overflow:hidden;}
.mainBox .productListBox > ul li .imgBox .imgInBox {width:100%; height:100%; transition:all 0.4s;}
.mainBox .productListBox > ul li .imgBox .imgInBox:hover {transform:scale(1.06);}
.mainBox .productListBox > ul li .txtBox {}
.mainBox .productListBox > ul li .txtBox .productName {display:inline-block; margin-bottom:9px; width:100%; height:48px; line-height:25px; letter-spacing:-0.56px; font-weight:bold; overflow:hidden;}
.mainBox .productListBox > ul li .txtBox .sellPrice {width:100%; font-size:14px; font-weight:bold; color:#CD2325;}
.mainBox .productListBox > ul li .editProductBox {box-sizing:border-box; padding:0 10px 10px; width:100%; color:#fff;}
.mainBox .productListBox > ul li .editProductBox:after {display:block; clear:both; content:"";}


.mainBox .moreBox {box-sizing:border-box; position:relative; margin:0 auto 100px; padding:20px 0 0; width:100%; max-width:1280px; text-align:center;}
.mainBox .moreBox .moreItemBtn {box-sizing:border-box; display:inline-block; padding:10px 30px; font-size:22px; font-weight:bold; background-color:#fff; border:1px solid #AAAAAAAB; border-radius:30px; cursor:pointer; transition:all 0.2s;}
.mainBox .moreBox .moreItemBtn:hover {background-color:#eee;}
/***** 리스트 스타일 *****/

	.mainBox ul li {box-sizing:border-box; float:left; margin-bottom:52px;}
	.mainBox ul li .imgBox {width:100%; height:280px; overflow:hidden;}
	.mainBox ul li .txtBox {box-sizing:border-box; padding:10px 10px 7.13px; width:100%; background-color:#FAFAFA;}
	.mainBox ul li .editProductBox .pickHeart {box-sizing:border-box; float:left; margin-right:6px; padding:4px; height:27px; text-align:center; font-size:14px; background-color:#0C8E5A; border-radius:4px; cursor:pointer; transition:all 0.2s;}
	.mainBox ul li .editProductBox .pickHeart:hover {background-color:#12c27b;}
	.mainBox ul li .editProductBox .editProduct {box-sizing:border-box; float:left; padding:4px; height:27px; text-align:center; font-size:14px; background-color:#0C7A8E; border-radius:4px; cursor:pointer; transition:all 0.2s;}
	.mainBox ul li .editProductBox .editProduct:hover {background-color:#12a3bd;}

@media screen and (max-width:600px) {
	.mainBox .specialPriceListBox ul li {padding:8px; width:50%;}
	.mainBox .productListBox ul li {padding:8px; width:50%;}
	.mainBox ul li .imgBox {height:200px;}
	.mainBox ul li .txtBox {padding:6px 6px 6px;}
	.mainBox ul li .editProductBox .pickHeart {}
	.mainBox ul li .editProductBox .editProduct {}
}
@media screen and (min-width:601px) {
	.mainBox .specialPriceListBox ul li {padding:10px; width:25%;}
	.mainBox .productListBox ul li {padding:10px; width:25%;}
	.mainBox ul li .txtBox {padding:6px 6px 6px;}
	.mainBox ul li .editProductBox .pickHeart {width:68px;}
	.mainBox ul li .editProductBox .editProduct {width:68px;}
}