﻿/* 메인과 서브페이지 전체에 영향을 미치는 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;}
.dimmedTotal.op1 {opacity:0.1;}
.dimmedTotal.op2 {opacity:0.2;}
.dimmedTotal.op3 {opacity:0.3;}
.dimmedTotal.op4 {opacity:0.4;}
.dimmedTotal.op5 {opacity:0.5;}
.dimmedTotal.op6 {opacity:0.6;}
.dimmedTotal.op7 {opacity:0.7;}
.dimmedTotal.op8 {opacity:0.8;}
.dimmedTotal.op9 {opacity:0.9;}
.dimmedTotal.op10 {opacity:1;}

/* 접근성 관련 - display:none 절대로 부여하지 마세요. */
.hidden {visibility: hidden;left: -9999em;margin: 0;padding: 0;font-size: 0;line-height: 0;width: 0;height: 0;overflow: hidden;}

/* 접근성 관련 - display:none 절대로 부여하지 마세요.  visibility: hidden; 절대로 부여하지 마세요. */
.dataHidden {position: absolute;top:-9999px;left: -9999px;margin: 0;padding: 0;font-size: 0;line-height: 0;width: 0;height: 0;overflow: hidden;}

/* 감추기 */
.hide {display:none !important;}

/* 가격표시 */
._payWon:after {content:"원";}
._payWonCnc:after {content:"을";}

#m_wrap {
  margin:auto;
  max-width:680px;
/*  overflow:hidden;*/
  width:100%;
  box-sizing:border-box;
  background-color:#fff;
  /*padding-bottom:57px;*/  /*아래 플로팅 메뉴 여백*/
  min-height:100vh;
  position:static;
}
#m_wrap.on{position:fixed;left:50%;margin-left:-284px;}

.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;}


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:23%;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;}
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:5%;z-index:11;bottom:-999px;transition:bottom .4s;}
.float_btn_wrap.show{bottom:73px !important;transition:bottom .4s;}
.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-top:8px;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;}

._inputChecker input[type=checkbox] + span {background: url(/m/images/svg/input_check-off.svg) no-repeat center center;background-size:contain;vertical-align: sub;}
._inputChecker input[type=checkbox]:checked + span {background: url(/m/images/svg/input_check-on.svg) no-repeat center center;background-size:contain;vertical-align: sub;}