body {padding:0; margin:0; width:100%; font-family:'Noto Sans KR',sans-serif;}
ul, li, a, input, p {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 : "SCDream1";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream1.otf");
}
@font-face {
    font-family : "SCDream2";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream2.otf");
}
@font-face {
    font-family : "SCDream3";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream3.otf");
}
@font-face {
    font-family : "SCDream4";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream4.otf");
}
@font-face {
    font-family : "SCDream5";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream5.otf");
}
@font-face {
    font-family : "SCDream6";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream6.otf");
}
@font-face {
    font-family : "SCDream7";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream7.otf");
}
@font-face {
    font-family : "SCDream8";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream8.otf");
}
@font-face {
    font-family : "SCDream9";
    src:url("/css/fonts/S-Core_Dream_OTF/SCDream9.otf");
}


/*---------------------------- HEADER BOX  ----------------------------*/
#header_box {box-sizing:border-box; width:100%; font-family:'SCDream4'; font-weight:500;}
#header_box:after {display:block; clear:both; content:"";}
#header_box .headerTop {width:100%; background-color:#eee; border-bottom:1px solid #ccc;}
#header_box .headerTop .topCenter {margin:0 auto; padding:2px 0; width:100%; max-width:1200px;}
#header_box .headerTop .topCenter:after {display:block; clear:both; content:"";}
#header_box .headerTop .topCenter .leftBox {float:left;}
#header_box .headerTop .topCenter .rightBox {float:right;}
#header_box .headerTop .topCenter .rightBox ul {font-size:13px; color:#777;}
#header_box .headerTop .topCenter .rightBox ul li {display:inline-block;}
#header_box .headerTop .topCenter .rightBox ul li a {display:inline-block; padding:4px;}
#header_box .headerTop .topCenter .rightBox ul li a:hover {color:#222;}

#header_box .headerMain {width:100%;}
#header_box .headerMain .mainCenter {position:relative; margin:0 auto; padding:20px 0; width:100%; max-width:1200px;}
#header_box .headerMain .mainCenter:after {display:block; clear:both; content:"";}
#header_box .headerMain .mainCenter .leftBox {float:left;}
#header_box .headerMain .mainCenter .mainBox {position:absolute; left:calc(50% - 155px); top:20px; width:310px; height:52px;}
#header_box .headerMain .mainCenter .rightBox {float:right; display:table; height:52px;}
#header_box .headerMain .mainCenter .rightBox ul {display:table-cell; width:100%; vertical-align:middle;}
#header_box .headerMain .mainCenter .rightBox ul li {display:inline-block;}
#header_box .headerMain .mainCenter .rightBox ul li a {box-sizing:border-box; display:block; padding:8px 30px; min-width:100px; color:#fff; background-color:#ccc; border-radius:20px;}
#header_box .headerMain .mainCenter .rightBox ul li.loginout a {background-color:#f06dc2;}
#header_box .headerMain .mainCenter .rightBox ul li.loginout a:hover {background-color:#ff80d2;}
#header_box .headerMain .mainCenter .rightBox ul li.mypage a {background-color:#8e1df0;}
#header_box .headerMain .mainCenter .rightBox ul li.mypage a:hover {background-color:#9f30ff;}
#header_box .headerMain .mainCenter .rightBox ul li.certi a {background-color:#289eff;}
#header_box .headerMain .mainCenter .rightBox ul li.certi a:hover {background-color:#168ae9;}

#header_box .headerMain .mainCenter #headerPopBtn {display:none; position:absolute; top:32px; right:10px; width:30px; height:30px; text-align:center; font-size:20px; color:#f4551e; background-color:#fff; border:1px solid #f4551e; border-radius:4px;}
#header_box .headerMain .mainCenter #headerPopBox {box-sizing:border-box; display:none; position:absolute; top:40px; right:0; width:120px; text-align:left; font-size:16px; color:#000; background-color:#fff; border-radius:8px; box-shadow:2px 2px 10px 0 rgba(0,0,0,0.2);}
#header_box .headerMain .mainCenter #headerPopBox.active {display:block;}
#header_box .headerMain .mainCenter #headerPopBox ul {box-sizing:border-box; padding:4px; width:100%;}
#header_box .headerMain .mainCenter #headerPopBox ul li {box-sizing:border-box; padding:4px; width:100%;}

#header_box .headerNav {width:100%; background-color:#f4551e; font-size:18px; color:#fff;}
#header_box .headerNav ul.navCenter {margin:0 auto; padding:10px 0; width:100%; max-width:1200px;}
#header_box .headerNav ul.navCenter:after {display:block; clear:both; content:"";}
#header_box .headerNav ul.navCenter li {display:table; padding:0; height:40px; text-align:center;}
#header_box .headerNav ul.navCenter li.leftBox {float:left;}
#header_box .headerNav ul.navCenter li.rightBox {float:right;}
#header_box .headerNav ul.navCenter li.leftBox.logo {box-sizing:border-box; margin-right:20px; width:246px;}
#header_box .headerNav ul.navCenter li.leftBox.country {box-sizing:border-box; padding:4px; width:114px; border-right:1px solid rgba(255,255,255,0.4);}
#header_box .headerNav ul.navCenter li.leftBox.country:last-child {border-right:none;}
#header_box .headerNav ul.navCenter li .wrapBox {display:table-cell; vertical-align:middle; background-position:center; background-repeat:no-repeat;}
#header_box .headerNav ul.navCenter li a {display:block; width:100%; height:100%; border-radius:6px;}
#header_box .headerNav ul.navCenter li a:hover {background-color:rgba(255,255,255,0.2);}

@media screen and (max-width:600px) {
    #header_box .headerTop  {display:none;}
    #header_box .headerMain .mainCenter .mainBox {position:relative; margin:0 auto; left:0; top:0;}
    #header_box .headerMain .mainCenter .rightBox {display:none;}
    #header_box .headerMain .mainCenter #headerPopBtn {display:block;}
    
    #header_box .headerNav ul.navCenter {text-align:center;}
    #header_box .headerNav ul.navCenter li.leftBox.logo {display:none; margin-right:0; padding:10px; width:100%; height:auto;}
    #header_box .headerNav ul.navCenter li.leftBox.country {float:none; display:inline-block; padding:4px; width:38px; height:38px; border-right:none;}
    #header_box .headerNav ul.navCenter li .wrapBox {display:block; width:100%; height:100%; background-position:2px center;}
}

/*---------------------------- FOOTER BOX ----------------------------*/
.footer_box {padding-bottom:200px; width:100%; font-family:'GmarketSansLight'; z-index:0; font-size:13px; font-weight:300; background-color:#141f33; color:#8ba9cb;}
.footer_box .footer_box1100 {position:relative; margin:0 auto; width:100%; max-width:1100px; padding-top:34px; margin:0 auto;}
.footer_box .footer_box1100:after {display:block; clear:both; content:"";}
.footer_box .footer_box1100 > div {box-sizing:border-box; padding:10px;}

@media screen and (max-width:1100px) {
	.footer_box .footer_box1100 > .memberBox {float:left; margin-bottom:20px; width:100%; max-width:690px;}
	.footer_box .footer_box1100 > .customerBox {float:left; margin-bottom:20px; width:100%; max-width:410px;}
	.footer_box .footer_box1100 > .companyBox {float:left; margin-bottom:20px; width:100%; max-width:690px;}
	.footer_box .footer_box1100 > .copyright {float:left; padding-top:30px; width:100%; border-top:1px solid #8ba9cb;}
}
@media screen and (min-width:1101px) {
	.footer_box .footer_box1100 > .memberBox {float:left; margin-bottom:20px; width:100%; max-width:690px;}
	.footer_box .footer_box1100 > .customerBox {float:right; margin-bottom:20px; width:100%; max-width:410px;}
	.footer_box .footer_box1100 > .companyBox {float:left; margin-bottom:20px; width:100%; max-width:690px;}
	.footer_box .footer_box1100 > .copyright {float:left; padding-top:30px; width:100%; border-top:1px solid #8ba9cb;}
}


/*-------------------------------------- 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%;}

@media screen and (max-width:880px) {
	#popupBox .contentsBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:4px; width:100%; max-width:448px; border-radius:10px; color:#000; background-color:#fff; box-shadow:4px 4px 20px 0 rgba(0,0,0,0.4);}
}
@media screen and (min-width:881px) {
	#popupBox .contentsBox .centerBox {box-sizing:border-box; position:relative; margin:0 auto; padding:24px; width:100%; max-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:calc(100% - 20px); max-width:448px;}
#popupBox .contentsBox .joinBox {box-sizing:border-box; display:table-cell; width:600px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .joinBox .centerBox {width:calc(100% - 20px); max-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:#c92020; cursor:pointer; transition:all 0.2s;}
#popupBox .contentsBox .centerBox .info_box .input_box .joinBtn {margin:0; text-align:center; color:#fff; background-color:#222; 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:red;}
#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;}

    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel1,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp1 {width:40px; height:100%;border:none;border-bottom:1px solid #ccc;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel2,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp2 {width:50px; height:100%;border:none;border-bottom:1px solid #ccc;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel3,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp3 {width:50px; height:100%;border:none;border-bottom:1px solid #ccc;}

@media screen and (max-width:600px) {
    #popupBox .contentsBox .centerBox .info_box .input_box .editTitle {padding:2px;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp {padding:10px 2px;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel1,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp1 {width:34px;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel2,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp2 {width:40px;}
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #tel3,
    #popupBox .contentsBox .centerBox .info_box .input_box .halfInp #hp3 {width:40px;}
}


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

#popupBox .contentsBox .centerBox .info_box .center_box:after {display:block; clear:both; content:"";}
#popupBox .contentsBox .centerBox .info_box .itemImgBox {float:left; width:600px; height:600px;}
#popupBox .contentsBox .centerBox .info_box .itemImgBox .mainImg {width:100%; height:100%; 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% - 600px); height:560px;}
#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 .resetBtn {float:right; display:inline-block; padding:2px 8px; font-size:13px; color:#fff; background-color:#007bff; border-radius:20px; cursor:pointer;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .resetBtn:hover {background-color:#0062cc;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .inp {box-sizing:border-box; padding:10px; width:100%; border:1px solid #ccc;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .textContent {box-sizing:border-box; padding:5px 8px; width:100%; min-height:210px; line-height:22px; color:#333; border:1px solid #ccc; border-radius:4px; overflow-y:auto; resize:none;}
#popupBox .contentsBox .centerBox .info_box .itemInfoBox ul li .con .desc_warning {font-size:13px; font-weight:400;}
#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% - 600px); 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);}

@media screen and (max-width:600px) {
    #popupBox .contentsBox .editPickBox .centerBox {overflow-y:auto; height:80vh;}
    #popupBox .contentsBox .centerBox .info_box .itemImgBox {width:100%; height:300px;}
    #popupBox .contentsBox .centerBox .info_box .itemInfoBox {padding-left:0; width:100%; height:inherit;}
    #popupBox .contentsBox .centerBox .info_box .itemBtnBox {padding-left:0; width:100%;}
}

/** category */
#popupBox .contentsBox .categoryBox {box-sizing:border-box; display:table-cell; width:1280px; height:100%; vertical-align:middle;}
#popupBox .contentsBox .categoryBox .centerBox {max-width:1000px;}
#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:hover {background-color:#eee;}
#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); font-size:14px; 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:2px 8px 3px; font-size:12px; background-color:#eee; border-radius:6px; cursor:pointer;}
#popupBox .contentsBox .categoryBox .centerBox .info_box ul li .nextLv:hover {color:#fff; background-color:rgba(61,0,146,0.8);}

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


/*-------------------------------------- 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;}


/*-------------------------------------- itemBox  ----------------------------*/
.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;}
@media screen and (max-width:880px) {
    .itemBox .centerBox > ul li.itemImgBox {width:100%;}
    .itemBox .centerBox > ul li.itemInfoBox {padding:10px; width:100%;}
}

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

.myPageBox .myPageCenter .leftMenu {float:left; width:220px; background-color:#fff;}
.myPageBox .myPageCenter .leftMenu .leftTotal {box-sizing:border-box; width:100%; height:100%; border:1px solid rgb(187, 191, 195);}
.myPageBox .myPageCenter .leftMenu .leftTotal .xBtn {box-sizing:border-box; display:none; position:absolute; top:10px; right:10px; width:34px; height:34px; text-align:center; border-radius:4px;}
.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 {padding:2px 4px; font-size:14px; font-weight:bold; color:rgb(168, 168, 168); border-radius:4px;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul.category li.con.active {color:#222; background-color:#f1f1f1;}
.myPageBox .myPageCenter .leftMenu .leftTotal ul li a {display:block; width:100%; height:100%;}

.myPageBox .contentBox .conentNavi {display:none; box-sizing:border-box; margin:20px 0; width:100%;}
.myPageBox .contentBox .conentNavi ul {box-sizing:border-box; padding:10px; width:100%;}
.myPageBox .contentBox .conentNavi ul:after {display:block; clear:both; content:"";}
.myPageBox .contentBox .conentNavi ul li {box-sizing:border-box; display:inline-block; padding:6px; width:49%; text-align:center; color:#f4551e; border:1px solid #f4551e; border-radius:22px;}
.myPageBox .contentBox .conentNavi ul li.active {color:#fff; background-color:#f4551e;}
.myPageBox .contentBox .conentNavi 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;}
.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle .burger {display:none; float:right; font-size:20px;}

.controlBox {box-sizing:border-box; padding:30px 0; 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%; overflow-x:auto;}
.myPageBox .contentBox .contentList .searchBox {box-sizing:border-box; padding:10px 0; width:100%;}
.myPageBox .contentBox .contentList .selBox {box-sizing:border-box; margin-bottom:8px; padding:6px; width:200px; height:40px; border:1px solid #444; border-radius:8px;}
.myPageBox .contentBox .contentList ul.dataList {width:100%;}
.myPageBox .contentBox .contentList ul.dataList li {display:table; position:relative; 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);}

.onlyweb {display:inline-block;}
.onlymobile {display:none;}

@media screen and (max-width:880px) {
    .myPageBox .myPageCenter .leftMenu {position:fixed; top:0; left:-220px; width:220px; height:100%; z-index:1; transition:left 0.2s;}
    .myPageBox .myPageCenter .leftMenu.active {left:0;}
    .myPageBox .myPageCenter .leftMenu.active .leftTotal .xBtn {display:block;}
    .myPageBox .myPageCenter .contentBox {width:100%;}
    .myPageBox .myPageCenter .contentBox .contentCenter {padding:0px 10px;}
    .myPageBox .myPageCenter .contentBox .contentCenter .contentTitle .subTitle {display:none;}
    .myPageBox .myPageCenter .contentBox .contentCenter .contentTitle .burger {display:block;}
    
}
@media screen and (max-width:600px) {
    .onlyweb {display:none;}
    .onlymobile {display:inline-block;}
    .myPageBox {margin:0;}
    .myPageBox .contentBox .conentNavi {display:block;}
	.myPageBox .myPageCenter .contentBox .contentCenter .contentTitle {display:none;}
    .myPageBox .contentBox .contentList ul.dataList {font-size:14px;}
    .controlProductBtn {display:none;}
	.myPageBox .contentBox .contentList ul.dataList li.tit {display:none;}
}

/***** 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;}
}