﻿/* 메인과 서브페이지 전체에 영향을 미치는 LAYOUT CSS */
.anchorCover {position: absolute;width: 100%;height: 100%;top: 0;left: 0;z-index:1;}
.dimmedTotal {position: fixed;left: 0;top: 0;right: 0;bottom: 0;background: #000;opacity:0.3;z-index:100;}
@media(min-width:930px){
	.dimmedTotal {position: absolute;}
}

.ui-shadow {box-shadow:none !important;}

/* 접근성 관련 - display:none 절대로 부여하지 마세요. */
.hidden {visibility: hidden;left: -9999em;margin: 0;padding: 0;font-size: 0;line-height: 0;width: 0;height: 0;overflow: hidden;}

/* 감추기 */
.hide {display:none !important;}

#m_wrap {
  margin:auto;
  max-width:680px;
/*  overflow:hidden;*/
  width:100%;
  box-sizing:border-box;
  /*padding-bottom:57px;*/  /*아래 플로팅 메뉴 여백*/
  min-height:100vh;
  position:static;
}
#m_wrap.on{position:fixed;left:50%;margin-left:-284px;}

/*버튼*/
.btn_style1 {background:#ffd11a; box-sizing:border-box; display:inline-block; border:none; width:100%;padding:.7em 1em;font-size:15px; color:#fff;  font-weight:bold; text-align:center; vertical-align:middle;}
#Zipcode .btn_style1 {background:#ffd11a; box-sizing:border-box; display:inline-block; border:none;padding:.7em 1em;width:100%; font-size:15px; color:#fff;  font-weight:bold; text-align:center; vertical-align:middle;}
a.btn_style1.ui-btn {color:#fff;}
button.btn_style1.ui-btn {color:#fff;}
button.btn_style1.ui-btn.ui-shadow {box-shadow: none;}
a.btn_style2.ui-link {color:#fff;}
.btn_style2 {background:#92979b; box-sizing:border-box; display:inline-block; width:100%;font-size:15px;padding:.7em 1em;color:#fff;  font-weight:bold; text-align:center;vertical-align:middle; }
.btn_style3 {background:#ffe20c; box-sizing:border-box; display:inline-block; width:100%;font-size:15px;padding:.7em 1em;color:#fff;  font-weight:bold;  text-align:center; vertical-align:middle;}
.btn_style4 {background:#ffe20c; box-sizing:border-box; display:inline-block; width:100%;font-size:15px;padding:.7em 1em;color:#fff;  font-weight:bold;  text-align:center; vertical-align:middle;}
a.btn_style4.ui-link {color:#fff;}
.btn_style5 {background:#434343; box-sizing:border-box; display:inline-block; width:100%;font-size:12px;padding:.7em 1em;color:#fff;  font-weight:bold;  text-align:center; vertical-align:middle;}
.btn_style6 {background:#666666; border-radius:3px; box-sizing:border-box; display:inline-block; width:100%;font-size:13px;padding:.7em 1em;color:#fff;  font-weight:bold;  text-align:center; vertical-align:middle;}
a.btn_style6 {color:#fff;}
.btn_style1 img{width:21px; vertical-align:middle; margin-top:-2px;}
.btn_style2 img{width:21px; vertical-align:middle; margin-top:-2px;}
.btn_style3 img{width:21px; vertical-align:middle; margin-top:-2px;}
.btn_style3.ui-link {color:#fff;}
a.btn_style3.ui-link {color:#fff;}
.btns-box {overflow:hidden;font-size:0px;}
.member_input.trans_memtype.addr .btn_style6{padding:1em 1em;}

.btn-xs{height:auto;line-height:unset;padding:2px 5px;font-size:12px;}


.layerFix{display:none;font-size:0;}
.layerFix.on{display:block !important;}
.layerFix.on .layerCon{animation:slideupt .5s ease-in-out;}
.layerFix .layerBg{position:fixed;width:100%;max-width:680px;height:100%;background:rgba(0,0,0,.7);left:0;top:0;width:100%;height:100%;z-index:9998;}
.layerFix .layerConWrap{position:fixed;z-index:99999;max-width:680px;top:50%;padding:0;left:50%;background:#fff;box-sizing:border-box;font-size:initial;overflow-y:auto;}
.layerFix .btnClLyr{display:inline-block;width:53px;height:53px;font-size:0;background:url(/m/images/xxx2.png)no-repeat center / 40% 40%;position:absolute;right:0;top:0;cursor:pointer;}

.layerFix .secTop{position:absolute;height:53px;position:absolute;left:0;top:0;width:100%;z-index:99;}
.layerFix .secTop .tit{font-size:20px;text-align:center;line-height:53px;font-weight:bold;box-shadow:0 0 8px #666;}
.layerFix .secMid{font-size:14px;overflow-y:auto;}
.layerFix .secBot{position:absolute;left:0;bottom:0;width:100%;height:53px;z-index:999;animation:slideupb .5s ease-in-out;}
.layerFix .secBot .btnClLyr{background:none;}
.layerFix .secBot .btnCp{display:inline-block;width:100%;font-size:18px;color:#fff;text-align:center;line-height:53px;}

.tabDOM {background: #fff;}
.tabDOM > ul {display:flex;width: 100%;align-items:center;position: relative;}
.tabDOM > ul > li {position: relative;flex-grow:1;text-align: center;}
.tabDOM > ul > li a {position: relative;display:block;height: 42px;line-height: 42px;padding-bottom:2px;}
.tabDOM > ul > li._active a {}
.tabDOM > ul > li._active a:after {content:"";position: absolute;height: 2px;width: 100%;left: 0;bottom: 0;}
.tabDOM > ul > li + li {}
.tabDOM > ul > li + li:before {content:"";position: absolute;left: 0;top: 50%;transform:translateY(-50%);width: 1px;height: 14px;background: #EFEFEF;}
.tabDOM > ul > li label {display:inline-block;height: 42px;line-height: 42px;padding-bottom:2px;text-align:center;}

/*모바일팝업창*/
.popupCenter {position:fixed; top:0; bottom:0; left:0; right:0; width:100%; max-width:680px; margin:0 auto; background-color:rgba(0,0,0,.5);}
@media (min-width: 930px) {
	.popupCenter{width:525px; right: unset; left: 50%; transform: translatex(-5%);}
	.popupCenter.pcBer {left: auto;  right: 50%;  margin: 0; margin-right: -500px;  max-width: 525px;}
}
.layerpopupCenter {position:relative; top:0; bottom:0; left:0; right:0; width:100% !important; height:100% !important;}

select.select {border-radius:0px; width:100%;line-height:20px; height:40px; box-sizing:border-box; padding-left:10px; padding-right:50px; border:1px solid #5f5f5f; margin-bottom:5px; font-size:13px; color:#939393; text-align:left; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:url('/m/images/bottom_icon12.png') no-repeat right 5px center #fff; background-size:25px;}

/*카테고리 옵션부*/
.CartClickLayerMask {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998; display:none;}
.CartClickLayer {position:fixed; min-width:306px;max-width: 400px; top: 50%; left:7px; right:7px; background:#fff; z-index:9999; border-radius:5px; text-align:left; overflow:hidden; height:0; opacity:0;
-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,0.75);
-moz-box-shadow:0 0 10px 2px rgba(0,0,0,0.75);
box-shadow:0 0 10px 2px rgba(0,0,0,0.75);

transition:all 0.6s;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-o-transition:all 0.6s;
-ms-transition:all 0.6s;
}
.CartClickLayerMask.on {display:block;}
.CartClickLayer.on {height:auto; opacity:1;
transition:all 0.6s;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-o-transition:all 0.6s;
-ms-transition:all 0.6s;
}

@media(min-width:930px){
	.CartClickLayer {right: 50%;margin-right: -440px;left: auto;width: 400px;transform:translate(0,-50%);}
	.CartClickLayerMask {width: 525px;right: 50%;margin-right: -500px;left: auto;transform: none;}
}
@media(max-width:929px){
	.CartClickLayer {right: auto;margin-right: 0;left: 50%;width: 100%;min-width:auto;transform:translate(-50%,-50%);}
	.CartClickLayerMask {right: auto;left: 50%;margin-right: 0;transform: translateX(-50%);width: 100%;max-width: 680px;}
}

.CartClickLayer h1 {border-radius:5px 5px 0 0; box-sizing:border-box; padding:10px; color:#fff;}
.CartClickLayer .Layerinner {box-sizing:border-box; padding:10px; max-height:250px; overflow:auto;}
.CartClickLayer .Layerinner .optionTit {padding:5px 0; font-weight:bold;}
.CartClickLayer .totalpriceBox {text-align:right; font-size:13px; padding:5px 10px;}
.CartClickLayer .totalpriceBox .text01 {font-weight:bold;}
.CartClickLayer .totalpriceBox .totalprice {font-size:13px; font-weight:bold;}
.CartClickLayer .totalpriceBox .eq {font-weight:normal;}
.CartClickLayer .CartClickBtn {border-radius:0 0 5px 5px; text-align:center; padding:8px 0;}
.CartClickLayer .CartClickBtn a {width:47%; color:#fff;}

/* 바로구매 레이어 */
ul.cont_list li .HoverIconBox {text-align:right;color:#ccc;}
ul.cont_list li .HoverIconBox .iconfont {color:#2D2E33; margin:0 3px; font-size:24px; font-weight:bold; vertical-align:middle;}



.ListDirectLayerMask {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998; display:none;}
.ListDirectLayer {position:fixed; min-width:306px;max-width: 400px; top:50%; left:7px; right:7px; background:#fff; z-index:9999; border-radius:5px; text-align:left; overflow:hidden; height:0; opacity:0;
-webkit-box-shadow:0 0 10px 2px rgba(0,0,0,0.75);
-moz-box-shadow:0 0 10px 2px rgba(0,0,0,0.75);
box-shadow:0 0 10px 2px rgba(0,0,0,0.75);

transition:all 0.6s;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-o-transition:all 0.6s;
-ms-transition:all 0.6s;
}
.ListDirectLayerMask.on {display:block;}
.ListDirectLayer.on {height:auto; opacity:1;
transition:all 0.6s;
-moz-transition:all 0.6s;
-webkit-transition:all 0.6s;
-o-transition:all 0.6s;
-ms-transition:all 0.6s;
}
.ListDirectLayer h1 {border-radius:5px 5px 0 0; box-sizing:border-box; padding:10px; color:#fff;}
.ListDirectLayer .Layerinner {box-sizing:border-box; padding:10px; max-height:250px; overflow:auto;}
.ListDirectLayer .Layerinner .optionTit {padding:5px 0; font-weight:bold;}
.ListDirectLayer .totalpriceBox {text-align:right; font-size:13px; padding:5px 10px;}
.ListDirectLayer .totalpriceBox .text01 {font-weight:bold;}
.ListDirectLayer .totalpriceBox .totalprice {font-size:13px; font-weight:bold;}
.ListDirectLayer .totalpriceBox .eq {font-weight:normal;}
.ListDirectLayer .CartClickBtn {border-radius:0 0 5px 5px; text-align:center; padding:8px 0;}
.ListDirectLayer .CartClickBtn a {width:47%; color:#fff;}
@media(min-width:930px){
	.ListDirectLayer {right: 50%;margin-right: -440px;left: auto;width: 400px;transform:translate(0,-50%);}
	.ListDirectLayerMask {width: 525px;right: 50%;margin-right: -500px;left: auto;transform: none;}
}
@media(max-width:929px){
	.ListDirectLayer {right: auto;margin-right: 0;left: 50%;width: 100%;min-width:auto;transform:translate(-50%,-50%);}
	.ListDirectLayerMask {right: auto;left: 50%;margin-right: 0;transform: translateX(-50%);width: 100%;max-width: 680px;}
}

.prd_opt_box {padding:10px; margin-top:5px; border:1px solid #c9c9c9; background:#fff; box-sizing:border-box;}
.prd_opt_box strong {color:#000; font-size:14px; line-height:25px;}
.mtp_prc {overflow:hidden;}
.mtp_prc div.mtp {float:left; margin-top:0;}
.mtp_prc div.mtp > div {display:inline-block;}
.mtp_prc .prc_right {float:right; color:#000; font-size:12px; line-height:30px;}
.mtp_prc .prc_right .prc em {font-size:14px; font-weight:bold;}
.mtp_prc .prc_right .del img {margin-left:5px; border:1px solid #c4c4c4; box-sizing:border-box;}

/* 플러스마이너하는 부분*/

div.mtp {overflow:hidden; margin-top:5px; font-size:0px;}
div.mtp > div {display:inline-block;}
div.mtp .ui-input-text {display:inline-block; width:50px; border:none; margin:0; height:30px;}
div.mtp .ui-input-text input {height:30px;}
span.minu img {box-sizing:border-box; /* border:1px solid #c4c4c4; */ border-right:none; cursor:pointer ; vertical-align:top; width:29px; height:28px; padding:0; margin:0px;  display:inline-block; text-align:center;}
input.number  {box-sizing:border-box; background:#fff; border:1px solid #c4c4c4; border-radius:0px; direction:none; text-align:center; vertical-align:top; font-size:12px; color:#424242; width:50px; height:30px; margin:0; padding:0; line-height:30px; vertical-align:middle; appearance:none; -webkit-appearance:none; -moz-appearance:none;}
span.plus img{box-sizing:border-box; /* border:1px solid #c4c4c4;  */border-left:none; cursor:pointer ; vertical-align:top; width:29px; height:28px; padding:0; margin:0px;  display:inline-block; text-align:center;}
span.minu {box-sizing:border-box; border:1px solid #c4c4c4; border-right:none; cursor:pointer ; vertical-align:top; width:30px; height:30px; line-height:28px; padding:0; margin:0px;  display:inline-block; text-align:center; }
span.minu i {vertical-align:middle; font-size:20px;}
span.plus {box-sizing:border-box; border:1px solid #c4c4c4; border-left:none; cursor:pointer ; vertical-align:top; width:30px; height:30px; line-height:28px; padding:0; margin:0px;  display:inline-block; text-align:center; }
span.plus i {vertical-align:middle; font-size:20px;}

.cartPage span.plus {border:0;}
.cartPage span.minu {border:0;}

input.ChangeText{background-color:transparent; border:none; color:#fff; font-weight: bold; font-size:16px; text-align: center; margin-top:-4px;}
input.ChangeText:focus{outline:none;}


/* 바로구매 레이어 끝 */

.bestEmptyText {text-align: center;}

/*.HoverIconBtn {vertical-align:middle;}
.HoverIconBtn .material-icons {color:#000; vertical-align:middle; font-size:24px;}*/
/*리스트 밑 장바구니 좋아요 아이콘 및 레이어 끝 */

li .pdBtnMore{position:absolute;bottom:10px;right:10px;display:block;width:25px;height:25px;box-sizing:border-box;border-radius:50%;border:1px solid #b9b9b9;background:#fff;color:transparent;font-size:0;z-index:10;}
li .pdBtnMore:before{content:'';position:absolute;left:50%;top:50%;display:block;width:15px;height:1px;margin-left:-7px;background:#b9b9b9;transition:all .2s;}
li .pdBtnMore:after{content:'';position:absolute;left:50%;top:50%;display:block;width:1px;height:15px;margin-top:-7px;background:#b9b9b9;transition:all .2s;}
li.on .pdBtnMore{background:#b5b5b5;}
li.on .pdBtnMore:before,
li.on .pdBtnMore:after{background:#fff;transform:rotate(45deg);}
li .pdBtnBox{position:absolute;left:0;right:0;top:0;bottom:0;opacity:0;background:rgba(255,255,255,.85);transition:all .3s ease-in-out;z-index:-1;font-size:14px;}
li .pdBtnBox ul{position:absolute;left:0;top:50%;width:100%; transform:translateY(-50%);text-align:center;overflow:visible;font-size:inherit;}
li .pdBtnBox ul li.qBtn{position:relative;top:-10px;display:inline-block;width:24%;max-width:60px;padding-top:24%;border-radius:50%;margin:0 2%;opacity:0;transition:all .2s ease-in-out;}
/*li .pdBtnBox ul li.qBtn a{position:absolute;left:0;top:0;display:block;width:100%;height:100%;max-width:60px;max-height:60px;border-radius:50%;color:transparent;color:#fff;} 20190122 mempil 즐겨찾기 아이콘 이상하게 나오는 부분 수정 */
li .pdBtnBox ul li.qBtn a{position:absolute;left:0;top:0;display:block;width:100%;height:auto;max-width:60px;max-height:60px;border-radius:50%;color:transparent;color:#fff;padding-top:0;}
li .pdBtnBox ul li.qBtn a:after {content:"";padding-bottom:100%;display: block;}
li .pdBtnBox ul li.qBtn a span,
li .pdBtnBox ul li.qBtn a i{display:block;position:absolute;left:0;right:0;top:0;bottom:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8em;background:#262626;}
li .pdBtnBox ul li.restock{display:block;margin-top:11px;text-align:center;}
li .pdBtnBox ul li.restock a{display:inline-block;padding-left:17px;background:url(../images/shop/btn_restock.png) no-repeat 0 5px / 10px;font-size:13px;}
li .pdBtnBox ul li.qBtn.deal{width:100%;height:40px;max-width:none;padding-top:0;border-radius:0;margin:0;}
li .pdBtnBox ul li.qBtn.deal a{max-width:none;max-height:none;border-radius:0;color:#fff;font-size:15px;}
li.on .pdBtnBox{opacity:1;z-index:1;}
li.on .pdBtnBox ul li{top:0;opacity:1;}
li.on .pdBtnBox ul li:nth-of-type(1){transition-delay:.2s;font-size:12px;}
li.on .pdBtnBox ul li:nth-of-type(2){transition-delay:.3s;}
li.on .pdBtnBox ul li:nth-of-type(3){transition-delay:.4s;}

/*검색레이어*/
.float_btn_wrap{position:fixed;right:25%;z-index:11;bottom:-999px;transition:bottom .4s;}
.float_btn_wrap.show{bottom:85px !important; transition:bottom .4s;}
@media (min-width:680px){
	.float_btn_wrap.show {right: auto;left: 50%;margin-left: 32%;}
}
@media(min-width:930px){
	.float_btn_wrap.show {right: auto;left: 50%;margin-left: 450px;}
}
@media (min-width:1130px){
	.float_btn_wrap.show {right: auto;left: 50%;margin-left: 450px;}
}
.float_btn_wrap li{margin-bottom:5px;display:block;box-sizing:border-box;}
.float_btn_wrap li a{display:block;width:38px;height:38px;background-color:#000;border-radius:50%;text-align:center;box-sizing:border-box;padding:6px 0 0 1px; opacity:.8;color:#fff;border:1px solid #fff;}
.float_btn_wrap li a img{width:25px;}

.searchKeyword ul{text-align:center;}
.searchKeyword ul li{display:inline-block;padding:0 2px;line-height:32px;}
.searchKeyword ul li a{font-size:14px;color:#fff;border-radius:50px;border:1px solid #fff;padding:5px 8px;}


.search_pop{display:none;position:fixed;top:0;left:0;bottom:0;right:0;background-color:rgba(0,0,0,0.6);z-index:99999;}
.search_pop .search_pop_inner{position:relative;left:0;bottom:0;right:0;top:60px;padding:20px;}
.search_pop .search_pop_inner h2{color:#fff;font-size:18px;font-weight:normal;letter-spacing:.3em;margin:35px 0 15px;}
.search_pop .search_pop_inner .search_area{margin-bottom:10px;}
.search_pop .search_pop_inner .search_area fieldset{position:relative; padding:0; border:0;}
.search_pop .search_pop_inner .search_area fieldset legend {font-size:0; line-height:0; height:0;}
.search_pop .search_pop_inner .search_area fieldset input{width:100%;height:50px;position:relative;display:block;box-sizing:border-box;}
/*.search_pop .search_pop_inner .search_area fieldset button{position:absolute;top:1px;right:1px;bottom:1px;border:none;color:#000;background-color:#fff;font-size:33px;}*/
.search_pop a.close_btn{position:absolute;right:10px;top:10px;background:url(/m/images/btn_close3.png);width:40px;height:40px;background-size:40px 40px;}
.search_pop .search_pop_inner .search_area fieldset button{position:absolute;top:2px;right:2px;border:none;color:#000;font-weight:bold;background-color:transparent;font-size:33px;display:inline-block;margin:0;padding:0;width:46px;height:46px;-webkit-box-shadow:none;box-shadow:none; line-height:48px;}
.search_pop .search_pop_inner .search_history{position:relative;overflow-y:auto;height:260px;}
.search_pop .search_pop_inner .search_history li{line-height:3em;text-align:center; background-color:rgba(0,0,0,.2); border-top:1px solid rgba(255,255,255,.2);}
.search_pop .search_pop_inner .search_history li:first-child {border-top:0;}
.search_pop .search_pop_inner .search_history li a{color:#fff;font-size:14px;display:block;width:70%;margin:0 auto;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
.search_pop .del_btn_wrap{position:absolute;bottom:15%;left:50%;margin-left:-100px;display:block;width:200px;box-sizing:border-box;padding:14px 0;background-color:#000;text-align:center;}
.search_pop .del_btn_wrap .sch_del_btn{display:block;width:100%;color:#fff;}

@media all and (max-width:412px){
	.search_pop .search_pop_inner .search_history{height:192px;}
}

@media all and (max-width:360px){
	.search_pop .search_pop_inner .search_history{height:178px;}
}

@media all and (max-width:320px){
	.search_pop .search_pop_inner .search_history{height:116px;}
}

.goodsImminent {width:40px;height:40px;position:absolute;top:0;right:0;z-index:1;}