body {padding:0; margin:0; width:100%; font-family:'Noto Sans KR',sans-serif;}
ul, li, a, input {padding:0; margin:0; text-decoration:none; list-style:none; color:inherit;}
textarea {font-family:'Noto Sans KR',sans-serif; height:100px;}
.clearbox {clear:both;}


@font-face {
    font-family: 'SCoreDream';
    font-weight: 100; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream1.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 200; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream2.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 300; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream3.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 400; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream4.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 500; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream5.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 600; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream6.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 700; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream7.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 800; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream8.woff) format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'SCoreDream';
    font-weight: 900; 
    font-style: normal; 
    src: url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff2) format('woff2'),
         url(https://cdn.jsdelivr.net/gh/webfontworld/SCoreDream/SCoreDream9.woff) format('woff');
    font-display: swap;
}


/*---------------------------- HEADER BOX  ----------------------------*/
#header_box {box-sizing:border-box; width:100%;}
#header_box:after {display:block; clear:both; content:"";}
#header_box .topBanner {width:100%; height:80px; background:url('/images/nav/top_banner.png')}
#header_box .headerMain {width:100%;}
#header_box .headerMain .mainCenter {margin:0 auto; padding:30px 0; width:1280px;}
#header_box .headerMain .mainCenter:after {display:block; clear:both; content:"";}
#header_box .headerMain .mainCenter .menuBox {float:left; margin-right:20px; padding:15px; width:24px; height:24px; border-radius:8px; cursor:pointer;}
#header_box .headerMain .mainCenter .menuBox:hover {box-shadow:0 0 12px 0 rgba(0,0,0,0.2);}
#header_box .headerMain .mainCenter .menuBox .menuBar {width:100%; height:100%;}
#header_box .headerMain .mainCenter .menuBox .menuBar span {display:block; margin-bottom:4px; width:100%; height:4px; background-color:#000; border-radius:2px;}
#header_box .headerMain .mainCenter .menuBox .menuBar span:last-child {margin-bottom:0;}
#header_box .headerMain .mainCenter .logoBox {float:left; margin-right:20px; width:216px; height:54px;}
#header_box .headerMain .mainCenter .searchBox {float:left; position:relative; margin-right:10px; width:600px; height:54px;}
#header_box .headerMain .mainCenter .searchBox input {box-sizing:border-box; margin:5px 0; padding:10px; width:100%; height:40px; border:1px solid #aeaeae ; border-radius:30px;}
#header_box .headerMain .mainCenter .searchBox .itemBtn {position:absolute; margin:9px 4px; padding:6px 14px; top:0; right:0; font-size:14px; font-weight:bold; color:#fff; background-color:#ccc; border-radius:20px; cursor:pointer; transition:all 0.2s;}
#header_box .headerMain .mainCenter .searchBox .itemBtn:hover {background-color:#000;}
#header_box .headerMain .mainCenter .rightBtnBox {box-sizing:border-box; float:right; padding:4px 0; width:360px; height:54px;}
#header_box .headerMain .mainCenter .rightBtnBox span {display:inline-block; margin-right:10px; padding:10px 20px; font-size:14px; font-weight:bold; border:1px solid #aeaeae; border-radius:30px; cursor:pointer;}
#header_box .headerMain .mainCenter .rightBtnBox span:last-child {margin-right:0;}
#header_box .headerNav {margin:0 auto; width:1280px;}
#header_box .headerNav ul.navCenter {width:100%;}
#header_box .headerNav ul.navCenter:after {display:block; clear:both; content:"";}
#header_box .headerNav ul.navCenter li {float:left; padding:10px 0;}
#header_box .headerNav ul.navCenter li.memberBox {float:right;}
#header_box .headerNav ul.navCenter li span {padding:0 10px; font-size:14px; font-weight:bold; border-right:2px solid #eee; cursor:pointer;}
#header_box .headerNav ul.navCenter li span:last-child {padding:0; border:none;}

#header_box .headerSubNav {width:100%; height:60px; background-color:#eee;}
#header_box .headerSubNav .subNavCenter {margin:0 auto; width:1280px; height:100%;}
#header_box .headerSubNav .subNavCenter:after {display:block; clear:both; content:"";}
#header_box .headerSubNav .subNavCenter .korCategory {box-sizing:border-box; float:left; padding:20px 10px; width:180px; height:100%; text-align:left; font-weight:bold; cursor:pointer; transition:all 0.2s;}
#header_box .headerSubNav .subNavCenter .korCategory:hover {background-color:rgba(255,255,255,0.2);}
#header_box .headerSubNav .subNavCenter .goMainListBox {box-sizing:border-box; float:left; padding:16px 10px; height:100%; font-weight:bold;}
#header_box .headerSubNav .subNavCenter .goMainListBox span {margin:4px; padding:4px 16px; font-size:14px; color:#fff; background-color:#444; border-radius:16px;}
#header_box .headerSubNav .subNavCenter .korGuide {box-sizing:border-box; float:right; padding:18px 0; font-weight:bold; }
#header_box .headerSubNav .subNavCenter .korGuide span {margin-left:10px; padding:8px 20px; color:#fff; background-color:#de2810; border-radius:24px; cursor:pointer;}


/*---------------------------- FOOTER BOX  ----------------------------*/
#footer_box {box-sizing:border-box; padding-top:4px; width:100%; border-top:1px solid #ccc;}
#footer_box .footerCenter {margin:0 auto; width:1280px;}
#footer_box ul.subNavBox {width:100%; text-align:center; border-bottom:1px solid #ccc;}
#footer_box ul.subNavBox:after {display:block; clear:both; content:"";}
#footer_box ul.subNavBox li {display:inline-block; padding:10px; cursor:pointer;}
#footer_box .footerCenter .footerMain {box-sizing:border-box; padding:10px 0; width:100%;}
#footer_box .footerCenter .footerMain:after {display:block; clear:both; content:"";}
#footer_box .footerCenter .footerMain .leftArea, 
#footer_box .footerCenter .footerMain .midArea, 
#footer_box .footerCenter .footerMain .rightArea {float:left;}
#footer_box .footerCenter .footerMain .leftArea {width:20%; text-align:center;}
#footer_box .footerCenter .footerMain .leftArea .logoBox {margin:0 auto; width:216px; height:54px;}
#footer_box .footerCenter .footerMain .midArea {width:50%; font-size:14px; font-weight:bold;}
#footer_box .footerCenter .footerMain .rightArea {width:30%;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox {box-sizing:border-box; padding:10px; width:100%; height:100%; font-size:12px; background-color:#eee;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox div {margin-bottom:2px;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox div:nth-child(1) {margin-bottom:10px;}
#footer_box .footerCenter .footerMain .rightArea .serviceBox .svcTit {font-size:14px; font-weight:bold;}


/*-------------------------------------- POPUP  ----------------------------*/
#popupBox {display:none; position:fixed; width:100%; height:100%; z-index:2;}
#popupBox.active {display:block;}
#popupBox .popupBg {width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
#popupBox .contentsBox {display:table; position:absolute; top:0px; left:0px; width:100%; height:100%;}

#popupBox .contentsBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:24px; width:448px; border-radius:10px; color:#000; background-color:#fff; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.4);}
#popupBox .contentsBox .centerBox .titleBox {box-sizing:border-box; position:relative; width:100%; height:60px; text-align:center; font-size:24px;}
#popupBox .contentsBox .centerBox .titleBox .title {padding:10px; font-weight:bold;}
#popupBox .contentsBox .centerBox .titleBox .closeX {position:absolute; top:0; right:0; cursor:pointer;}
#popupBox .contentsBox .centerBox .info_box {width:100%;}

/** login, join */
#popupBox .contentsBox .loginBox {box-sizing:border-box; display:table-cell; width:448px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .loginBox .centerBox {width:448px;}
#popupBox .contentsBox .joinBox {box-sizing:border-box; display:table-cell; width:600px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .joinBox .centerBox {width:600px;}

#popupBox .contentsBox .centerBox .info_box .input_box {width:100%;}
#popupBox .contentsBox .centerBox .info_box .input_box:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .input_box:last-child {margin:0;}
#popupBox .contentsBox .centerBox .info_box .input_box .editTitle {box-sizing:border-box; float:left; padding:0 10px; width:50%; height:20px; font-size:13px; color:rgba(0,0,0,0.4);}
#popupBox .contentsBox .centerBox .info_box .input_box .inp {box-sizing:border-box; padding:10px; width:100%; height:52px; border:1px solid #ccc; border-radius:10px;}
#popupBox .contentsBox .centerBox .info_box .input_box .halfInp {box-sizing:border-box; float:left; margin:2px; padding:10px; width:calc(50% - 4px); height:52px; border:1px solid #ccc; border-radius:10px;}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox {float:left; width:100%; height:20px; font-size:13px;}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .input_box .cnfmBox div {box-sizing:border-box; float:left; padding:0 10px; width:50%; height:100%;}
#popupBox .contentsBox .centerBox .info_box .input_box .loginBtn {margin:0; text-align:center; color:#fff; background-color:rgb(61,0,146); cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .input_box .joinBtn {margin:0; text-align:center; color:#fff; background-color:rgb(61,0,146); cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .input_box .loginBtn:hover,
#popupBox .contentsBox .centerBox .info_box .input_box .joinBtn:hover {background-color:rgba(61,0,146,0.8);}
#popupBox .contentsBox .centerBox .info_box .chkInput_box {margin:20px 0;}
#popupBox .contentsBox .centerBox .info_box .caution {font-size:12px; color:rgba(0,0,0,0.6);}

#popupBox .contentsBox .centerBox .chkInput_box .popupTermsBtn {margin-left:10px; padding:4px 8px; border:1px solid #ccc; border-radius:4px; cursor:pointer;}
#popupBox .contentsBox .centerBox .chkInput_box .popupTermsBtn:hover {background-color:#eee;}
#popupBox .contentsBox .joinBox .termPopup {box-sizing:border-box; display:none; position:absolute; padding:10px; left:4px; top:100px; width:calc(100% - 10px); height:400px; background-color:#fff; border:1px solid #ccc; border-radius:4px;}
#popupBox .contentsBox .joinBox .termPopup > div {width:100%; height:320px; overflow-y:scroll;}
#popupBox .contentsBox .joinBox .termPopup .closetermsBtn {position:absolute; bottom:10px; right:10px; padding:4px 8px; background-color:#eee; border:1px solid #ccc; border-radius:4px; cursor:pointer;}

/** product edit */
#popupBox .contentsBox .editPickBox {box-sizing:border-box; display:table-cell; width:980px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .editPickBox .centerBox {width:980px;}

#popupBox .contentsBox .centerBox .info_box .center_box:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .itemImgBox {float:left; width:640px; height:640px;}
#popupBox .contentsBox .centerBox .info_box .itemImgBox .mainImg {width:100%; height:634px; border:1px solid #ccc; border-radius:4px;}

#popupBox .contentsBox .centerBox .info_box .itemInfoBox {box-sizing:border-box; float:left; padding-left:10px; width:calc(100% - 640px); height:600px;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul {width:100%;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li {margin-bottom:10px; width:100%;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .tit {display:block; width:100%;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con {display:block; width:100%;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .inp {box-sizing:border-box; padding:10px; width:100%;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword {box-sizing:border-box; display:inline-block; margin:2px; padding:4px 8px; text-align:center; background-color:#eee; border-radius:20px; cursor:pointer;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword .keywordX {display:inline-block; margin-left:4px; padding:0 3px; width:14px; font-size:14px; border:1px solid #000; border-radius:20px;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword .keywordX:hover {color:#fff; background-color:#000;}

#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword.add {width:46%; color:#fff; background-color:#007bff;  transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword.add:hover {background-color:#0062cc;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword.add #newKeyword {width:calc(100% - 30px); height:16px; background-color:transparent; border:none; border-bottom:1px solid #fff;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword .keywordAdd {display:inline-block; margin-left:4px; padding:0 3px; width:14px; font-size:14px; font-weight:bold; color:#fff; border:1px solid #fff; border-radius:20px;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .keyword .keywordAdd:hover {color:#0062cc; background-color:#fff;}
#popupBox .contentsBox .centerBox .info_box .itemBtnBox {box-sizing:border-box; float:left; padding-left:10px; width:calc(100% - 640px); height:40px; line-height:40px;}
#popupBox .contentsBox .centerBox .info_box .itemBtnBox .pickItemBtn {width:100%; height:100%; text-align:center; color:#fff; background-color:rgb(61,0,146); border-radius:4px; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .itemBtnBox .pickItemBtn:hover {background-color:rgba(61,0,146,0.8);}

/** category */
#popupBox .contentsBox .categoryBox {box-sizing:border-box; display:table-cell; width:1280px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .categoryBox .centerBox {width:1280px;}
#popupBox .contentsBox .categoryBox .centerBox .titleBox {width:100%; text-align:left;}
#popupBox .contentsBox .categoryBox .centerBox .info_box {width:100%; height:500px; background-color:rgba(0,0,0,0.04);}
#popupBox .contentsBox .categoryBox .centerBox .info_box .center_box {width:100%; height:100%;}
#popupBox .contentsBox .categoryBox .centerBox .info_box .center_box:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul {float:left; width:25%; height:100%; overflow-y:scroll;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li {box-sizing:border-box; padding:6px 12px; width:100%;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li .link {float:left; display:block; width:calc(100% - 30px); height:30px; cursor:pointer;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li .link:hover {font-weight:bold; color:rgba(61,0,146,0.8); text-decoration:underline;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li .nextLv {box-sizing:border-box; float:left; display:block; padding:6px 9px; width:30px; text-align:center; font-size:12px; border:1px solid transparent; border-radius:16px; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li .nextLv:hover {color:rgba(61,0,146,0.8); background-color:#eee; border:1px solid rgba(61,0,146,0.8);}

/** etc infos */
#popupBox .contentsBox .editInfoBox {box-sizing:border-box; display:table-cell; width:600px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .editInfoBox .centerBox {width:600px;}


/*-------------------------------------- loadingPop  ----------------------------*/
#loadingPop {display:none; position:fixed; width:100%; height:100%; z-index:2;}
#loadingPop.active {display:block;}
#loadingPop .popupBg {width:100%; height:100%; background-color:rgba(0,0,0,0.6);}
#loadingPop .contentsBox {display:table; position:absolute; top:0px; left:0px; width:100%; height:100%; text-align:center; color:#fff;}
#loadingPop .contentsBox .wrapBox {box-sizing:border-box; display:table-cell; width:100%; height:100%; vertical-align:middle;}

/*-------------------------------------- MAIN  ----------------------------*/
.mainBox {width:100%; background-color:#fafafa;}
/**
.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; width:100%; max-width:1920px; height:400px; background-color:#333029;}
.mainBox .slideBox ul {margin:0 auto; width:100%; height:100%;}
.mainBox .slideBox ul li {width:100%; overflow:hidden;}

.mainBox .bestProductListBox {padding:30px 0 30px; width:100%; background-color:rgb(242, 242, 242);}
.mainBox .bestProductListBox .ItemTitle {margin:0 auto 20px; width:100%; max-width:1280px; text-align:center; font-size:24px; font-weight:bold;}
.mainBox .bestProductListBox > ul {margin:0 auto; width:100%; max-width:1280px;}
.mainBox .bestProductListBox > ul li a {display:block; width:100%; height:100%;}
.mainBox .bestProductListBox ul:after {display:block; clear:both; content:"";}
.mainBox .bestProductListBox ul li {float:left; margin-right:30px; width:290px; height:290px;}
.mainBox .bestProductListBox ul li:nth-child(1) {width:320px; background:url('/images/main/ai_01.png');}
.mainBox .bestProductListBox ul li div {width:100%; height:137px; border-radius:20px; overflow:hidden;}
.mainBox .bestProductListBox ul li:nth-child(2) div:nth-child(1) {margin-bottom:16px; background:url('/images/main/ai_02.png') no-repeat center;}
.mainBox .bestProductListBox ul li:nth-child(2) div:nth-child(2) {background:url('/images/main/ai_05.png') no-repeat center;}
.mainBox .bestProductListBox ul li:nth-child(3) div:nth-child(1) {margin-bottom:16px; background:url('/images/main/ai_03.png') no-repeat center;}
.mainBox .bestProductListBox ul li:nth-child(3) div:nth-child(2) {background:url('/images/main/ai_06.png') no-repeat center;}
.mainBox .bestProductListBox ul li:nth-child(4) {margin-right:0;}
.mainBox .bestProductListBox ul li:nth-child(4) div:nth-child(1) {margin-bottom:16px; background:url('/images/main/ai_04.png') no-repeat center;}
.mainBox .bestProductListBox ul li:nth-child(4) div:nth-child(2) {background:url('/images/main/ai_07.png') no-repeat center;}

.mainBox .specialPriceListBox {padding:80px 0 30px; width:100%; background-color:rgb(242, 242, 242);}
.mainBox .specialPriceListBox .ItemTitle {margin:0 auto 20px; width:100%; max-width:1280px; text-align:center; font-size:24px; font-weight:bold;}
.mainBox .specialPriceListBox > ul {margin:0 auto; width:100%; max-width:1280px;}
.mainBox .specialPriceListBox > ul:after {display:block; clear:both; content:"";}
.mainBox .specialPriceListBox > ul li {box-sizing:border-box; float:left; padding:8px; width:25%;}
.mainBox .specialPriceListBox > ul li > div {width:100%; height:100%; border:1px solid #eee; border-radius:4px; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.14);}
.mainBox .specialPriceListBox > ul li .imgBox {width:100%; height:300px; 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 {box-sizing:border-box; padding:10px; width:100%; background-color:#eee;}
.mainBox .specialPriceListBox > ul li .txtBox .productName {display:inline-block; width:100%; height:52px; font-weight:bold; overflow:hidden;}
.mainBox .specialPriceListBox > ul li .txtBox .sellPrice {width:100%; font-weight:bold; color:red;}
.mainBox .specialPriceListBox > ul li .editProductBox {box-sizing:border-box; padding:10px; width:100%; color:#777; background-color:#eee;}
.mainBox .specialPriceListBox > ul li .editProductBox:after {display:block; clear:both; content:"";}
.mainBox .specialPriceListBox > ul li .editProductBox .pickHeart {float:left; cursor:pointer;}
.mainBox .specialPriceListBox > ul li .editProductBox .pickHeart:hover {color:red;}
.mainBox .specialPriceListBox > ul li .editProductBox .editProduct {float:right; cursor:pointer;}
.mainBox .specialPriceListBox > ul li .editProductBox .editProduct:hover {color:red;}

.mainBox .productListBox {padding:30px 0 30px; width:100%; min-height:340px;}
.mainBox .productListBox .ItemTitle {margin:0 auto 20px; width:100%; max-width:1280px; text-align:center; font-size:24px; font-weight:bold;}
.mainBox .productListBox > ul {margin:0 auto; width:100%; max-width:1280px;}
.mainBox .productListBox > ul:after {display:block; clear:both; content:"";}
.mainBox .productListBox > ul li {box-sizing:border-box; float:left; padding:8px; width:25%;}
.mainBox .productListBox > ul li > div {width:100%; height:100%; border:1px solid #eee; border-radius:4px; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.14); overflow:hidden;}
.mainBox .productListBox > ul li .imgBox {width:100%; height:300px; 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 {box-sizing:border-box; padding:10px; width:100%; background-color:#eee;}
.mainBox .productListBox > ul li .txtBox .productName {display:inline-block; width:100%; height:52px; font-weight:bold; overflow:hidden;}
.mainBox .productListBox > ul li .txtBox .sellPrice {width:100%; font-weight:bold; color:red;}
.mainBox .productListBox > ul li .editProductBox {box-sizing:border-box; padding:10px; width:100%; color:#777; background-color:#eee;}
.mainBox .productListBox > ul li .editProductBox:after {display:block; clear:both; content:"";}
.mainBox .productListBox > ul li .editProductBox .pickHeart {float:left; cursor:pointer;}
.mainBox .productListBox > ul li .editProductBox .pickHeart:hover {color:red;}
.mainBox .productListBox > ul li .editProductBox .editProduct {float:right; cursor:pointer;}
.mainBox .productListBox > ul li .editProductBox .editProduct:hover {color:red;}

.mainBox .moreBox {position:relative; margin:0 auto; width:100%; max-width:1280px; height:0; text-align:center;}
.mainBox .moreBox .moreItemBtn {position:absolute; bottom:38px; left:calc(50% + 650px); padding:20px; font-weight:bold; color:#fff; background-color:#ccc; border-radius:4px; cursor:pointer; transition:all 0.2s;}
.mainBox .moreBox .moreItemBtn:hover {background-color:tomato;}

/*-------------------------------------- MAIN  ----------------------------*/
.itemBox {width:100%; background-color:#fafafa;}
.itemBox .centerBox {margin:0 auto 20px; width:100%; max-width:1280px; text-align:center;}
.itemBox .centerBox > ul {padding-top:20px; width:100%; height:100%;}
.itemBox .centerBox > ul:after {display:block; clear:both; content:"";}
.itemBox .centerBox > ul li.itemImgBox {box-sizing:border-box; float:left; padding-right:10px; width:50%;}
.itemBox .centerBox > ul li.itemImgBox .mainImg {width:100%; height:634px;}
.itemBox .centerBox > ul li.itemImgBox ul.thumbImg {width:100%; height:80px; overflow-x:auto;}
.itemBox .centerBox > ul li.itemImgBox ul.thumbImg:after {display:block; clear:both; content:"";}
.itemBox .centerBox > ul li.itemImgBox ul.thumbImg li {float:left; width:80px; height:80px; cursor:pointer;}
.itemBox .centerBox > ul li.itemInfoBox {box-sizing:border-box; float:left; width:50%; height:714px;}
.itemBox .centerBox > ul li.itemInfoBox div {margin-bottom:10px; text-align:left; font-weight:bold;}
.itemBox .centerBox > ul li.itemInfoBox .itemDetailInfoBox {margin-bottom:0; width:100%; height:440px; overflow-y:auto;}
.itemBox .centerBox > ul li.itemInfoBox .itemTitle {font-size:24px;}
.itemBox .centerBox > ul li.itemInfoBox .itemPrice {font-size:34px; text-align:right; color:red; border-bottom:1px solid #ccc;}
.itemBox .centerBox > ul li.itemInfoBox div .tit {color:#777;}
.itemBox .centerBox > ul li.itemInfoBox div .con {display:none;}
.itemBox .centerBox > ul li.itemInfoBox div .con.show {display:block;}
.itemBox .centerBox > ul li.itemInfoBox div .con .optVal {display:inline-block; margin:2px; padding:4px 8px; border:1px solid #ccc; border-radius:4px;}
.itemBox .centerBox > ul li.itemInfoBox div .con .optVal.active {border:1px solid #000;}
.itemBox .centerBox > ul li.itemInfoBox .pickProductBtn {margin-top:20px; padding:14px 0; width:100%; text-align:center; color:#fff; background-color:rgb(61,0,146); border-radius:4px; cursor:pointer;}
.itemBox .centerBox > ul li.itemInfoBox .pickProductBtn:hover {color:#fff; background-color:rgba(61,0,146,0.8);}
.itemBox .centerBox > ul li.itemInfoBox .pickProductBtn.picked {background-color:#ccc;}
.itemBox .centerBox > ul li.itemInfoBox .pickProductBtn.picked:hover {background-color:rgba(0,0,0,0.2);}
.itemBox .centerBox > ul li.itemInfoBox .editProductBtn {padding:14px 0; width:100%; text-align:center; color:rgb(61,0,146); background-color:#fff; border:1px solid rgb(61,0,146); border-radius:4px; cursor:pointer;}
.itemBox .centerBox > ul li.itemInfoBox .editProductBtn:hover {color:rgba(61,0,146,0.8); border:1px solid rgba(61,0,146,0.8);}
.itemBox .centerBox > ul li.itemDetailContents {float:left; margin-top:20px; padding-top:20px; width:100%; border-top:1px solid #ccc;}


/*-------------------------------------- MY PAGE  ----------------------------*/
.myPageBox {margin:20px 0; width:100%;}
.myPageBox .myPageCenter {margin:0 auto; width:100%; max-width:1280px;}
.myPageBox .myPageCenter:after {display:block; clear:both; content:"";}

.myPageBox .myPageCenter .leftMenu {float:left; width:220px;}
.myPageBox .myPageCenter .leftMenu .leftTotal {box-sizing:border-box; width:100%; border:1px solid rgb(187, 191, 195);}
.myPageBox .myPageCenter .leftMenu .leftTotal ul {box-sizing:border-box; width:100%;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.profile {display:table; padding:30px 20px; background-color:rgb(187, 191, 195);}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.profile li {display:table-cell; text-align:center; font-size:16px; vertical-align:middle;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.profile li .photo {margin:0 auto 20px; width:80px; height:80px; background-color:rgba(0,0,0,0.8); border-radius:40px; cursor:pointer;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.profile li .userName {width:100%; font-weight:bold; color:#fff; cursor:pointer;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.profile li .userId {width:100%; font-size:13px; font-weight:bold; color:#fff; cursor:pointer;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.category {padding:20px; width:100%;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.category li.tit {margin-bottom:10px; font-size:16px; font-weight:bold; border-bottom:2px solid rgb(238, 239, 240);}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.category li.con {font-size:14px; font-weight:bold; color:rgb(168, 168, 168);}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.category li.con.active {color:#007bff;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul li a {display:block; width:100%; height:100%;}

.myPageBox .myPageCenter .contentBox {float:left; width:calc(100% - 220px);}
.myPageBox .myPageCenter .contentBox .contentCenter {box-sizing:border-box; padding:0px 25px; width:100%;}
.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle {box-sizing:border-box; padding-bottom:20px; width:100%; font-weight:bold; border-bottom:1px solid #ccc;}
.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle:after {display:block; clear:both; content:"";}
.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle .mainTitle {float:left; font-size:20px;}
.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle .subTitle {float:right; padding-top:10px; font-size:13px;}

.controlBox {box-sizing:border-box; padding:30px 20px; width:100%; text-align:right; border-bottom:1px solid #ccc;}
.controlBox .controlProductBtn {box-sizing:border-box; padding:10px 20px; color:rgba(0,0,0,0.8); border:1px solid rgba(0,0,0,0.8); border-radius:4px; cursor:pointer; transition:all 0.2s;}
.controlBox .controlProductBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);}

.myPageBox .contentBox .contentList {width:100%;}
.myPageBox .contentBox .contentList .searchBox {box-sizing:border-box; padding:10px 0; width:100%;}
.myPageBox .contentBox .contentList .selBox {box-sizing:border-box; padding:6px; width:200px; height:40px;}
.myPageBox .contentBox .contentList ul.dataList {width:100%;}
.myPageBox .contentBox .contentList ul.dataList li {display:table; padding:10px 0; width:100%; text-align:center; border-bottom:1px solid #ccc;}
.myPageBox .contentBox .contentList ul.dataList li span {display:table-cell; vertical-align:middle;}

.myPageBox .contentBox .contentList .BtnBox {padding:20px 0; width:100%; text-align:center;}
.myPageBox .contentBox .contentList .BtnBox .moreListBtn {display:inline-block; padding:4px 18px; width:200px; font-size:20px; background-color:rgba(0,0,0,0.1); border-radius:4px; cursor:pointer; transition:all 0.2s;}
.myPageBox .contentBox .contentList .BtnBox .moreListBtn:hover {color:#fff; background-color:rgba(0,0,0,0.8);}


/***** board paging *****/
ul.pagingBox {box-sizing:border-box; margin-top:20px; width:100%; text-align:center;}
ul.pagingBox li {box-sizing:border-box; display:inline; margin:4px; font-size:14px; color:#fff; background-color:#a8c1d5; border-radius:4px; cursor:pointer;}
ul.pagingBox li.on {background-color:#213d52;}
@media screen and (min-width:1001px) {
	ul.pagingBox li {padding:4px 12px;}
}
@media screen and (max-width:1000px) {
	ul.pagingBox li {padding:2px 8px;}
}