@charset "utf-8";


.layer {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
  display: none;
}

.layer-container {
  position: absolute;
  top: 0; left: -100%; bottom: 0;
  z-index: 9999;
  display: block;
  width: 100%;
  overflow: hidden;
  overflow-y: scroll;
  padding: 0 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
  box-sizing: border-box;
  background-color: #fff;
}



.layer-container.active {
  left: 0;
}




/* layer header
-----------------------------------------------*/
.layer-header {
  padding: 10px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid #dadbdf;
  background-color: #fff;
}
.layer-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-header .title {
  float: left;
  font-size: 18px;
  line-height: 30px;
  color: #222;
  font-weight: 500;
}
.layer-header .btn-close.close-layer {
  float: right;
  display: inline-block;
  width: 30px; height: 30px;
  background: url("/AppData/images/mediacommerce/white/button/layer_close.png") no-repeat right center;
  background-size: 14px 14px;
}



/* layer contents
-----------------------------------------------*/
.layer-contents {
  display: block;
  width: 100%;
  height: 50vh;
  overflow-y: auto;
  box-sizing: border-box;
}




/* =======================================================
  address
========================================================*/
.address-search-container {
  padding: 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
}
.address-search {
  position: relative;
}
.address-search .input-search {
  width: 100%;
  border-radius: 999px;
  padding-right: 68px;
  padding-left: 20px;
}
.address-search .btn-search {
  position: absolute;
  right: 18px; top: 0;
  z-index: 3;
  display: block;
}
.address-search .icon-search {
  display: block;
  width: 40px; height: 40px;
  background-image: url(../../images/site/button/btn_search.png) ;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: right center;
}


/* 검색 전
-----------------------------------------------*/
.address-search-tip {
  padding: 20px 20px 100px 20px;
  box-sizing: border-box;
}
.address-search-tip strong {
  display: block;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 700;
  color: #444;
}
.address-search-tip p {
  font-size: 14px;
  color: #666;
}
.address-search-tip .text-guide {
  margin-top: 10px;
  font-size: 13px;
  color: #aaa;
}



/* 검색 후
-----------------------------------------------*/
.address-result-container {

  background-color: #fff;
  /* min-height: calc(100vh - 131px); */
  padding-bottom: 20px;
  box-sizing: border-box;
  /*141px */
}
.address-result-container .count {
  font-size: 12px;
  color: #888;
  line-height: 30px;
  text-align: center;
}
.address-result-container .count span {
  font-weight: 500;
}

.address-list li {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-bottom: 1px solid #dadbdf;
}
.address-list li.nodata { border-bottom: none; }
.address-list li hr {
  margin: 5px 0;
}
.address-list li + li {margin-top: 10px; }
.address-list li a {
  display: inline-block;
  font-size: 14px;
  color: #444;
  text-align: left;
  white-space: normal;
}
.address-list li .txtClr {
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 400;
}


.address-result-container .pagination-wrapper {
  margin-bottom: 0;
}
/* 데이터 없는 경우 */
.address-list .nodata {
  padding: 40px 20px;
}
.address-list .nodata p {
  color: #888;
  font-size: 12px;
  border-top: 1px solid #f2f2f2;
}
.address-list .nodata p:first-child {
  text-align: center;
  font-size: 14px;
  border-top: none;
}
.address-list .nodata p + p {
  margin-top: 40px;
  padding-top: 10px;
}
.address-list .nodata .input-btn-group {
  margin-top: 20px;
}




/* =======================================================
  배송지변경
========================================================*/
.layer-shipping .form-wrapper {
  padding: 0 20px 20px;
}
.layer-shipping .form-wrapper .form-field {
  margin-top: 30px;
}
.layer-shipping .page-bottom {
  border-top: 1px solid #f2f2f2;
  padding-bottom: 20px;
}




/* =======================================================
  배송조회
========================================================*/
.layer-tracking {
  background-color: #efefef;
  min-height: 100%
}
.layer-tracking .inventory-group {
  padding: 20px 20px;
}
.layer-tracking .btn-text {
  font-size: 14px;
  color: #444;
}
.layer-tracking .section-tracking {
  background-color: #fff;
}

.layer-tracking th {
  height: 30px;
}
.layer-tracking td {
  border-top: 1px solid #f2f2f2;
}

/* 배송조회 팝업 */
.layer-tracking .section-order{/*padding: 0 15px;*/ margin-bottom: 0 !important;}
.layer-tracking .section-order .order-header .title{font-size: 18px;}




/* =======================================================
  후기보기
========================================================*/
.review-slide-container {
  position: relative;
  width: 100%;
  padding: 0 0;
  margin: 0;
  display: block;
  box-sizing: border-box;
  line-height: 0;
}
.review-slide-container .review-slide {
  position: relative;
  display: block;
}
.review-slide-container .slide-img {
  position: relative;
  width: 100%;
}
.review-slide-container .slide-img img {
  max-width: 100%;
}
.review-slide-container .slide-paging {
  position: absolute;
  bottom: 10px; right: 20px;
}
.review-slide-container .slide-paging li {
  display: none;
  min-width: 50px;
  border-radius: 999px;
  background: rgba(34, 34, 34, .6);
  text-align: center;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  font-weight: 400;
}
.review-slide-container .slide-paging li span {
  font-weight: 700;
}
.review-slide-container .slide-paging li.slick-active {display: inline-block; }


.review-view {
  position: relative;
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
}

.review-view .review-info {}
.review-view .review-info:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.review-view .review-info .rating-wrapper {
  float: left;
}
.review-view .review-info .rating-wrapper span {
  width: 15px; height: 15px;
  /*-webkit-mask-size: 15px 15px;
  mask-size: 15px 15px; */
}
.review-view .review-info .user-id {
  float: left;
  position: relative;
  margin: 0 10px;
  padding-right: 11px;
  font-size: 14px;
  color: #444;
  line-height: 14px;
}
.review-view .review-info .user-id:after {
  content: "";
  position: absolute;
  right: 0;
  display: inline-block;
  width: 1px; height: 14px;
  margin-left: 10px;
  background: #bbb;
  line-height: 14px;
}
.review-view .review-info .date {
  float: left;
  font-size: 12px;
  line-height: 14px;
  color: #888;
}
.review-view .option {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #888;
}
.review-view .prebox {
  font-size: 14px;
  color: #666;
}





/* =======================================================
  후기쓰기
========================================================*/
.layer-review-write .inventory-group {
  padding: 20px 0px;
}
.layer-review-write .review-rating {
  padding: 20px 20px;
  box-sizing: border-box;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  text-align: center;
}
.layer-review-write .review-rating p {
  margin-bottom: 10px;
  font-size: 14px;
  color: #444;
}
.layer-review-write .review-rating .rating-wrapper span {
  width: 28px; height: 28px;
  -webkit-mask-size: 28px 28px;
  mask-size: 28px 28px;
}
.layer-review-write .form-container {
  padding: 20px 0;
}
.layer-review-write .review-guide-text {
  margin-bottom: 10px;
  font-size: 12px;
  color: #888;
}


/* =======================================================
  쿠폰 사용
========================================================*/
.layer-coupon .coupon-header {
  padding: 20px 20px;
  /* border-bottom: 1px solid #e9eaee; */
  box-sizing: border-box;
}
.layer-coupon .coupon-list {}
.layer-coupon .coupon-list li {
  width: 100%;
  padding: 20px;
  border: 1px solid #dadbdf;
  box-sizing: border-box;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 10px;
}
.layer-coupon .coupon-list li:last-child{
  margin-bottom: 0;
}
.layer-coupon .coupon-list li:hover{
  background-color: #f5f5f5;
}
.layer-coupon .coupon-list li.nodata {
  display: block;
  width: 100%;
  padding: 100px 20px;
  box-sizing: border-box;
  background-color: #fff;
  font-size: 14px;
  color: #888;
  text-align: center;
  cursor: inherit;
}
.layer-coupon .coupon-list .coupon {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.layer-coupon .coupon-list .left {
  display: table-cell;
  width: 75%;
  vertical-align: middle;
}
.layer-coupon .coupon-list .left:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-coupon .coupon-list .radiobox {
    float: left;
 }
.layer-coupon .coupon-list .coupon-info {
  float: left;
  width: calc(100% - 40px);
  font-size: 16px;
}
.layer-coupon .coupon-list .coupon-title {
  color: #444;
  font-weight: 500;
  display: inline-block;
  margin-bottom: 4px;
}
.layer-coupon .coupon-list p {
  font-size: 12px;
  color: #999;
  font-weight: 400;
}
.layer-coupon .coupon-list em {
  font-style: normal;
}
.layer-coupon .coupon-list .right {
  display: table-cell;
  width: 25%;
  font-size: 16px;
  text-align: right;
  font-weight: 700;
  vertical-align: middle;
  line-height: 62px;
}
.layer-coupon .coupon-list .right strong{font-size: 20px;}
.layer-coupon .coupon-list .disable .coupon-title,
.layer-coupon .coupon-list .disable p {
  color: #bbb;
}





/* =======================================================
  쿠폰 등록
========================================================*/
.layer-coupon-add .coupon-container {
  padding: 40px 20px;
}
.layer-coupon-add .coupon-container p {
  text-align: center;
}
.layer-coupon-add .coupon-container .input-text {
  margin: 20px auto 40px;
}






/* =======================================================
  쿠폰 다운로드
========================================================*/
.layer-coupon {padding: 20px; box-sizing: border-box;}
.layer-coupon .coupon-download-list {}

.layer-coupon .coupon-download-list li {position: relative; width: 100%; margin-top: 15px; box-sizing: border-box; overflow: hidden; }

.layer-coupon .coupon-download-list li:first-child { margin-top: 0; }
.layer-coupon .coupon-download-list li.nodata {display: block; width: 100%; padding: 100px 20px; border-bottom: 0; box-sizing: border-box; background-color: #fff; font-size: 14px; color: #888; text-align: center; }


.layer-coupon .coupon-download-list .coupon {position: relative; z-index: 1; width: 100%; min-height: 90px; border: 1px solid #e9eaee; border-radius: 10px; }
.layer-coupon .coupon-download-list .coupon:before {content: ""; position: absolute; left: -10px; top: 50%; z-index: 3; display: block; width: 20px; height: 20px; margin-top: -10px; border: 1px solid #e9eaee; box-sizing: border-box; border-radius: 999px; background-color: #fff; }
.layer-coupon .coupon-download-list .coupon:after {content: ""; position: absolute; right: -10px; top: 50%; z-index: 3; display: block; width: 20px; height: 20px; margin-top: -10px; border: 1px solid #e9eaee; box-sizing: border-box; border-radius: 999px; background-color: #fff; }

.layer-coupon .coupon-download-list .coupon-info {width: 70%; padding: 20px 10px 20px 20px; box-sizing: border-box; text-align: left; white-space:normal;}
.layer-coupon .coupon-download-list .coupon-title {font-size: 15px; margin-bottom: 5px; }
.layer-coupon .coupon-download-list .coupon-sale {display: block; font-size: 20px; margin-bottom: 20px; }
.layer-coupon .coupon-download-list .option {display: block; font-size: 12px; color: #999; margin-bottom: 5px; }
.layer-coupon .coupon-download-list .date {display: block; font-size: 12px; color: #999; }


.layer-coupon .coupon-download-list .coupon-download {position: absolute; right: 0; top: 0; width: 30%; height: 100%; padding: 20px 20px 20px 10px; box-sizing: border-box; border-top-right-radius: 8px; border-bottom-right-radius: 8px; background-color: #888; text-align: center; color: #fff;}
.layer-coupon .coupon-download-list .coupon-download div {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.layer-coupon .coupon-download-list .icon-download {width: 30px; height: 30px; margin: 0 auto 3px; background-image: url("/AppData/images/mediacommerce/white/icon/icon_download_white.svg"); background-size: 20px 22px;}


.layer-coupon .coupon-download-list .coupon.disable {background-color: #e0e0e0; border-color: #ddd; cursor: default; }
.layer-coupon .coupon-download-list .coupon.disable .coupon-sale {color:#777; }
.layer-coupon .coupon-download-list .coupon.disable .coupon-download {color: #ddd; }






/* =======================================================
  coupon-view popup
========================================================*/
.bpopup-mycoupon .mycoupon-wrapper {line-height: 1.5; }
.bpopup-mycoupon .mycoupon-wrapper > div + div {margin-top: 15px; }

.bpopup-mycoupon .mycoupon-top
.bpopup-mycoupon .mycoupon-top p{font-size: 16px; color: #222; margin-top: 15px !important; }
.bpopup-mycoupon .mycoupon-top p + p{margin-top: 15px;}
.bpopup-mycoupon .mycoupon-top p .coupon-sub-tit{display: block; font-size: 12px; color: #777;}
.bpopup-mycoupon .mycoupon-content {color: #777; }
.bpopup-mycoupon .mycoupon-content .option,
.bpopup-mycoupon .mycoupon-content .date {font-size: 13px; }

.bpopup-mycoupon .mycoupon-wrapper .mycoupon-product {background-color: #f6f6f6; padding: 15px; }
.bpopup-mycoupon .mycoupon-wrapper .mycoupon-product strong{display: inline-block; margin-bottom: 6px; font-weight: 500;}
.bpopup-mycoupon .mycoupon-wrapper .mycoupon-product span{font-size: 14px;}
.bpopup-mycoupon .mycoupon-wrapper .mycoupon-product p + p{margin-top: 3px;}
.bpopup-mycoupon .mycoupon-wrapper .coupon-title {font-size: 22px; font-weight: 500; display: inline-block;
  margin-bottom: 15px;}
.bpopup-mycoupon .bpopup-bottom .btn-big {border: 1px solid #222; background-color: #222; color: #fff; }





/* =======================================================
  문의하기
========================================================*/
.layer-deal-qna .checkbox-secret {
  margin: 30px 0;
}

.layer-deal-qna .form-field + .form-field {
  margin-top: 0;
}
.layer-deal-qna .form-field {
  margin-bottom: 30px;
}

/* =======================================================
  포토리뷰
========================================================*/
.layer-photoview {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
}
.layer-photoview .photoreview-list:after {content: ""; clear: both; display: block; height: 0; visibility: }

.layer-photoview .photoreview-list li {
  float: left;
  width: calc((100vw - 60px)/3);
  margin-left: 10px;
  margin-top: 10px;
}
.layer-photoview .photoreview-list li:nth-child(1),
.layer-photoview .photoreview-list li:nth-child(2),
.layer-photoview .photoreview-list li:nth-child(3) {
  margin-top: 0;
}
.layer-photoview .photoreview-list li:nth-child(1),
.layer-photoview .photoreview-list li:nth-child(3n + 1) {
  margin-left: 0;
}
.layer-photoview .photoreview-btn {
  width: calc((100vw - 60px)/3);
  height: calc((100vw - 60px)/3);
}


.layer-instagram .layer-contents {padding-bottom: 40px; }
.layer-instagram .fixed-btn-group {width: 100%; height: 40px; padding:	0; background-color: transparent; }
.layer-instagram .fixed-btn-group .btn {width: 100%; height: 100%; border-radius: 0; }
.layer-instagram .fixed-btn-group .btn span {
	padding-left: 24px;
    background-image: url("/AppData/images/mediacommerce/white/button/btn_cart.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px; }


/* =======================================================
* Device = 저해상도 태블릿, 모바일(가로)
* Screen = 376px에서 767px 사이
========================================================*/
@media all and (min-width: 376px) and (max-width: 767px){

} /* 반응형 끝*/


/* =======================================================
* Device = 아이폰 375px 이하
* Screen = 321px에서 374px 사이
========================================================*/
@media all and (min-width: 321px) and (max-width: 374px) {

} /* 반응형 끝 */



/* =======================================================
* Device = 태블릿, 아이패드(세로), PC
* Screen = 768px 이상
* ========================================================*/
@media all and (min-width: 769px){

  .layer-container {
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 690px;
  }
  .layer-container.active {
    left: 50%;
    /* height: 50vh; */
    bottom: auto;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .layer-container.active::-webkit-scrollbar {
    display: none; /* 스크롤바 안보이게 처리*/
  }
  

/* upload-wrapper
---------------------------------------------------*/
  .layer-deal-qna .upload-wrapper li {
    width: 204px; height: 204px;
  }
  .layer-deal-qna .upload-file {
    width: 204px; height: 204px;
  }

/* 포토리뷰
---------------------------------------------------*/
  .layer-photoview .photoreview-list li{
    width: 204px; height: 204px;
  }

  .layer-photoview .photoreview-btn {
    width: 204px; height: 204px;
  }

.layer-instagram .fixed-btn-group .btn {display: block;  width: 690px;  margin: 0 auto; }
} /* 반응형 끝 */

@media all and (max-width: 769px){
  .layer-contents{height: calc(100vh - 52px);}

}