@charset "utf-8";

/* =================================
*		팝업, 모달, 레이어
*		2021-01-15 작성
================================== */


/* =======================================================
 	modal
========================================================*/
.modal-container {display:none; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; }
.modal-container .dimlayer {position: absolute; top: 0; left: 0; z-index: 600;width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-contents {position: absolute; top: 50%; left: 50%; z-index: 700; width:90%; max-width: 500px; height: 500px; border-radius: 0; background-color: #fff; transform: translate(-50%, -50%); }

.modal-header {position: relative; height: 50px; padding: 0 15px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.modal-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-header .modal-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; } 
.modal-header .modal-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/site/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.modal-body {height: 450px; overflow-y: scroll; padding: 20px 15px; box-sizing: border-box; }
.modal-body:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }


/* 공유하기 modal-share 
-----------------------------------------------------*/
.modal-share .modal-contents {height: auto; }
.modal-share .modal-body {height: auto; overflow-y: auto; }
.modal-share .share-wrapper {position: relative; width: 100%; }

.modal-share .share-list {}
.modal-share .share-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-share .share-list ul {width: 100%; display: table-row; table-layout: fixed; }
.modal-share .share-list li {display: table-cell; width: 1%;}

.modal-share .btn-sns {width: 100%; margin: 0 auto; text-align: center; }
.modal-share .btn-sns .icon {display: block; width: 40px; height: 40px; margin: 0 auto; border-radius: 999px; background-repeat: no-repeat; background-size: contain; }
.modal-share .btn-sns span {display: inline-block; margin-top: 8px; font-size: 12px; color: #444; word-break: keep-all; }

.modal-share .input-btn-group {margin-top: 20px; }
.modal-share .input-btn-group .input-text {width: calc(100% - 85px); }
.modal-share .input-btn-group .btn {width: 80px; }

.btn-copy{padding:0;}

/* 언어설정 modal-share 
-----------------------------------------------------*/






/* =======================================================
 	bpopup
========================================================*/
.bpopup {display: block; background-color: #fff; box-shadow: 0px 3px 12px 5px rgba(7, 7, 7, 0.2); box-sizing: border-box; }


.bpopup-banner { width: 90%; max-width: 480px; }
.bpopup-banner .bpopup-body {max-width: 100%; min-height: 200px; overflow: hidden;}
.bpopup-banner .bpopup-body::-webkit-scrollbar{
  display:none;
}

.bpopup-banner .bpopup-body img {display: block; max-width: 100%;}

.bpopup-banner .bpopup-footer {width: 100%; height: 50px; border-top: 1px solid #ddd; }
.bpopup-banner .bpopup-footer:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }
.bpopup-banner .bpopup-footer > button {float: left; height: 50px; box-sizing: border-box; padding: 0 20px 0 0; font-size: 14px; color: #444; text-align: right; }
.btn-today-group { width: 80%; float: left;  padding-left: 20px; box-sizing: border-box; }
.bpopup-banner .bpopup-footer .btn-banner-today { border-right: 1px solid #ddd; }
.bpopup-banner .bpopup-footer .btn-banner-close {width: 20%; }

.bpopup-banner input[type="checkbox"] { display: none; }
.bpopup-banner input[type="checkbox"] + label {
  position: relative;
  padding-left: 22px;
  cursor: pointer;
	font-size: 14px;
	line-height: 50px;
  color: #666;
}
.bpopup-banner input[type="checkbox"] + label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  transform: translateY(-50%);
  box-sizing: border-box;}

	.bpopup-banner input[type="checkbox"]:checked + label::before {
		background-color: #666;
		border-color: #666;
		content: "";
		background-image: url(/AppData/images/common/icon_checked.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;}

	.bpopup .swiper-button-prev {left:-40px;  }
	.bpopup .swiper-button-next { right: -40px; }
	.swiper-button-prev:after, .swiper-button-next:after { font-size: 0; }
	.bpopup .swiper-button-next{ background-image: url(/AppData/images/common/arrow_popup_right.png); background-size: 60%; background-repeat: no-repeat; background-position:center center;}
 .bpopup .swiper-button-prev{background-image: url(/AppData/images/common/arrow_popup_left.png); background-size: 60%; background-repeat: no-repeat; background-position:center center;}


	/* 스크롤 */
	.scroll::-webkit-scrollbar {
		display: none;
	}
	
	.scroll {
		-ms-overflow-style: none; /* 인터넷 익스플로러 */
		scrollbar-width: none; /* 파이어폭스 */
	}
	


/* =======================================================
 layer
========================================================*/
.layer-container {position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9998; display: none; }
.layer-container.active {display: block; }
.layer-contents {position: absolute; top: 0; left:0; bottom: 0; z-index: 9999; display: block; width: 100%; overflow: hidden; overflow-y: auto; padding: 0 0; box-sizing: border-box; background-color: #fff; }

.layer-header {position: relative; height: 50px; padding: 0 15px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.layer-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-header .layer-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; }
.layer-header .layer-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/site/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.layer-body {box-sizing: border-box; }





/* 쿠폰설정 layer-coupon
-----------------------------------------------------*/
.layer-coupon .coupon-register {padding: 20px 15px 20px; border-bottom: 1px solid #ddd; box-sizing: border-box; }

.layer-coupon .coupon-list { box-sizing: border-box; }
.layer-coupon .coupon-list li {width: 100%; padding: 20px 15px; border-bottom: 1px solid #e3e3e3; box-sizing: border-box; }

.layer-coupon .coupon-list .nodata {width: 100%; padding: 100px 0; border-bottom: 0; }
.layer-coupon .coupon-list .nodata p {text-align: center; color: #666; font-size: 14px; }

.layer-coupon .coupon-list .coupon-item {display: table; width: 100%; table-layout: fixed; }

.layer-coupon .coupon-list .coupon-left {display: table-cell; width: 75%; vertical-align: top; }
.layer-coupon .coupon-list .coupon-left:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.layer-coupon .coupon-list .radio-group {float: left; width: 30px; }
.layer-coupon .coupon-info {float: left; width: calc(100% - 30px); }
.layer-coupon .coupon-info .title {display: block; font-size: 14px; color: #222; font-weight: 700; margin-bottom: 10px; }
.layer-coupon .coupon-info  p {font-size: 12px; color: #999; font-weight: 400; }


.layer-coupon .coupon-list .coupon-right {display: table-cell; width: 25%; font-size: 16px; text-align: right; font-weight: 700; vertical-align: middle; }

.layer-coupon .coupon-list .disable {background-color: #f5f5f5; }
.layer-coupon .coupon-list .disable p,
.layer-coupon .coupon-list .disable .title {color: #bbb; }


/*   ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
@media (min-width: 1025px) {
.modal-container {display: none; position: fixed; top: 0; left: 0; z-index: 500; width: 100%; height: 100%; }
.modal-container .dimlayer {position: absolute; top: 0; left: 0; z-index: 600;width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); }
.modal-contents {position: absolute; top: 50%; left: 50%; z-index: 700; width:100%; max-width: 500px; background-color: #fff; transform: translate(-50%, -50%); }

.modal-header {position: relative; height: 50px; padding: 0 20px; border-bottom: 1px solid #eee; box-sizing: border-box; }
.modal-header:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-header .modal-title {float: left; width: calc(100% - 30px); color: #000; font-size: 18px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; line-height: 49px; overflow: hidden; } 
.modal-header .modal-close {float: right; width: 30px; height: 49px; background-image: url("/AppData/images/site/button/modal_close.png"); background-repeat: no-repeat; background-size: 14px 14px; background-position: center right; }

.modal-body {padding: 20px 20px; box-sizing: border-box; }




.modal-share .share-list {}
.modal-share .share-list:after {content: ""; clear: both; display: block; height: 0; visibility: hidden; }

.modal-share .share-list li {float: left; width: 33.33%; height: 90px;}
.modal-share .share-list li:first-child {margin-right: 0; }

.modal-share .btn-sns {width: 100%; margin: 0 auto; text-align: center; }
.modal-share .btn-sns .icon {display: block; width: 50px; height: 50px; margin: 0 auto; border-radius: 999px; background-repeat: no-repeat; background-size: contain; }

.modal-share .btn-sns span {display: inline-block; margin-top: 8px; font-size: 12px; color: #444; word-break: keep-all; }
.modal-share .input-btn-group {padding-top: 16px; }




.bpopup-banner .bpopup-body {min-height: 356px; max-width: 100%; height: 570px;}
.bpopup-banner .bpopup-body img {display: block;}

}


@media(max-width:640px){
	.bpopup .swiper-button-prev,.bpopup .swiper-button-next { width: 40px; height: 40px; background-color: rgba(34, 34, 34, 0.459); background-size: 12px; border-radius: 50%; }
	.bpopup .swiper-button-prev {left:10px;  }
	.bpopup .swiper-button-next { right: 10px; }
}